/* Main stuff */
body, html {
  height: 100%;
}
:root {
  --backlight: rgb(0, 0, 0);
  --boxlight: rgb(0, 0, 0);
  --fontcol: rgb(10, 49, 19);
}

* {
  font-family: "MiSide";
  color: var(--fontcol);
  text-shadow: 0 0 2px var(--backlight);
}

.body-color {
  background-color: black;
}

/* Background */
.bg-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(bfdi-bg.webp) center/cover no-repeat;
  filter: blur(10px);
  z-index: -1;
}

/* Video (Unused) */


/* Togglable constant animations */
h1, h2 {
  animation: textanim 5s infinite;
}

h1, h2 {
  color: var(--fontcol);
  text-shadow: 0 0 10px var(--backlight);
}
h3 {
  color: rgb(255, 157, 157);
  text-shadow: 0 0 10px rgb(255, 0, 0);
}

@font-face {
  font-family: "MiSide";
  src: url(MPLUSRounded1c-Black.ttf);
}

/* Buttons */
.genericBtn {
  background-color: rgba(255, 89, 202, 0.211);
  border-radius: 14px;
  border: none;
  margin: auto;
  width: fit-content;
  padding: 8px 13px;
  cursor: pointer;
  transition: 250ms;
  width: 130px;
  height: 35px;
}
.genericBtn:hover {
  background-color: rgba(255, 89, 130, 0.292);
  color: rgb(255, 167, 186);
  text-shadow: rgb(255, 0, 191);
  box-shadow: 0 0 5px var(--boxlight);
  transform: rotate(3deg);
}
.genericBtn:active {
  transform: scale(1.1) rotate(3deg);
  transition: 100ms;
  animation: reveal 1s;
}

/* Header */
.cst-hr {
  border: 2px solid rgb(255, 136, 206);
  border-radius: 3px;
  box-shadow: 0 0 10px rgb(255, 0, 93);
  width: 80%;
  margin-bottom: 10px;
}

/* Textboxes */
.textbox {
  box-shadow: 0 0 5px var(--boxlight);
  border-radius: 20px;
  background-color: rgb(111, 226, 111);
  height: fit-content;
  padding: 20px 20px;
  backdrop-filter: blur(3px);
  transition: 1s;
  scrollbar-color: rgba(255, 255, 255, 0.163) rgba(227, 4, 4, 0);
  margin: 20px;
  /* animation: entrance 2s ease; */
}
.textbox.center {
  width: 80%;
  margin: auto;
  margin-top: 20px;
}
.textbox.right {
  width: 44%;
  float: right;
}
.textbox.left {
  width: 44%;
  float: left;
}
.textbox:hover {
  background-color: rgb(72, 0, 17);
  box-shadow: 0 0 10px rgb(206, 0, 100);
  transform: translateY(-5px);
  transition: 300ms;
}
.textbox hr {
  border: 1px solid rgba(255, 154, 235, 0.395);
  width: 40%;
  transition: 700ms;
}
.textbox:hover hr {
  width: 100%;
  transition: 300ms;
  box-shadow: 0 0 5px var(--backlight);
}
.subtextbox {
  border: 4px solid rgba(255, 255, 255, 0.092);
  background-color: rgba(0, 0, 0, 0.144);
  border-radius: 15px;
  padding: 1px 15px;
  height: fit-content;
  max-height: 600px;
  overflow: auto;
  scrollbar-color: rgba(255, 255, 255, 0.163) rgba(227, 4, 4, 0);
}
.subtextbox p, span {
  text-shadow: none;
}

/* Columns */
.row {
  display: flex;
  height: 100%;
}
.column {
  flex: 50%;
  height: 100%;
}
.column * {
  transition: 500ms;
}
.column *:hover:not(div, div.subtextbox p, dt, h3) {
  color: rgb(255, 176, 223);
  text-shadow: 0 0 12px rgb(255, 0, 212);
  transition: 100ms;
  scale: 103%;
}
dt {
  color: rgb(255, 221, 136);
  text-shadow: 0 0 12px rgb(255, 201, 23);
}

/* Backdrop filter */


/* Animations */
@keyframes entrance {
  0% {
    left: -400px;
    opacity: 0;
  }
  100% {
    left: 10px;
  }
}

/* Unused */


/* Constant animations */
@keyframes textanim {
  0% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}