body#index {
  background-image: url("/assets/bg-paper.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

main#index {
  color: var(--text-color);
  background: var(--bg-color);
}

.headline {
  font-size: 64px;
  font-family: "Where My Keys";
  text-align: center;

  margin-top: 0;
  margin-bottom: 0;

  padding: 1rem;
  border: var(--border-width) solid var(--border-color);
}

.nav-container {
  display: flex;
  border-left: var(--border-width) solid var(--border-color);
  border-right: var(--border-width) solid var(--border-color);
}

.nav-element {
  width: auto;
  padding: 1rem;

  font-size: 1.5rem;

  /* border: var(--border-width) solid var(--border-color); */

  width: calc(100% / var(--num-nav-elements));

  display: flex;
  justify-content: center;
}

.nav-element a {
  color: inherit;
  text-decoration: none;
  font-family: "Hallory";

  transition: transform 0.2s;
}

.nav-element a:hover {
  transform: scale(1.5);
}

.moving-text {
  font-family: "Glory", sans-serif;
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow:
    calc(var(--moving-text-anim-x) * -1) calc(var(--moving-text-anim-y) * -1)
      0px #f61d0c,
    calc(var(--moving-text-anim-x) * -2) calc(var(--moving-text-anim-y) * -2)
      0px #04c49f,
    calc(var(--moving-text-anim-x) * -3) calc(var(--moving-text-anim-y) * -3)
      0px #ff92ee;
}

.content-container {
  padding: 2rem;

  font-size: 1.25rem;
  font-weight: bold;

  border: var(--border-width) solid var(--border-color);
}

.board {
  font-size: 1.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.5;
  text-shadow:
    1px 1px #666,
    3px 3px #000;
  width: auto;
  padding: 20px;
  overflow: hidden;
  color: #fff;
  border: 10px solid #eee;
  background: linear-gradient(#0e0e0e 65%, #030303 66%) top 0.03em center/100%
    0.3em repeat-y;
  box-shadow:
    0px -1px 0px 2px #aaa,
    0 -7px 5px -5px #000,
    0 -15px 30px -15px #000,
    0 3px 4px -2px #000,
    -60px 30px 70px -70px #000,
    70px 30px 70px -70px #000,
    0px 200px 20px rgba(255, 255, 255, 0.05),
    inset 0 0 25px #000,
    inset 0 0 5px #000;
}

@keyframes animation_fade_in_up {
  0% {
    opacity: 0;
    transform: translate(0, 3vh);
  }
  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes animation_fade_in_left {
  0% {
    opacity: 0;
    transform: translate(-3vh, 0);
  }
  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes animation_fade_in_right {
  0% {
    opacity: 0;
    transform: translate(3vh, 0);
  }
  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.animation_fade_in_up {
  animation: animation_fade_in_up 0.8s;
  animation-timing-function: ease-in-out;
}

.animation_fade_in_left {
  animation: animation_fade_in_left 0.8s;
  animation-timing-function: ease-in-out;
}
.animation_fade_in_right {
  animation: animation_fade_in_right 0.8s;
  animation-timing-function: ease-in-out;
}