* {
  margin: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  background: rgb(168, 197, 169);
  background: linear-gradient(
    0deg,
    rgba(168, 197, 169, 1) 0%,
    rgba(135, 200, 192, 1) 48%,
    rgba(61, 153, 192, 1) 100%
  );
}

.wrapper {
  height: 100vh;
  width: 100%;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: Roboto;
}

.fahrwerk {
  font-size: 10rem;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variation-settings: "opsz" 144, "wght" 600, "GRAD" 150, "wdth" 100,
    "slnt" 0, "XOPQ" 96, "YOPQ" 79, "XTRA" 416, "YTUC" 712, "YTLC" 416,
    "YTAS" 750, "YTDE" -203, "YTFI" 738;
}

.fahrwerk span {
  transform: rotate(180deg) translateY(4px);
  font-variation-settings: "opsz" 144, "wght" 600, "GRAD" 150, "wdth" 100,
    "slnt" 0, "XOPQ" 96, "YOPQ" 79, "XTRA" 416, "YTUC" 712, "YTLC" 416,
    "YTAS" 750, "YTDE" -203, "YTFI" 738;
}

.fahrwerk-wrapper {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  position: relative;
  margin-bottom: 400px;
}

.fahrwerk-animation {
  animation: landing-animation 4s ease-in-out forwards;
}

.CTA {
  padding: 10px 20px;
  border: solid 2px var(--white);
  border-radius: 7px;
  letter-spacing: 1px;
  transition: all 0.5s;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  background-color: var(--white);
}

.CTA:hover {
  background-color: var(--black);
  color: var(--white);
}

@keyframes landing-animation {
  from {
  }
  to {
    font-variation-settings: "opsz" 144, "wght" 600, "GRAD" 150, "wdth" 100,
      "slnt" -10, "XOPQ" 96, "YOPQ" 79, "XTRA" 416, "YTUC" 712, "YTLC" 579,
      "YTAS" 750, "YTDE" -203, "YTFI" 738;
    margin-top: 100px;
    transform: rotate(189deg) translateX(15px);
  }
}

.clouds {
  position: absolute;
  bottom: -100px;
  width: 140%;
}