.bg-snowfall-animated > #logo-container::after {
    content: '';
    position: absolute;
    top: -17px; /* Adjust the position */
    left: 50%; /* Center horizontally */
    transform: translateX(-62px) rotate(-45deg); /* Adjust the rotation */
    width: 60px; /* Adjust to match hat size */
    height: 40px; /* Adjust to match hat size */
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PgoNPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+Cg08c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6I0VGMUQxRDtzdHJva2U6IzAwMDAwMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQoJLnN0MntmaWxsOiNDNjBEMDk7fQ0KCS5zdDN7b3BhY2l0eTowLjU7ZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQ0KCS5zdDR7ZmlsbDpub25lO3N0cm9rZTojMjMxRjIwO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Q1e29wYWNpdHk6MC41O2ZpbGw6I0IyQjFDRjt9DQoJLnN0NntvcGFjaXR5OjAuNTtmaWxsOm5vbmU7c3Ryb2tlOiNGNzkyOTI7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Q3e2ZpbGw6bm9uZTtzdHJva2U6IzFDMUMxQTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPgoNPGc+Cg08cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDYuOSw0MC41aC0yLjVIMjYuNkgyNGMtMi44LDAtNSwyLjItNSw1czIuMiw1LDUsNWgyLjZoMTcuOUg0N2MyLjgsMCw1LTIuMiw1LTUgICBDNTEuOSw0Mi43LDQ5LjcsNDAuNSw0Ni45LDQwLjV6Ii8+Cg08cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzIuNSwxNS41aC0xMGgtNnY2bDAsMGMzLjMsMCw2LDIuNyw2LDZ2NHY5aDI2di05bDAsMEM0OC41LDIyLjcsNDEuMywxNS41LDMyLjUsMTUuNXoiLz4KDTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0zMy41LDE2YzIuOSwwLjgsNS41LDIuMyw3LjYsNC40YzMsMi45LDQuOSw3LDQuOSwxMS42bDAsMHY4LjVoMi41di05bDAsMGMwLTQuMy0xLjctOC4yLTQuNC0xMS4xICAgQzQxLjMsMTcuOCwzNy42LDE2LjIsMzMuNSwxNnoiLz4KDTxsaW5lIGNsYXNzPSJzdDMiIHgxPSIyNS41IiB4Mj0iMjUuNSIgeTE9IjM1LjUiIHkyPSIzNy41Ii8+Cg08cGF0aCBjbGFzcz0ic3QzIiBkPSJNMjIuOSwyMS4xYzEuNiwxLjYsMi42LDMuOSwyLjYsNi40djQiLz4KDTxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik00NS41LDM1LjVjMCwxLjEtMC45LDItMiwyIi8+Cg08cGF0aCBjbGFzcz0ic3Q0IiBkPSJNMzIuNSwxNS41aC0xMGgtNnY2bDAsMGMzLjMsMCw2LDIuNyw2LDZ2NHY5aDI2di05bDAsMEM0OC41LDIyLjcsNDEuMywxNS41LDMyLjUsMTUuNXoiLz4KDTxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE1LjUiIGN5PSIxOC41IiByPSI1Ii8+Cg08cGF0aCBjbGFzcz0ic3Q1IiBkPSJNMTUuNSwxMy41Yy0wLjQsMC0wLjgsMC4xLTEuMywwLjJjMi4yLDAuNiwzLjgsMi41LDMuOCw0LjhzLTEuNiw0LjMtMy44LDQuOGMwLjQsMC4xLDAuOCwwLjIsMS4zLDAuMiAgIGMyLjgsMCw1LTIuMiw1LTVTMTguMywxMy41LDE1LjUsMTMuNXoiLz4KDTxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xMy41LDE4LjVjMC0xLjEsMC45LTIsMi0yIi8+Cg08Y2lyY2xlIGNsYXNzPSJzdDQiIGN4PSIxNS41IiBjeT0iMTguNSIgcj0iNSIvPgoNPHBhdGggY2xhc3M9InN0NSIgZD0iTTQ3LDQwLjVoLTIuNWMyLjgsMCw1LDIuMiw1LDVzLTIuMiw1LTUsNUg0N2MyLjgsMCw1LTIuMiw1LTVTNDkuOCw0MC41LDQ3LDQwLjV6Ii8+Cg08cGF0aCBjbGFzcz0ic3Q2IiBkPSJNNDksNDUuNWMwLDEuMS0wLjksMi0yLDIiLz4KDTxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0yMiw0NS41YzAtMS4xLDAuOS0yLDItMiIvPgoNPHBhdGggY2xhc3M9InN0NyIgZD0iTTQ2LjksNDAuNWgtMi41SDI2LjZIMjRjLTIuOCwwLTUsMi4yLTUsNXMyLjIsNSw1LDVoMi42aDE3LjlINDdjMi44LDAsNS0yLjIsNS01ICAgQzUxLjksNDIuNyw0OS43LDQwLjUsNDYuOSw0MC41eiIvPgoNPC9nPgoNPC9zdmc+'); /* Replace with full base64 string */
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; /* Ensure the hat doesn't interfere with interactions */
    z-index: 10; /* Ensures the hat is above the logo */
}

body.dark-mode-active .bg-snowfall-animated {
    background-repeat: repeat-x !important;
    background-position: top -10px center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='90' viewBox='0 0 600 90'%3E%3Cstyle%3E circle %7B opacity: 0; %7D circle:nth-child(1) %7B transform-origin: 45px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 88ms; animation-duration: 1800ms; %7D circle:nth-child(2) %7B transform-origin: 87px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 131ms; animation-duration: 2200ms; %7D circle:nth-child(3) %7B transform-origin: 128px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 92ms; animation-duration: 2400ms; %7D circle:nth-child(4) %7B transform-origin: 170px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 17ms; animation-duration: 2600ms; %7D circle:nth-child(5) %7B transform-origin: 213px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 122ms; animation-duration: 2300ms; %7D circle:nth-child(6) %7B transform-origin: 255px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 271ms; animation-duration: 2100ms; %7D circle:nth-child(7) %7B transform-origin: 297px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 131ms; animation-duration: 2500ms; %7D circle:nth-child(8) %7B transform-origin: 338px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 85ms; animation-duration: 2700ms; %7D circle:nth-child(9) %7B transform-origin: 380px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 128ms; animation-duration: 2000ms; %7D circle:nth-child(10) %7B transform-origin: 423px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 311ms; animation-duration: 2800ms; %7D circle:nth-child(11) %7B transform-origin: 465px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 108ms; animation-duration: 2400ms; %7D circle:nth-child(12) %7B transform-origin: 506px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 105ms; animation-duration: 2100ms; %7D circle:nth-child(13) %7B transform-origin: 549px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 149ms; animation-duration: 2300ms; %7D circle:nth-child(odd) %7B fill: %23FFFFFF; %7D circle:nth-child(even) %7B fill: %23D3D3D3; %7D circle:nth-child(4n) %7B animation-duration: 3000ms; fill: %23FFFFFF; %7D circle:nth-child(3n) %7B animation-duration: 2750ms; animation-delay: 700ms; %7D circle:nth-child(4n-7) %7B fill: %23E0E0E0; %7D circle:nth-child(6n) %7B fill: %23F0F0F0; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E %3Ccircle cx='42' cy='-10' r='4'/%3E %3Ccircle cx='84' cy='-10' r='5'/%3E %3Ccircle cx='126' cy='-13' r='3'/%3E %3Ccircle cx='168' cy='-13' r='6'/%3E %3Ccircle cx='210' cy='-10' r='5'/%3E %3Ccircle cx='252' cy='-13' r='4'/%3E %3Ccircle cx='294' cy='-10' r='6'/%3E %3Ccircle cx='336' cy='-13' r='5'/%3E %3Ccircle cx='378' cy='-13' r='4'/%3E %3Ccircle cx='420' cy='-10' r='3'/%3E %3Ccircle cx='462' cy='-10' r='5'/%3E %3Ccircle cx='504' cy='-13' r='4'/%3E %3Ccircle cx='546' cy='-10' r='6'/%3E %3C/svg%3E") !important;
}

body .bg-snowfall-animated {
    background-repeat: repeat-x !important;
    background-position: top -10px center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='90' viewBox='0 0 600 90'%3E%3Cstyle%3E circle %7B opacity: 0; %7D circle:nth-child(1) %7B transform-origin: 45px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 88ms; animation-duration: 1800ms; %7D circle:nth-child(2) %7B transform-origin: 87px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 131ms; animation-duration: 2200ms; %7D circle:nth-child(3) %7B transform-origin: 128px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 92ms; animation-duration: 2400ms; %7D circle:nth-child(4) %7B transform-origin: 170px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 17ms; animation-duration: 2600ms; %7D circle:nth-child(5) %7B transform-origin: 213px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 122ms; animation-duration: 2300ms; %7D circle:nth-child(6) %7B transform-origin: 255px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 271ms; animation-duration: 2100ms; %7D circle:nth-child(7) %7B transform-origin: 297px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 131ms; animation-duration: 2500ms; %7D circle:nth-child(8) %7B transform-origin: 338px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 85ms; animation-duration: 2700ms; %7D circle:nth-child(9) %7B transform-origin: 380px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 128ms; animation-duration: 2000ms; %7D circle:nth-child(10) %7B transform-origin: 423px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 311ms; animation-duration: 2800ms; %7D circle:nth-child(11) %7B transform-origin: 465px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 108ms; animation-duration: 2400ms; %7D circle:nth-child(12) %7B transform-origin: 506px 6px; animation: blast 2000ms infinite ease-out; animation-delay: 105ms; animation-duration: 2100ms; %7D circle:nth-child(13) %7B transform-origin: 549px 5px; animation: blast 2000ms infinite ease-out; animation-delay: 149ms; animation-duration: 2300ms; %7D circle:nth-child(odd) %7B fill: %23B0B0B0; %7D circle:nth-child(even) %7B fill: %23A0A0A0; %7D circle:nth-child(4n) %7B animation-duration: 3000ms; fill: %23B0B0B0; %7D circle:nth-child(3n) %7B animation-duration: 2750ms; animation-delay: 700ms; %7D circle:nth-child(4n-7) %7B fill: %23A0A0A0; %7D circle:nth-child(6n) %7B fill: %23D0D0D0; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E %3Ccircle cx='42' cy='-10' r='4'/%3E %3Ccircle cx='84' cy='-10' r='5'/%3E %3Ccircle cx='126' cy='-13' r='3'/%3E %3Ccircle cx='168' cy='-13' r='6'/%3E %3Ccircle cx='210' cy='-10' r='5'/%3E %3Ccircle cx='252' cy='-13' r='4'/%3E %3Ccircle cx='294' cy='-10' r='6'/%3E %3Ccircle cx='336' cy='-13' r='5'/%3E %3Ccircle cx='378' cy='-13' r='4'/%3E %3Ccircle cx='420' cy='-10' r='3'/%3E %3Ccircle cx='462' cy='-10' r='5'/%3E %3Ccircle cx='504' cy='-13' r='4'/%3E %3Ccircle cx='546' cy='-10' r='6'/%3E %3C/svg%3E") !important;
}