html {
  scroll-behavior: smooth;
}

#image {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  -webkit-filter: blur(0.5px); /* Safari 6.0 - 9.0 */
  filter: blur(0.5px);
  z-index: -99
}

body {
  /* background: linear-gradient(180deg, rgba(0,48,143,1) 0%, rgba(71,137,190,1) 100%);  */
  background: linear-gradient(180deg, rgba(9,16,29,1) 31%, rgba(89,71,190,1) 32%, rgba(71,137,190,1) 100%);   background-repeat: no-repeat;
  font-family: "Mountains of Christmas", cursive;
  overflow-x: hidden;
  color: white;
  width: 100vw;
  margin: auto;
}

.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%);
}

#los::after {
  content: "\21e9";
}

#content {
  text-align: center;
}

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

#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 p {
    font-size: 1.2rem;
    max-width: 50%;
    margin: auto;
    padding: 0.5rem 0;
  }

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

  #image {
    -webkit-filter: blur(2px); /* Safari 6.0 - 9.0 */
    filter: blur(2px);
    transform: translate(-50%, -50%);
  }
}