.overflow {
  overflow-x: hidden;
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: black;
  font-family: 'Mountains of Christmas', cursive;
  color: white;
}

.heading {
  color: white;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  font-size: 9vmax;
  line-height: 1.1;
}

.green {
  color: green;
}

.red {
  color: red;
}

#los {
  color: white;
  text-decoration: none;
  font-size: 15vmax;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#content {
  text-align: center;
}

#content h2 {
  font-size: 5vmax;
}

#content h3 {
  font-size: 3vmax;
}

#content p {
  font-family: sans-serif;
  margin: 1em;
}

#bild {
  width: 30vmax;
}

.snow-wrapper {
  left: 50%;
  position: absolute;
  animation-name: snowingMove;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  z-index: -10;
}

.snow-flake {
  color: white;
  animation-name: snowing;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7),
    0 0 15px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.5),
    0 0 25px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.3),
    0 0 35px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 255, 255, 0.1);
  user-select: none;
}

@keyframes snowingMove {
  0% {
  }
  100% {
    transform: translateY(150vh);
  }
}

@keyframes snowing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff,
      0 0 50px #fff, 0 0 60px #fff, 0 0 70px #fff;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff,
      0 0 60px #fff, 0 0 70px #fff, 0 0 80px #fff;
  }
}

/* media queries */

@media only screen and (min-width: 1000px) {
  .heading {
    font-size: 6rem;
  }

  #los {
    font-size: 10rem;
  }

  #content h2 {
    font-size: 4rem;
  }

  #content h3 {
    font-size: 3rem;
  }

  #content p {
    font-size: 1.2rem;
    max-width: 50%;
    margin: auto;
    padding: 0.5rem 0;
  }

  #bild {
    width: 20rem;
    margin-top: 2rem;
  }
}