* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: Helvetica, Arial, sans-serif;
}

.page {
  position: relative;
  width: 1024px;
  height: 781px;
  margin: 0 auto;
  overflow: hidden;
}

.background {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../images_lab/bg_high_res_kurz_mit_hoehle2.jpg") no-repeat left top;
  background-size: contain;
  animation: sceneBreath 8s ease-in-out infinite;
}

/* Home */

.home-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 102px;
  z-index: 20;

  border: 1px solid yellow;
  border-radius: 0 0 70px 0;
  box-shadow:
    0 0 8px rgba(255,255,255,0.85),
    0 0 14px rgba(255,255,0,0.55);

  text-align: center;
  line-height: 140px;
  font-weight: bold;
  color: black;
  text-decoration: none;

  background: rgba(255,255,0,0.45);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.home-button:hover,
.home-button.active {
  background: rgba(255,255,0,0.95);
  box-shadow:
    0 0 10px rgba(255,255,255,1),
    0 0 22px rgba(255,255,0,0.9);
}

/* Navigation */

.nav-item {
  position: absolute;
  display: block;
  z-index: 15;
  background-repeat: no-repeat;
  transform-origin: center bottom;
}

.about {
  top: 292px;
  left: 61px;
  width: 137px;
  height: 117px;
  background-image: url("../images_lab/ranger_stehend_big-u919.png");
  animation: rangerIdle 3.5s ease-in-out infinite;
}

.about:hover {
  background-image: url("../images_lab/ranger_big%20kopie%20text-u919-r.png");
  animation: hoverPop 0.35s ease forwards;
}

.portfolio {
  top: 98px;
  left: 163px;
  width: 109px;
  height: 98px;
  background-image: url("../images_lab/buch_geschlossen_2_portfolio-u917.png");
  animation: bookFloat 4s ease-in-out infinite;
}

.portfolio:hover {
  background-image: url("../images_lab/buch_offen_2_portfolio-u917-r.png");
  filter: drop-shadow(0 0 8px rgba(255,255,0,0.9));
}

.dragon {
  top: 592px;
  left: 153px;
  width: 189px;
  height: 146px;
  background-image: url("../images_lab/dragon_1_big-u916.png");
  animation: dragonBreath 2.8s ease-in-out infinite;
}

.dragon:hover {
  background-image: url("../images_lab/dragon_2_3-u916-r.png");
  filter: drop-shadow(0 0 10px rgba(255,180,0,0.9));
}

.contact {
  top: 444px;
  left: 153px;
  width: 130px;
  height: 124px;
  background-image: url("../images_lab/arrow_w_scroll_diagonal-u915.png");
  animation: arrowSwing 3s ease-in-out infinite;
}

.contact:hover {
  background-image: url("../images_lab/arrow_w_scroll_horizontal2-u915-r.png");
  filter: drop-shadow(0 0 8px rgba(255,255,0,0.9));
}

.credits {
  top: 611px;
  left: 21px;
  width: 125px;
  height: 149px;
  background-image: url("../images_lab/loot_gold_potion-u914.png");
  animation: chestGlow 4s ease-in-out infinite;
}

.credits:hover {
  background-image: url("../images_lab/loot_gold_potion_2-u914-r.png");
  filter: drop-shadow(0 0 10px rgba(255,255,0,0.9));
}

/* Titel */

.title-box {
  position: absolute;
  top: 205px;
  left: 383px;
  width: 575px;
  height: 280px;
  z-index: 8;

  background: rgba(255,255,255,0.6);
  animation: titleEnter 0.9s ease-out forwards;
}

.title-text {
  position: absolute;
  top: 220px;
  left: 393px;
  width: 555px;
  z-index: 9;

  text-align: center;

  animation: titleEnter 1.1s ease-out forwards;
  
  text-shadow:
  2px 2px 0 #fff,
  0 0 8px rgba(255,255,255,0.5);
  animation: pixelGlow 2s infinite alternate;
}

.title-text h1 {
  margin: 0;

  font-family: 'Press Start 2P', cursive;
  font-size: 28px;
  line-height: 42px;

  color: black;

  letter-spacing: 2px;
}

.title-text p {
  margin-top: 48px;

  font-size: 24px;
  line-height: 40px;

  color: black;
}

/* Footer */

.footer {
  position: absolute;
  top: 761px;
  left: 817px;
  width: 205px;
  min-height: 18px;
  z-index: 20;

  background: rgba(255,255,255,0.79);
  font-size: 14px;
  line-height: 18px;
  padding-left: 4px;
}

/* Animationen */

@keyframes sceneBreath {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.01);
  }
}

@keyframes rangerIdle {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes bookFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-6px) rotate(-1deg);
  }
}

@keyframes dragonBreath {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }
}

@keyframes arrowSwing {
  0%, 100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-3deg);
  }
}

@keyframes chestGlow {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(255,255,0,0));
  }

  50% {
    filter: drop-shadow(0 0 7px rgba(255,255,0,0.7));
  }
}

@keyframes titleEnter {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hoverPop {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.04);
  }
}