:root {
  --width: 200px;
  --height: calc(var(--width) / 2);

  background-color: #bde0fe;
  background-image: url("../static/background.png");
}

@font-face {
  font-family: MountainsOfChristmas;
  src: url("../static/MountainsofChristmas-Regular.ttf");
}
button {
  color: #03045e;
  font-size: 50px;

  border: none;
  background: none;

  font-family: MountainsOfChristmas;
}
.center {
  position: fixed;
  inset: 0px;
  width: 100%;
  height: 75%;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}

i {
  font-size: 25px;
}
p {
  font-family: auto;
  font-size: 15px;
}

.layer1 {
  width: var(--width);
  height: var(--height);
  background: url("../static/snowflake.png");
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  animation:
    toRight linear 6.8s infinite alternate,
    bounce linear 17s infinite alternate;
}

#snow-container {
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: opacity 500ms;
  width: 100%;
}

.snow {
  animation:
    snow-vertical ease-in infinite,
    snow-horizontal ease-in-out infinite;
  color: white;
  position: absolute;
  font-family: MountainsOfChristmas;
}

@keyframes bounce {
  0% {
    top: 0;
  }
  48% {
  }
  50% {
    top: calc(100% - var(--height));
  }
  52% {
  }
  100% {
    top: 0;
  }
}

@keyframes toRight {
  0% {
    left: 0;
  }
  100% {
    left: calc(100% - var(--width));
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes snow-vertical {
  0% {
    opacity: 0;
  }
  25% {
  }
  50% {
    opacity: 1;
  }
  75% {
  }
  100% {
    top: 100vh;
    opacity: 1;
  }
}

@keyframes snow-horizontal {
  0% {
    margin-left: 0;
  }
  25% {
    margin-left: 50px;
  }
  50% {
    margin-left: -50px;
  }
  75% {
    margin-left: 50px;
  }
  100% {
    margin-left: 0;
  }
}