:root {
  font-size: 100%;
  font-family: 'Roboto Flex';
}

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: 10rem;
  margin: auto;
  white-space: nowrap; 
  display: inline-block;
}

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



/* Animation */

@keyframes weight-animation {
  from { font-variation-settings: "wght" 100, "YOPQ" 25; }
  to { font-variation-settings: "wght" 950, "YOPQ" 135; }
}



/* Buchstaben */

.letter {
  display: inline-block;
  animation: weight-animation 2s infinite alternate;
  animation-fill-mode: both;
  display: inline;
}


.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: 0s; }
.letter:nth-child(8) { animation-delay: 0.2s; }
.letter:nth-child(9) { animation-delay: 0.4s; }
.letter:nth-child(10) { animation-delay: 0.6s; }
.letter:nth-child(11) { animation-delay: 0.8s; }
.letter:nth-child(12) { animation-delay: 1s; }

.letter:nth-child(13) { animation-delay: 0s; }
.letter:nth-child(14) { animation-delay: 0.2s; }
.letter:nth-child(15) { animation-delay: 0.4s; }
.letter:nth-child(16) { animation-delay: 0.6s; }
.letter:nth-child(17) { animation-delay: 0.8s; }
.letter:nth-child(18) { animation-delay: 1s; }

.letter:nth-child(19) { animation-delay: 0s; color: transparent; }

.letter:nth-child(20) { animation-delay: 0s; }
.letter:nth-child(21) { animation-delay: 0.2s; }
.letter:nth-child(22) { animation-delay: 0.4s; }
.letter:nth-child(23) { animation-delay: 0.6s; }
.letter:nth-child(24) { animation-delay: 0.8s; }
.letter:nth-child(25) { animation-delay: 1s; }

.letter:nth-child(26) { animation-delay: 0s; }
.letter:nth-child(27) { animation-delay: 0.2s; }
.letter:nth-child(28) { animation-delay: 0.4s; }
.letter:nth-child(29) { animation-delay: 0.6s; }
.letter:nth-child(30) { animation-delay: 0.8s; }
.letter:nth-child(31) { animation-delay: 1s; }

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

.letter:nth-child(38) { animation-delay: 0s; color: transparent; }

.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: 0s; }
.letter:nth-child(46) { animation-delay: 0.2s; }
.letter:nth-child(47) { animation-delay: 0.4s; }
.letter:nth-child(48) { animation-delay: 0.6s; }
.letter:nth-child(49) { animation-delay: 0.8s; }
.letter:nth-child(50) { animation-delay: 1s; }

.letter:nth-child(51) { animation-delay: 0s; }
.letter:nth-child(52) { animation-delay: 0.2s; }
.letter:nth-child(53) { animation-delay: 0.4s; }
.letter:nth-child(54) { animation-delay: 0.6s; }
.letter:nth-child(55) { animation-delay: 0.8s; }
.letter:nth-child(56) { animation-delay: 1s; }

.letter:nth-child(57) { animation-delay: 0s; color: transparent; }

.letter:nth-child(58) { animation-delay: 0s; }
.letter:nth-child(59) { animation-delay: 0.2s; }
.letter:nth-child(60) { animation-delay: 0.4s; }
.letter:nth-child(61) { animation-delay: 0.6s; }
.letter:nth-child(62) { animation-delay: 0.8s; }
.letter:nth-child(63) { animation-delay: 1s; }

.letter:nth-child(64) { animation-delay: 0s; }
.letter:nth-child(65) { animation-delay: 0.2s; }
.letter:nth-child(66) { animation-delay: 0.4s; }
.letter:nth-child(67) { animation-delay: 0.6s; }
.letter:nth-child(68) { animation-delay: 0.8s; }
.letter:nth-child(69) { animation-delay: 1s; }

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


/* 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);
}