@charset "UTF-8";

#snowman {
    width: 4rem;
    left: auto;
    top: auto;
    right: 0;
    bottom: calc(var(--bs-navbar-padding-y) - 1rem);
}

#main-nav-snow {
    height: 2.5rem;
    background: url('../images/bg-menu-left.svg') no-repeat calc(var(--bs-gutter-x) / 2 - .2rem) 0,
                url('../images/bg-menu-right.svg') no-repeat calc(100% - (var(--bs-gutter-x) * .38)) 0.5rem,
                url('../images/bg-menu-snow.svg') repeat-x calc(var(--bs-gutter-x) * -1) 0;
    background-size: auto 2.5rem, auto 2rem, auto 2.5rem;
}

#main-nav a[href="/"]::after {
    content: url('../images/ny-logo-hat.svg');
    left: calc(var(--bs-gutter-x) * .67);
    top: 0;
    width: 2rem;
    position: absolute;
    height: auto;
}

#main-nav > div.col-auto.dropdown-center::before,
#main-nav > div.col-auto.dropdown-center::after  {
    content: '';
    display: block;
    position: absolute;
    top: auto;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

#main-nav > div.col-auto.dropdown-center::before {
    width: 9rem;
    height: 4rem;
    background-image: url('../images/bg-menu.svg');
    left: -5rem;
    bottom: -0.7rem;
}

#main-nav > div.col-auto.dropdown-center::after {
    right: -2.5rem;
    bottom: -1rem;
    width: 4rem;
    height: 3.7rem;
    background-image: url('../images/ded-moroz.svg');
    background-position:  50% 100%;
    animation-duration: 3s;
    animation-name: morozin;
}

#main-nav .dropdown-menu {
    --bs-dropdown-zindex: -2;
}

#header-garland {
    height: 3rem;
    background-repeat: repeat-x;
    background-size: contain;
    background-image: url('../images/bg-header.webp');
}

#main-header > a.home:first-of-type {
    animation: garland 20s infinite;
}


@keyframes morozin {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes garland {
    0% {
         background-image: linear-gradient(to bottom, rgba(var(--bs-danger-rgb), 0.45), transparent calc(100% - 0.688rem));
    }

    25% {
        background-image: linear-gradient(to bottom, rgba(var(--bs-light-rgb), 0.4), transparent calc(100% - 0.688rem));
    }
    50% {
        background-image: linear-gradient(to bottom, rgba(var(--bs-warning-rgb), 0.5), transparent calc(100% - 0.688rem));
    }

    75% {
        background-image: linear-gradient(to bottom, rgba(var(--bs-success-rgb), 0.8), transparent calc(100% - 0.688rem));
    }

    100% {
        background-image: linear-gradient(to bottom, rgba(var(--bs-info-rgb), 0.45), transparent calc(100% - 0.688rem));
    }
}