:root {
  font-size: 100%;
  font-family: 'Rotor Variable underlay', sans-serif;
}

body {
  background-color: rgb(0, 0, 0);
  height: 100vh;
  display: grid;
  justify-content: center;
  align-items: center;
  color: rgb(0, 0, 0); 
}

h1 {
  color: rgb(255, 255, 255);
  font-size: 7rem;
  margin: auto;
  white-space: nowrap;
  display: inline-block;
  animation: move 10s infinite alternate;
}

p {
  color: rgb(255, 255, 255);
  font-size: 1rem;
  text-align: center;
  margin: auto;
}



/* Animation */
@keyframes weight-animation {
  from { font-variation-settings: "wght" 100, "RTTX" 0, "DPTH" 20; }
  to { font-variation-settings: "wght" 900, "RTTX" 360, "DPTH" 600; }
}

@keyframes move {
  0%, 100% {transform: scaleX(1) scaleY(1) }
  50% {transform: scaleX(1.5) scaleY(1.5) }
}


@keyframes color-refresh {
  0% {
    color: rgb(255, 255, 255);
  }
  25% {
    color: rgb(234, 67, 5);
  }
  50% {
    color: rgb(255, 255, 255);
  }
  100% {
    color: rgb(52,168, 8);
  }
}




/* Buchstaben */
.letter {
  animation: weight-animation 1s infinite alternate, color-refresh 4s infinite alternate;
  animation-fill-mode: both;
}



/* Zeile 1 */
.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 0.2s; }
.letter:nth-child(3) { animation-delay: 0.4s; }
.letter:nth-child(4) { animation-delay: 0.6s; }
.letter:nth-child(5) { animation-delay: 0.8s; }
.letter:nth-child(6) { animation-delay: 1s; }

.letter:nth-child(7) { animation-delay: 1.2s; }
.letter:nth-child(8) { animation-delay: 1.4s; }
.letter:nth-child(9) { animation-delay: 1.6s; }
.letter:nth-child(10) { animation-delay: 1.8s; }
.letter:nth-child(11) { animation-delay: 2s; }
.letter:nth-child(12) { animation-delay: 2.2s; }

.letter:nth-child(13) { animation-delay: 2.4s; }
.letter:nth-child(14) { animation-delay: 2.6s; }
.letter:nth-child(15) { animation-delay: 2.8s; }
.letter:nth-child(16) { animation-delay: 3s; }
.letter:nth-child(17) { animation-delay: 3.2s; }
.letter:nth-child(18) { animation-delay: 3.4s; }


/* Zeile 2 */
.letter:nth-child(20) { animation-delay: 3.4s; }
.letter:nth-child(21) { animation-delay: 3.2s; }
.letter:nth-child(22) { animation-delay: 3.0s; }
.letter:nth-child(23) { animation-delay: 2.8s; }
.letter:nth-child(24) { animation-delay: 2.6s; }
.letter:nth-child(25) { animation-delay: 2.4s; }

.letter:nth-child(26) { animation-delay: 2.2s; }
.letter:nth-child(27) { animation-delay: 2s; }
.letter:nth-child(28) { animation-delay: 1.8s; }
.letter:nth-child(29) { animation-delay: 1.6s; }
.letter:nth-child(30) { animation-delay: 1.4s; }
.letter:nth-child(31) { animation-delay: 1.2s; }

.letter:nth-child(32) { animation-delay: 1s; }
.letter:nth-child(33) { animation-delay: 0.8s; }
.letter:nth-child(34) { animation-delay: 0.6s; }
.letter:nth-child(35) { animation-delay: 0.4s; }
.letter:nth-child(36) { animation-delay: 0.2s; }
.letter:nth-child(37) { animation-delay: 0s; }


/* Zeile 3 */
.letter:nth-child(39) { animation-delay: 0s; }
.letter:nth-child(40) { animation-delay: 0.2s; }
.letter:nth-child(41) { animation-delay: 0.4s; }
.letter:nth-child(42) { animation-delay: 0.6s; }
.letter:nth-child(43) { animation-delay: 0.8s; }
.letter:nth-child(44) { animation-delay: 1s; }

.letter:nth-child(45) { animation-delay: 1.2s; }
.letter:nth-child(46) { animation-delay: 1.4s; }
.letter:nth-child(47) { animation-delay: 1.6s; }
.letter:nth-child(48) { animation-delay: 1.8s; }
.letter:nth-child(49) { animation-delay: 2s; }
.letter:nth-child(50) { animation-delay: 2.2s; }

.letter:nth-child(51) { animation-delay: 2.4s; }
.letter:nth-child(52) { animation-delay: 2.6s; }
.letter:nth-child(53) { animation-delay: 2.8s; }
.letter:nth-child(54) { animation-delay: 3s; }
.letter:nth-child(55) { animation-delay: 3.2s; }
.letter:nth-child(56) { animation-delay: 3.4s; }


/* Zeile 4 */
.letter:nth-child(58) { animation-delay: 3.4s; }
.letter:nth-child(59) { animation-delay: 3.2s; }
.letter:nth-child(60) { animation-delay: 3s; }
.letter:nth-child(61) { animation-delay: 2.8s; }
.letter:nth-child(62) { animation-delay: 2.6s; }
.letter:nth-child(63) { animation-delay: 2.4s; }

.letter:nth-child(64) { animation-delay: 2.2s; }
.letter:nth-child(65) { animation-delay: 2s; }
.letter:nth-child(66) { animation-delay: 1.8s; }
.letter:nth-child(67) { animation-delay: 1.6s; }
.letter:nth-child(68) { animation-delay: 1.4s; }
.letter:nth-child(69) { animation-delay: 1.2s; }

.letter:nth-child(70) { animation-delay: 1s; }
.letter:nth-child(71) { animation-delay: 0.8s; }
.letter:nth-child(72) { animation-delay: 0.6s; }
.letter:nth-child(73) { animation-delay: 0.4s; }
.letter:nth-child(74) { animation-delay: 0.2s; }
.letter:nth-child(75) { animation-delay: 0s; }


/* Zeile 5 */
.letter:nth-child(77) { animation-delay: 0s; }
.letter:nth-child(78) { animation-delay: 0.2s; }
.letter:nth-child(79) { animation-delay: 0.4s; }
.letter:nth-child(80) { animation-delay: 0.6s; }
.letter:nth-child(81) { animation-delay: 0.8s; }
.letter:nth-child(82) { animation-delay: 1s; }

.letter:nth-child(83) { animation-delay: 1.2s; }
.letter:nth-child(84) { animation-delay: 1.4s; }
.letter:nth-child(85) { animation-delay: 1.6s; }
.letter:nth-child(86) { animation-delay: 1.8s; }
.letter:nth-child(87) { animation-delay: 2s; }
.letter:nth-child(88) { animation-delay: 2.2s; }

.letter:nth-child(89) { animation-delay: 2.4s; }
.letter:nth-child(90) { animation-delay: 2.6s; }
.letter:nth-child(91) { animation-delay: 2.8s; }
.letter:nth-child(92) { animation-delay: 3s; }
.letter:nth-child(93) { animation-delay: 3.2s; }
.letter:nth-child(94) { animation-delay: 3.4s; }

.letter:nth-child(95) { animation-delay: 3.4s; }
.letter:nth-child(96) { animation-delay: 3.2s; }
.letter:nth-child(97) { animation-delay: 3s; }
.letter:nth-child(98) { animation-delay: 2.8s; }
.letter:nth-child(99) { animation-delay: 2.6s; }
.letter:nth-child(100) { animation-delay: 2.4s; }



/* Super Grid */

.wrapper {
  background-color: rgb(0, 0, 0);
  display: grid;
  grid-template-columns: 1fr;
}

.item1 {
  grid-column: 1 / span 1;
  align-content: center;
  justify-self: center;
  height: 94vh;
  width: 100%;
}

.item-container {
  display: flex;
  justify-content: center;
  height: 6vh;
  gap: 10rem;
}

.item2, .item3, .item4 {
  position: relative;
  align-content: top;
  justify-self: center;
}



/* Buttons */

.button {
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(255, 255, 255);
  background-color: transparent;
  border: none;
}

.button-link {
  text-decoration: none;
  color: inherit;
}

.button-link:hover {
  color: rgb(66, 133, 244);
}