@font-face {
    font-family: "OhioState";
    src: url("../fonts/ohio-state/ohio-state/Ohio-Collegiate.ttf");
}

:root {
    --nav-backdrop: blur(3px) brightness(50%);
    --nav-background: #00441a;
    --nav-border: 2px solid black;

    --nav-width: 300px;
    --nav-block-background: #007B2F;
    --nav-block-border: 2px solid #d3d3d3;
    --nav-block-border-hidden: 2px solid #007B2F;
    --nav-block-hover-background: #990000;

    --nav-font-color: #d3d3d3;
}

#magic-hamburger-nav {
    position: relative;
    /* top: 0; */
    /* left: calc(0px - var(--nav-width)); */
    /* z-index: 100; */
    /* width: 200vw; */
    /* animation: nav-slide-out 1s ease 0s 1 normal forwards; */
}
#navlist-wrapper {
    pointer-events: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: calc(0px - var(--nav-width));
    width: 200vw;
}
#navlist-wrapper ul {
    pointer-events: all;
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: var(--nav-width);
    height: 100vh;
    padding: 0;
    margin: 0;
    background-color: var(--nav-background);
    border-left: 10px;
    list-style-type: none;
    border-right: var(--nav-border);
}
#navlist-wrapper ul li a {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* padding: 10px; */
    padding-left: 10px;
    list-style-type: none;
    border-top: var(--nav-block-border-hidden);
    border-bottom: var(--nav-block-border);
    font-size: 40px;
    background-color: var(--nav-block-background);
    text-decoration: none;
    color: var(--nav-font-color);
    text-shadow: 0 0 10px black;
    box-shadow: 0 2px 5px black;
    font-family: "OhioState";
    transition: transform 0.4s, background-color 0.3s;
    /* text-align: center; */
}
#navlist-wrapper ul li a:hover {
    border-top: var(--nav-block-border);
    background-color: #990000 !important;
    transform: scale(102%, 101%) translate(2px, -1px);
    z-index: 200;
}

#hamburger-wrapper {
    display: block;
    position: relative;
    padding: 1px;
    background-color: #d3d3d3;
    min-height: 62px;
}

#magic-burger {
    position: fixed;
    /* top: 0; */
    z-index: 100;
    width: 40px;
    height: 40px;
    margin: 10px;
    transition: transform 0.3s;
    /* border: 1px solid black; */
}
#magic-burger:hover {
    transform: scale(120%);
}
#magic-burger .h-part {
    box-sizing: border-box;
    display: none;
    height: 25%;
    width: 100%;
    margin-bottom: 11%;
    border-radius: 15% / 50%;
    font-size: 0;
    box-shadow: 0px 0px 5px black, 2px 2px 2px black;
    /* border: 1px solid black; */
}
#magic-burger .h-bun {
    display: block;
    background-color: #ddcc99;
}
#magic-burger .h-patty {
    display: block;
    background-color: #552200;
}

.burger-slide-right {
    animation: burger-slide-right 0.5s cubic-bezier(.58,-0.21,.27,1.55) 0s 1 normal both;
}
.burger-slide-left {
    animation: burger-slide-left 0.5s cubic-bezier(.68,-0.55,.38,1.18) 0.1s 1 normal both;
}

.nav-opened {
    animation: nav-slide-out 0.5s ease-in-out 0.1s 1 normal forwards;
}
.nav-opened ul {
    animation: nav-shadow-show 0.5s linear 0s 1 normal both;
}

.nav-closed {
    animation: nav-slide-in 0.5s ease-in-out 0s 1 normal forwards;
}
.nav-closed ul {
    animation: nav-shadow-hide 0.5s linear 0s 1 normal both;
}

@keyframes nav-shadow-show {
    from {
        box-shadow: 0px 0 0px black;
    }
    to {
        box-shadow: 10px 0 10px black;
    }
}
@keyframes nav-shadow-hide {
    from {
        box-shadow: 10px 0 10px black;
    }
    to {
        box-shadow: 0px 0 0px black;
    }
}

@keyframes nav-slide-out {
    from {
        left: calc(0px - var(--nav-width));
        backdrop-filter: none;
    }
    
    to {
        left: 0;
        backdrop-filter: var(--nav-backdrop);
    }
}

@keyframes nav-slide-in {
    from {
        left: 0;
        backdrop-filter: var(--nav-backdrop);
    }

    to {
        left: calc(0px - var(--nav-width));
        backdrop-filter: none;
    }
}

@keyframes burger-slide-right {
    from {
        left: 0;
    }
    
    to {
        left: var(--nav-width);
    }
}

@keyframes burger-slide-left {
    from {
        left: var(--nav-width);
    }
    
    to {
        left: 0;
    }
}