body {
    background-image: url('https://sitespectr.ru/test/sneg/img/snow.png'), 
                      url('https://sitespectr.ru/test/sneg/img/snow3.png'), 
                      url('https://sitespectr.ru/test/sneg/img/snow2.png');
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}

@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    30% {background-position: 150px 200px, 100px 100px, 100px 100px;}
    60% {background-position: 350px 600px, 250px 250px, 200px 200px;}    
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    30% {background-position: 150px 200px, 100px 100px, 100px 100px;}
    60% {background-position: 350px 600px, 250px 250px, 200px 200px;}    
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    30% {background-position: 150px 200px, 100px 100px, 100px 100px;}
    60% {background-position: 350px 600px, 250px 250px, 200px 200px;}    
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    30% {background-position: 150px 200px, 100px 100px, 100px 100px;}
    60% {background-position: 350px 600px, 250px 250px, 200px 200px;}    
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

.no-snow {
    background-image: none; /* Убираем фоновое изображение снега */
    animation: none;
}

#santa {
    display:none;
    height: 100px;
    width: 100px;
    position: absolute;
    transition: 0.5s ease-in-out; /* Увеличено время и изменена функция */
    z-index: 20;
}

#santa img {
    width: 80px;
    filter: drop-shadow(0 0 20px rgba(1, 1, 42, 0.2)); /* Исправлено на rgba для корректного использования */
}

.snowman {
    display:none;
    background: transparent url("img/snowman.png") no-repeat scroll right top / 140px auto;
    bottom: 0;
    display: block;
    height: 150px;
    position: fixed;
    right: 2%;
    width: 150px;
}
.snow-layer {
    display:none;
    background: transparent url("img/snow-layer.png") repeat-x scroll center top / auto 20px;
    bottom: 0;
    display: block;
    height: 20px;
    position: fixed;
    width: 100%;
    z-index: 1;
}
@media screen and (max-width: 1024px){
 .snowman, .snow-layer {display: none;}
}
.snow-cont
{
    position: absolute; 
    top: 80px; 
    /* left: 50%;  */
    /* width: 200px;  */
    /* transform: translateX(-50%);  */
    text-align: center;
    z-index:0;
}

.tree-cont {
    display: none; /* Скрываем элемент по умолчанию */
    position: fixed; /* Фиксируем элемент */
    left: 0; /* Прикрепляем к левому краю */
    bottom: 0; /* Прикрепляем к нижнему краю */
    /* Дополнительные стили для настройки внешнего вида */
    width: 100px; /* Ширина элемента */
    height: auto; /* Высота автоматически */
    padding: 10px; /* Отступы внутри элемента */
}

#tree {
    width: 80px;
    display: block;
    margin: 0 auto;
}
.st0 {
    fill:#332C28;
}
.st1 {
    fill:#0f690f;
}
.st2 {
    fill:#388f38;
}
.st3 {
    fill:#a60505;
}
.st4 {
    fill:#d90000;
}
.red-md {
    fill: #aa1231;
    animation: 0.6s red-flash ease-in-out infinite;
}
@keyframes red-flash {
    40% {
        fill: #ea385c;
    }
    80% {
        fill: #aa1231;
    }
}
.gold-lt {
    fill: #c1881c;
    animation: 0.6s gold-lt-flash ease-in-out infinite;
}
@keyframes gold-lt-flash {
    40% {
        fill: #e7b75c;
    }
    80% {
        fill: #c1881c;
    }
}
.blue-lt {
    fill: #1f3e64;
    animation: 0.6s blue-lt-flash ease-in-out infinite;
}
@keyframes blue-lt-flash {
    40% {
        fill: #386fb1;
    }
    80% {
        fill: #1f3e64;
    }
}
.blue-dk {
    fill: #0f1f2f;
    animation: 0.6s blue-dk-flash ease-in-out infinite;
}
@keyframes blue-dk-flash {
    40% {
        fill: #28527c;
    }
    80% {
        fill: #0f1f2f;
    }
}
.gold-dk {
    fill: #69512a;
    animation: 0.6s gold-dk-flash ease-in-out infinite;
}
@keyframes gold-dk-flash {
    40% {
        fill: #b28947;
    }
    80% {
        fill: #69512a;
    }
}
.g1 {
    animation-delay: 0s;
}
.g2 {
    animation-delay: 0.4s;
}
.g3 {
    animation-delay: 0.8s;
}