#logo_container {
    position: fixed;
    background: url("/src/img/logo/owl_logo.png");
    background-repeat: no-repeat;

    animation: shrink_logo_large forwards 1s linear; 
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
}

@media (width < 1400px) {
    #logo_container {
        animation: shrink_logo_medium forwards 1s linear; 
        animation-play-state: paused;
        animation-delay: calc(var(--scroll) * -1s);
    }
}

@media (width < 800px) {
    #logo_container {
        animation: shrink_logo_small forwards 1s linear; 
        animation-play-state: paused;
        animation-delay: calc(var(--scroll) * -1s);
    }
}

@keyframes shrink_logo_large {
    from {
        z-index: -1000;
        height: 40vw;
        width: 100vw;
        background-size: 40vw;
        background-position: center;
        margin-top: calc(var(--navbar-height) * 1px);
        padding-top: 5vw;
    }
    to {
        z-index: 1000;
        height: calc(var(--navbar-height) * 1px);
        width: calc(var(--navbar-height) * 1px);
        background-size: calc(var(--navbar-height) * 1px);
        background-position-x: left;
        margin-top: 0;
        padding-top: 0;
    }
}
@keyframes shrink_logo_medium {
    from {
        z-index: -1000;
        height: 70vw;
        width: 100vw;
        background-size: 70vw;
        background-position: center;
        margin-top: calc(var(--navbar-height) * 1px);
        padding-top: 5vw;
    }
    to {
        z-index: 1000;
        height: calc(var(--navbar-height) * 1px);
        width: calc(var(--navbar-height) * 1px);
        background-size: calc(var(--navbar-height) * 1px);
        background-position-x: left;
        margin-top: 0;
        padding-top: 0;
    }
}
@keyframes shrink_logo_small {
    from {
        z-index: -1000;
        height: 90vw;
        width: 100vw;
        background-size: 90vw;
        background-position: center;
        margin-top: calc(var(--navbar-height) * 1px);
        padding-top: 5vw;
    }
    to {
        z-index: 1000;
        height: calc(var(--navbar-height) * 0.3px);
        width: calc(var(--navbar-height) * 0.3px);
        background-size: calc(var(--navbar-height) * 0.3px);
        background-position-x: left;
        margin-top: 0;
        padding-top: 0;
    }
}