:root {
  font-family: 'Bodoni Moda'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
  color: #FFC5F4;
}

body{
  background:#1D1D1D;
  overflow: hidden;
  /* push down the wrapper by half the page */
  margin: 50% 0 0 0;
}

body::after {
  content: '';
  position:fixed;
  top: 0; 
  width: 100%;
  height: 30%;
  background: linear-gradient(180deg, rgba(29, 29, 29, 1) 40%, rgba(29, 29, 29, 0) 100%);
}

span {display: inline-block}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 60%;
  margin: 0 auto;
  perspective: 450px;

}

.scroll-text {
  font-size: 3vw;
  line-height: 0.5em;
  font-weight: 400;
  text-align: justify;
  position: relative;
  animation: scroll 20s linear forwards;
  animation-iteration-count: 10;
}

h1, h2 {
  text-align: center;
}

@keyframes scroll {
  from { top: 0px; transform: translateZ(0) rotateX('20deg')}
  to {top: -3400px; transform: translateZ(-2000) rotateX('21deg')}
  0% {font-variation-settings: 'wght' 400, 'opsz' 5; letter-spacing: .1rem; font-size: 3vw; }
  20% {font-variation-settings: 'wght' 900, 'opsz' 100; letter-spacing: 1.5rem; font-size: 3.5vw; }
  30% {font-variation-settings: 'wght' 400, 'opsz' 5; letter-spacing: .1rem; font-size: 3vw; }
  40% {font-variation-settings: 'wght' 900, 'opsz' 100; letter-spacing: 1.5rem; font-size: 3.5vw; }
  50% {font-variation-settings: 'wght' 400, 'opsz' 5; letter-spacing: .1rem; font-size: 3vw; }
  60% {font-variation-settings: 'wght' 900, 'opsz' 100; letter-spacing: 1.5rem; font-size: 3.5vw; }
  70% {font-variation-settings: 'wght' 400, 'opsz' 5; letter-spacing: .1rem; font-size: 3vw; }
  80% {font-variation-settings: 'wght' 900, 'opsz' 100; letter-spacing: 1.5rem; font-size: 3.5vw; }
  90% {font-variation-settings: 'wght' 400, 'opsz' 5; letter-spacing: .1rem; font-size: 3vw; }
  100% {font-variation-settings: 'wght' 900, 'opsz' 100; letter-spacing: 1.5rem; font-size: 3.5vw; }
}