#snow-overlay {
    position: fixed; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  }
  
  
  @keyframes up {
      0% {
          transform: translateY(0%);
      }
  
      50% {
          transform: translateY(100px);
      }
  
      100% {
          transform: translateY(0);
      }
  }
  
  @keyframes across {
      from {
          right: 0%;
      }
  
      to {
          right: 100%;
      }
  }
  
  .snow {
      width: 100%;
      height: 100%;
      position: absolute;
      color: #ecf2f8;
  }
  
  .snowflake {
      animation-name: fall, shake;
      animation-duration: 10s, 5s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      left: 200px;
      z-index: 7;
      filter: blur(0.5px);
  }
  
  .snowflake1 {
      animation-name: fall, shake;
      animation-duration: 10s, 3s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      left: 500px;
      top: -100px;
      animation-delay: 1s, 1s;
      z-index: 7;
      filter: blur(0.5px);
  }
  
  .snowflake2 {
      animation-name: fall, shake;
      animation-duration: 8s, 5s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      left: 20px;
      top: -100px;
      animation-delay: 2s, 2s;
      z-index: 7;
      filter: blur(0.5px);
  }
  
  .snowflake3 {
      animation-name: fall, shake;
      animation-duration: 9s, 5s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      right: 170px;
      top: -100px;
      animation-delay: 3s, 5s;
      z-index: 5;
      filter: blur(0.7px);
  }
  
  .snowflake4 {
      animation-name: fall, shake;
      animation-duration: 15s, 5s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      right: 430px;
      top: -100px;
      animation-delay: 4s, 4s;
      z-index: 5;
  }
  
  .snowflake5 {
      animation-name: fall, shake;
      animation-duration: 15s, 4s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      left: 500px;
      top: -100px;
      animation-delay: 6s, 2s;
      font-size: 2rem;
      z-index: 6;
      filter: blur(0.5px);
  }
  
  .snowflake6 {
      animation-name: fall, shake;
      animation-duration: 12s, 5s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      left: 75px;
      top: -100px;
      animation-delay: 3.2s, 2s;
      font-size: 2rem;
      z-index: 6;
  }
  
  .snowflake7 {
      animation-name: fall, shake;
      animation-duration: 11s, 5s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      left: 650px;
      top: -100px;
      animation-delay: 7.2s, 1s;
      z-index: 7;
  }
  
  .snowflake8 {
      animation-name: fall, shake;
      animation-duration: 12s, 4s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      left: 820px;
      top: -100px;
      animation-delay: 4s, 2s;
      font-size: 2rem;
      z-index: 5;
      filter: blur(0.5px);
  }
  
  .snowflake9 {
      animation-name: fall, shake;
      animation-duration: 12s, 4s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      left: 170px;
      top: -100px;
      animation-delay: 5s, 2s;
      font-size: 2rem;
      z-index: 5;
      filter: blur(0.3px);
  }
  
  .snowflake10 {
      animation-name: fall, shake;
      animation-duration: 15s, 9s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      left: 350px;
      top: -100px;
      animation-delay: 2.7s, 2s;
      font-size: 3rem;
      z-index: 7;
  }
  
  .snowflake11 {
      animation-name: fall, shake;
      animation-duration: 12s, 7s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      right: 400px;
      top: -100px;
      animation-delay: 0.5s, 2s;
      font-size: 3rem;
      z-index: 7;
  }
  
  .snowflake12 {
      /*small*/
      animation-name: fall, shake;
      animation-duration: 12s, 5s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      left: 470px;
      top: -100px;
      animation-delay: 5s, 2s;
      z-index: 7;
      filter: blur(0.9px);
  }
  
  .snowflake13 {
      /*small*/
      animation-name: fall, shake;
      animation-duration: 10s, 5s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      right: 220px;
      top: -100px;
      animation-delay: 1s, 2s;
      z-index: 7;
      filter: blur(0.6px);
  }
  
  .snowflake14 {
      /*small*/
      animation-name: fall, shake;
      animation-duration: 9s, 4s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      position: absolute;
      right: 140px;
      top: -100px;
      animation-delay: 2s, 2s;
      z-index: 7;
      filter: blur(0.5px);
  }
  
  @keyframes fall {
      0% {
          top: -10%;
      }
  
      100% {
          top: 100%;
      }
  }
  
  @keyframes shake {
      0% {
          transform: translatex(0);
      }
      50% {
          transform: translatex(50px);
      }
      100% {
          transform: translatex(0);
      }
  }