:root {
  font-size: 100%;
  font-family:'Oddity Trial', 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: #ffffff;
  font-size: 7rem;
  margin: auto;
  white-space: nowrap; 
  display: inline-block;
}




.letter {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

.letter:hover {
  transform: rotate(180deg) rotate(var(--rotation));
  color: rgb(66, 133, 244);

}



/* Zeile 1, 3, 5 */
.letter:nth-child(1), .letter:nth-child(39), .letter:nth-child(77) { font-variation-settings: "wght" 0; 
  --rotation: 0deg;
}
.letter:nth-child(2), .letter:nth-child(40), .letter:nth-child(78) { font-variation-settings: "wght" 100; 
  --rotation: 10deg;
}
.letter:nth-child(3), .letter:nth-child(41), .letter:nth-child(79) { font-variation-settings: "wght" 200; 
  --rotation: 20deg;
}
.letter:nth-child(4), .letter:nth-child(42), .letter:nth-child(80) { font-variation-settings: "wght" 300; 
  --rotation: 30deg;
}
.letter:nth-child(5), .letter:nth-child(43), .letter:nth-child(81) { font-variation-settings: "wght" 400; 
  --rotation: 40deg;
}
.letter:nth-child(6), .letter:nth-child(44), .letter:nth-child(82) { font-variation-settings: "wght" 500; 
  --rotation: 50deg;
}
.letter:nth-child(7), .letter:nth-child(45), .letter:nth-child(83) { font-variation-settings: "wght" 600; 
  --rotation: 60deg;
}
.letter:nth-child(8), .letter:nth-child(46), .letter:nth-child(84) { font-variation-settings: "wght" 700; 
  --rotation: 70deg;
}
.letter:nth-child(9), .letter:nth-child(47), .letter:nth-child(85) { font-variation-settings: "wght" 800; 
  --rotation: 80deg;
}
.letter:nth-child(10), .letter:nth-child(48), .letter:nth-child(86) { font-variation-settings: "wght" 800; 
  --rotation: 90deg;
}
.letter:nth-child(11), .letter:nth-child(49), .letter:nth-child(87) { font-variation-settings: "wght" 700; 
  --rotation: 100deg;
}
.letter:nth-child(12), .letter:nth-child(50), .letter:nth-child(88) { font-variation-settings: "wght" 600; 
  --rotation: 110deg;
}
.letter:nth-child(13), .letter:nth-child(51), .letter:nth-child(89) { font-variation-settings: "wght" 500; 
  --rotation: 120deg;
}
.letter:nth-child(14), .letter:nth-child(52), .letter:nth-child(90) { font-variation-settings: "wght" 400; 
  --rotation: 130deg;
}
.letter:nth-child(15), .letter:nth-child(53), .letter:nth-child(91) { font-variation-settings: "wght" 300; 
  --rotation: 140deg;
}
.letter:nth-child(16), .letter:nth-child(54), .letter:nth-child(92) { font-variation-settings: "wght" 200; 
  --rotation: 150deg;
}
.letter:nth-child(17), .letter:nth-child(55), .letter:nth-child(93) {  font-variation-settings: "wght" 100; 
  --rotation: 160deg;
}
.letter:nth-child(18), .letter:nth-child(56), .letter:nth-child(94) { font-variation-settings: "wght" 0; 
  --rotation: 170deg;
}

/* Zeilenumbruch */
.letter:nth-child(19), .letter:nth-child(57) { font-variation-settings: "wght" 0; 
}

/* Zeile 2, 4 */
.letter:nth-child(20), .letter:nth-child(58) { font-variation-settings: "wght" 0; 
  --rotation: 0deg;
}
.letter:nth-child(21), .letter:nth-child(59) { font-variation-settings: "wght" 100; 
  --rotation: 10deg;
}
.letter:nth-child(22), .letter:nth-child(60) { font-variation-settings: "wght" 200; 
  --rotation: 20deg;
}
.letter:nth-child(23), .letter:nth-child(61) { font-variation-settings: "wght" 300; 
  --rotation: 30deg;
}
.letter:nth-child(24), .letter:nth-child(62) { font-variation-settings: "wght" 400; 
  --rotation: 40deg;
}
.letter:nth-child(25), .letter:nth-child(63) { font-variation-settings: "wght" 500; 
  --rotation: 50deg;
}
.letter:nth-child(26), .letter:nth-child(64) { font-variation-settings: "wght" 600; 
  --rotation: 60deg;
}
.letter:nth-child(27), .letter:nth-child(65) { font-variation-settings: "wght" 700; 
  --rotation: 70deg;
}
.letter:nth-child(28), .letter:nth-child(66) { font-variation-settings: "wght" 800; 
  --rotation: 80deg;
}
.letter:nth-child(29), .letter:nth-child(67) { font-variation-settings: "wght" 800; 
  --rotation: 90deg;
}
.letter:nth-child(30), .letter:nth-child(68) { font-variation-settings: "wght" 700; 
  --rotation: 100deg;
}
.letter:nth-child(31), .letter:nth-child(69) { font-variation-settings: "wght" 600; 
  --rotation: 110deg;
}
.letter:nth-child(32), .letter:nth-child(70) { font-variation-settings: "wght" 500; 
  --rotation: 120deg;
}
.letter:nth-child(33), .letter:nth-child(71) { font-variation-settings: "wght" 400; 
  --rotation: 130deg;
}
.letter:nth-child(34), .letter:nth-child(72) { font-variation-settings: "wght" 300; 
  --rotation: 140deg;
}
.letter:nth-child(35), .letter:nth-child(73) { font-variation-settings: "wght" 200; 
  --rotation: 150deg;
}
.letter:nth-child(36), .letter:nth-child(74) { font-variation-settings: "wght" 100; 
  --rotation: 160deg;
}
.letter:nth-child(37), .letter:nth-child(75) { font-variation-settings: "wght" 0; 
  --rotation: 170deg;
}

/* Zeilenumbruch */
.letter:nth-child(38), .letter:nth-child(76) { font-variation-settings: "wght" 0; 
}




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