/* Main styles */
body {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: rgb(26,27,38);
}

@font-face {
  font-family: 'Roboto';
  src: url(Roboto/static/Roboto-Medium.ttf);
}

* {
  color: rgb(189, 194, 255);
  font-family: 'Roboto';
}

@font-face {
  font-family: 'Test';
  src: url(something);
}

hr {
  border: 1px solid rgb(83, 89, 156);
  width: 85%;
}
dt {
  font-weight: bold;
}

/* Flexboxes */
.flex-container {
  display: flex;
  /* background: rgba(210, 106, 106, 0.344); */
}

/* Textboxes */
.textbox {
  background-color: rgb(32, 27, 63);
  border-radius: 20px;
  padding: 20px;
  width: 78%;
  position: relative;
}
.subtextbox {
  background-color: rgba(0, 0, 0, 0.132);
  border: 4px solid rgba(115, 138, 255, 0.3);
  border-radius: 14px;
  padding: 10px 20px;
  overflow-y: auto;
  max-height: 450px;
  scrollbar-color: rgba(255, 255, 255, 0.142) rgba(255, 255, 255, 0);
}

/* Fancy animations */
@property --rgb-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.textbox::after, .textbox::before {
  --rgb-angle: 0deg;
  content: '';
  position: absolute;
  background-image: conic-gradient(from var(--rgb-angle), rgb(57, 0, 164), rgb(73, 0, 169), rgb(170, 0, 196), rgb(57, 0, 164));
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 23px;
  padding: 4px;
  transition: 1s;
  opacity: 0;
  animation: spin 3s linear infinite;
}
.textbox::before {
  filter: blur(20px);
  opacity: 0;
}
.textbox:hover::before, .textbox:hover::after {
  padding: 4px;
  opacity: 1;
  transition: 500ms;
}

@keyframes spin {
  from {
    --rgb-angle: 0deg;
  }
  to {
    --rgb-angle: 360deg;
  }
}

/* Images */
.mini-img {
  height: 80px;
}