/* style/snow.css */

.snowflakes {
    pointer-events: none;
}

.snowflake {
    position: fixed;
    top: -10%;
    z-index: 9999;
    color: #eaf6ff;
    font-size: 1.6em;
    font-family: Arial, sans-serif;
    text-shadow:
        0 0 2px rgba(0, 43, 72, 0.6),
        0 0 6px rgba(0, 43, 72, 0.35),
        1px 1px 1px rgba(0, 0, 0, 0.4);
    user-select: none;
    cursor: default;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running;
}

@keyframes snowflakes-fall {
    0%   { top: -10%; }
    100% { top: 100%; }
}

@keyframes snowflakes-shake {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(80px); }
    100% { transform: translateX(0); }
}

.snowflake:nth-of-type(1)  { left: 1%;  font-size: 1.3em; animation-duration: 8s, 3s;   animation-delay: 0s,    0s; }
.snowflake:nth-of-type(2)  { left: 6%;  font-size: 1.8em; animation-duration: 11s, 4s;  animation-delay: 1s,    1s; }
.snowflake:nth-of-type(3)  { left: 12%; font-size: 1.4em; animation-duration: 9s, 3.5s; animation-delay: 2s,    .5s; }
.snowflake:nth-of-type(4)  { left: 18%; font-size: 1.7em; animation-duration: 12s, 3s;  animation-delay: 3s,    2s; }
.snowflake:nth-of-type(5)  { left: 24%; font-size: 1.5em; animation-duration: 10s, 4s;  animation-delay: 0.5s,  2s; }
.snowflake:nth-of-type(6)  { left: 30%; font-size: 1.6em; animation-duration: 8s, 3.5s; animation-delay: 4s,    3s; }
.snowflake:nth-of-type(7)  { left: 37%; font-size: 1.3em; animation-duration: 13s, 4s;  animation-delay: 1.5s,  2s; }
.snowflake:nth-of-type(8)  { left: 44%; font-size: 1.8em; animation-duration: 9s, 3s;   animation-delay: 2.5s,  1s; }
.snowflake:nth-of-type(9)  { left: 51%; font-size: 1.4em; animation-duration: 11s, 3.5s;animation-delay: 0s,    0s; }
.snowflake:nth-of-type(10) { left: 58%; font-size: 1.6em; animation-duration: 10s, 4s;  animation-delay: 3s,    1.5s; }
.snowflake:nth-of-type(11) { left: 64%; font-size: 1.3em; animation-duration: 12s, 3s;  animation-delay: 1s,    2.5s; }
.snowflake:nth-of-type(12) { left: 70%; font-size: 1.7em; animation-duration: 8s, 3.5s; animation-delay: 4.5s,  1s; }
.snowflake:nth-of-type(13) { left: 76%; font-size: 1.5em; animation-duration: 9s, 4s;   animation-delay: 2s,    3s; }
.snowflake:nth-of-type(14) { left: 81%; font-size: 1.8em; animation-duration: 13s, 3s;  animation-delay: 0.5s,  0.5s; }
.snowflake:nth-of-type(15) { left: 86%; font-size: 1.4em; animation-duration: 10s, 3.5s;animation-delay: 3.5s,  2s; }
.snowflake:nth-of-type(16) { left: 91%; font-size: 1.6em; animation-duration: 11s, 4s;  animation-delay: 1.5s,  1s; }
.snowflake:nth-of-type(17) { left: 95%; font-size: 1.3em; animation-duration: 9s, 3s;   animation-delay: 2.5s,  0s; }
.snowflake:nth-of-type(18) { left: 4%;  font-size: 1.5em; animation-duration: 12s, 3.5s;animation-delay: 5s,    2.5s; }