/* Fonts */

@import url("https://fonts.googleapis.com/css2?family=Asset&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Asset&family=Outfit:wght@100..900&display=swap");

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  perspective: 2000px;
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
  background-repeat: no-repeat;
  background-size: cover;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Top and Bottom Container */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6rem;
  background: rgba(210, 60, 60, 0.025);
  backdrop-filter: blur(5px);
  mask: linear-gradient(to bottom, black, transparent);
  pointer-events: none;
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 6rem;
  background: rgba(60, 60, 210, 0.025);
  backdrop-filter: blur(5px);
  mask: linear-gradient(to top, black, transparent);
  pointer-events: none;
}

/* Top 2D Content */

#upperLeftName,
#bottomRightName {
  margin: 0;
  position: fixed;
  padding: 1rem;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  font-family: "Asset", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 2rem;
  color: rgb(255, 60, 60);
  text-shadow: 0 5px 20px rgb(255, 60, 60);
}

#upperLeftName {
  top: 0;
  left: 0;
}

#bottomRightName {
  bottom: 0;
  right: 0;
  color: rgb(60, 60, 255);
  text-shadow: 0 -5px 20px rgb(60, 60, 255);
}

/* 3D Background Content */

.container-3d {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: rotateX(80deg) translateZ(-15.625rem);
  z-index: -1;
}

#mainName {
  margin: 0;
  text-align: center;
  color: white;
  font-size: 2.5rem;
  text-shadow: 0 5px 20px black;
  transform: rotateX(-90deg) translateY(-20rem) translateZ(-17.5rem);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

iframe {
  border-radius: 10px; /* Runde Ecken */
  overflow: hidden; /* Verhindert Überlauf */
  box-shadow: 0 50px 50px rgba(0, 0, 0, 0.5); /* Schatten hinzufügen */
  background: #f0f0f0; /* Hintergrundfarbe */
  position: absolute;
  translate: 0 -35rem 10rem;
  rotate: x -45deg;
  z-index: 1;
}

#plane1,
#plane2,
#plane3,
#plane4,
#plane5,
#plane6,
#plane7,
#plane8,
#plane9,
#plane10 {
  position: absolute;
  width: 100px;
  height: 2000px;
  transform-origin: top;
}

#plane1 {
  background: linear-gradient(rgb(200, 60, 60), rgb(255, 60, 60) 75%);
  transform: translateX(-16rem) translateZ(0);
}

#plane2 {
  background: linear-gradient(rgb(200, 200, 60), rgb(255, 255, 60) 75%);
  transform: translateX(-8rem) translateZ(0);
}

#plane3 {
  background: linear-gradient(rgb(60, 200, 60), rgb(60, 255, 60) 75%);
  transform: translateZ(0);
}

#plane4 {
  background: linear-gradient(rgb(60, 60, 200), rgb(60, 60, 255) 75%);
  transform: translateX(8rem) translateZ(0);
}

#plane5 {
  background: linear-gradient(to top, rgb(200, 60, 200), rgb(255, 60, 255) 75%);
  transform: translateX(16rem) translateZ(0);
}

#plane6 {
  background: linear-gradient(to top, rgb(255, 60, 60) 75%, rgb(200, 60, 60));
  transform: rotateX(90deg) translateX(-16rem) translateZ(0);
}

#plane7 {
  background: linear-gradient(to top, rgb(255, 255, 60) 75%, rgb(200, 200, 60));
  transform: rotateX(90deg) translateX(-8rem) translateZ(0);
}

#plane8 {
  background: linear-gradient(to top, rgb(60, 255, 60) 75%, rgb(60, 200, 60));
  transform: rotateX(90deg) translateX(0rem) translateZ(0);
}

#plane9 {
  background: linear-gradient(to top, rgb(60, 60, 255) 75%, rgb(60, 60, 200));
  transform: rotateX(90deg) translateX(8rem) translateZ(0);
}

#plane10 {
  background: linear-gradient(to top, rgb(255, 60, 255) 75%, rgb(200, 60, 200));
  transform: rotateX(90deg) translateX(16rem) translateZ(0);
}

@keyframes move-background {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
  to {
    -webkit-transform: translate3d(1000px, 0px, 0px);
  }
}

.twinkling {
  width: 10000px;
  height: 100%;
  background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png) repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -2;
  animation: move-background 70s linear infinite;
}

/* Responsive Design */
@media only screen and (max-width: 1080px) {
  body {
    width: 300vw;
    height: 280vh;
  }

  footer {
    bottom: 0.5rem;
  }

  #upperLeftName,
  #bottomRightName {
    font-size: 4rem; /* Reduziert die Schriftgröße */
    color: white;
    text-shadow: 0 5px 20px white;
  }

  #bottomRightName {
    text-shadow: 0 -5px 20px white;
  }

  #mainName {
    transform: rotateX(-90deg) translateY(-18.5rem) translateZ(-17.5rem); /* Position angepasst */
  }

  iframe {
    translate: 0 -20rem 10rem; /* Position und Größe anpassen */
  }

  .container-3d {
    transform: rotateX(75deg) translateY(65rem) translateZ(5rem); /* Anpassung für kleinere Bildschirme */
  }

  #plane1,
  #plane2,
  #plane3,
  #plane4,
  #plane5,
  #plane6,
  #plane7,
  #plane8,
  #plane9,
  #plane10 {
    width: 90px; /* Verkleinerung der Breite der Ebenen */
    height: 1500px; /* Verkleinerung der Höhe der Ebenen */
  }
}

@media only screen and (orientation: landscape) and (max-width: 1080px) {
  body {
    width: 188vw;
    height: 285vh;
  }

  footer {
    top: 0;
    mask: linear-gradient(to bottom, black, transparent);
  }

  #upperLeftName,
  #bottomRightName {
    font-size: 3rem; /* Reduziert die Schriftgröße */
    color: white;
    text-shadow: 0 5px 20px white;
  }

  #mainName {
    transform: rotateX(-90deg) translateY(-18.5rem) translateZ(-17.5rem); /* Position angepasst */
  }

  iframe {
    translate: 0 -20rem 10rem; /* Position und Größe anpassen */
  }

  .container-3d {
    transform: rotateX(75deg) translateY(20rem) translateZ(2.5rem); /* Anpassung für kleinere Bildschirme */
  }

  #plane1,
  #plane2,
  #plane3,
  #plane4,
  #plane5,
  #plane6,
  #plane7,
  #plane8,
  #plane9,
  #plane10 {
    width: 90px; /* Verkleinerung der Breite der Ebenen */
    height: 1500px; /* Verkleinerung der Höhe der Ebenen */
  }
}