:root {
    --holiday-snow-opacity: 0.7;
    --holiday-snow-secondary-opacity: 0.45;
}

body.layout-main,
body.layout-auth {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

body.layout-main header,
body.layout-main .main-content,
body.layout-auth .main-content,
body.layout-auth .auth-shell {
    position: relative;
    z-index: 1;
}

.holiday-snow-layer {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    opacity: var(--holiday-snow-opacity);
    mix-blend-mode: normal;
}

.holiday-snow-layer::before,
.holiday-snow-layer::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-repeat: repeat;
    opacity: 0.9;
    mix-blend-mode: normal;
}
    /* <div class="holiday-snow-layer" aria-hidden="true" data-darkreader-ignore></div> */


.holiday-snow-layer::before {
    background-image:
        radial-gradient(4px 4px at 20px 20px, rgba(255, 255, 255, 0.9) 50%, transparent 55%),
        radial-gradient(6px 6px at 130px 80px, rgba(255, 255, 255, 0.85) 50%, transparent 55%),
        radial-gradient(3px 3px at 50px 150px, rgba(255, 255, 255, 0.7) 50%, transparent 55%),
        radial-gradient(5px 5px at 180px 40px, rgba(255, 255, 255, 0.65) 50%, transparent 55%);
    background-size: 220px 220px;
    animation: holidaySnowFall 22s linear infinite;
}

.holiday-snow-layer::after {
    background-image:
        radial-gradient(3px 3px at 80px 60px, rgba(255, 255, 255, 0.85) 50%, transparent 55%),
        radial-gradient(4px 4px at 150px 20px, rgba(255, 255, 255, 0.8) 50%, transparent 55%),
        radial-gradient(5px 5px at 40px 120px, rgba(255, 255, 255, 0.6) 50%, transparent 55%),
        radial-gradient(4px 4px at 200px 200px, rgba(255, 255, 255, 0.75) 50%, transparent 55%);
    background-size: 260px 260px;
    opacity: var(--holiday-snow-secondary-opacity);
    animation: holidaySnowDrift 30s linear infinite;
}

@keyframes holidaySnowFall {
    0% {
        transform: translate3d(0, -10%, 0);
    }
    100% {
        transform: translate3d(-10%, 100%, 0);
    }
}

@keyframes holidaySnowDrift {
    0% {
        transform: translate3d(0, -20%, 0);
    }
    100% {
        transform: translate3d(10%, 100%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .holiday-snow-layer::before,
    .holiday-snow-layer::after {
        animation: none;
    }
}

.header-user .user-initial,
.sidebar-user-avatar,
.mobile-user-avatar {
    position: relative;
    overflow: visible;
}

.header-user .user-initial::after,
.mobile-user-avatar::after,
.sidebar-user-avatar::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    top: -17px;
    left: -5px;
    background-image: url('https://www.svgheart.com/wp-content/uploads/2021/11/santa-hat-christmas-free-svg-file-SvgHeart.Com.png');
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-12deg);
    transform-origin: center;
}

@media (max-width: 768px) {
    .header-user .user-initial::after,
    .sidebar-user-avatar::after {
        width: 28px;
        height: 20px;
        top: -16px;
        left: -6px;
    }
}

body.holiday-disabled .holiday-snow-layer {
    display: none !important;
}

body.holiday-disabled .header-user .user-initial::after,
body.holiday-disabled .mobile-user-avatar::after,
body.holiday-disabled .sidebar-user-avatar::after {
    display: none !important;
}