/*
  CSS RESET
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  font-size: 100%;
}

ul,
ol {
  list-style: none;
}

img,
video {
  width: 100%;
}

a {
  color: black;
  text-decoration: none;
}




/*
  STYLES
*/

@font-face {
  font-family: "squatina";
  src: 
  url("../fonts/Squatina-Regular.otf") format("otf"),
  url("../fonts/Squatina-Regular.woff") format("woff"),
  url("../fonts/Squatina-Regular.woff2") format("woff2");
}



body {
  margin: 0;
  padding: 0;
  background-color:#E45050;
  font-family: "squatina";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

main {
  position: absolute;
  width: 100%;
  height: 100%;
}

.fotobuch {
  position: absolute;
  top: 15vw;
  left: 40vw;
}

.fotobuch img {
  position: absolute;
  width: 20vw;
  transition: transform 0.3s ease;
}

/* Bilder */
.fotobuch img:nth-child(1) { 
  z-index: 1;
  left: 19vw;
  top: 2vw; 
}

.fotobuch img:nth-child(2) { 
  z-index: 2; 
  left: 14vw;
  top: 1vw;
}

.fotobuch img:nth-child(3) { 
  z-index: 14; 
  left: 12vw;
  top: -5vw;
}

.fotobuch img:nth-child(4) { 
  z-index: 14; 
  top: -8vw;
}

.fotobuch img:nth-child(5) { 
  z-index: 13; 
  left: 2vw;
  top: 13vw;
}

.fotobuch img:nth-child(6) { 
  z-index: 20; 
  left: -1vw;
  top: 9vw;
}

.fotobuch img:nth-child(7) { 
  right: -5vw;
  top: -3vw;
  z-index: 13; 
}

.fotobuch img:nth-child(8) { 
  right: -7vw;
  z-index: 11; 
}

.fotobuch img:nth-child(9) { 
  left: -8vw;
  top: 0vw;
  z-index: 12; 
}

.fotobuch img:nth-child(10) { 
  right: 1vw;
  top: 1vw;
  z-index: 10; 
}

/* Hover-Effekt */
.fotobuch img:hover {
  transform: scale(2); 
  transition: transform 5s;
  z-index: 20;
}


/* Planet */
.planet {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 5vw;
  z-index: 10;
}

/* Notenschlüssel */
.notenschluessel {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2.5vw;
  z-index: 10;
}

/* Sterne  */
.stern, .stern2, .stern3, .stern4, .stern5, .stern6 {
  position: absolute;
  font-size: 20vw;
  color: #f0a7a7;
  animation-name: fliegen;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Unterschiedliche Dauer und Delay, damit es zufällig aussieht */
.stern    { animation-duration: 12s; top: 10%; left: 10%; }
.stern2   { animation-duration: 15s; top: 50%; left: 20%; }
.stern3   { animation-duration: 10s; top: 30%; left: 70%; }
.stern4   { animation-duration: 18s; top: 70%; left: 40%; }
.stern5   { animation-duration: 13s; top: 80%; left: 80%; }
.stern6   { animation-duration: 8s;  top: 20%; left: 50%; }

@keyframes fliegen {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(100px, -150px) rotate(90deg);
  }
  50% {
    transform: translate(-200px, 200px) rotate(180deg);
  }
  75% {
    transform: translate(150px, -100px) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}




.text {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  font-size: 25vw;
  color: #ffd500;
  white-space: nowrap;
  animation: pingpong 12s linear infinite;
  z-index: 1;
}

a:first-child {
  color: antiquewhite;
}


@keyframes pingpong {
  0% {
    /* top: 50% vh; */
    left: 100%;
  }

  100% {
    /* top: 50% vh; */
    left: -200%;
  }
}