#menu-icon{
    --bar-height: 0.3rem;
    --menu-icon-height: calc(var(--bar-height) * 3 + 1rem);
    --bar-offset: calc((var(--menu-icon-height) - var(--bar-height)) / 2);

    height: var(--menu-icon-height);
    width: min(var(--header-content-size), calc(var(--menu-icon-height)*2));

    margin-right: calc(var(--header-padding) + 3px);
    margin-left: auto;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

#bar1, #bar2, #bar3 {
    height: var(--bar-height);
    background-color: black;
    transition: 0.5s;
    transform-origin: center;
}

#bar2{
    width: 100%;
}

.menu-active{
    justify-content: center;
}

.menu-active #bar1{
    background-color: var(--maroon);
    transform: translateY(calc(var(--bar-offset))) rotate(45deg);
}

.menu-active #bar2{
    background-color: var(--maroon);
    transform: scaleX(0);
}

.menu-active #bar3{
    background-color: var(--maroon);
    transform: translateY(calc(var(--bar-offset) * -1))  rotate(-45deg);
}

#navbar-container{
    position: fixed;
    display: block;
    overflow: hidden;
    background-color: var(--white);
    
    /* these are updated in menu.js */
    width: 0%;
    height: 0dvh;
    
    z-index: 0; 
    right: 0;
    top: 0;
    
    transition: 0.3s;
}

#navbar-container ul{
    list-style-type: none;
    align-content: end;
    
    /* adjust based on the count of menu items */
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: var(--padding-sm);
}

#navbar-container li{
    list-style-type: none;
    width: 100%; 
    text-align: right; 
    transition: 0.3s;
}

#navbar-container a{
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    color: black;
}

#navbar-list{
    padding-top: calc(var(--header-size) *1.5);
    padding-right: calc(var(--padding-sm) *2);
    
}

.menu-active #navbar-container{
    width: 100%;
    height: 100dvh;
    z-index: 0;
}

#navbar-container li:hover{
    transform: scale(1.1, 1.1);
    transform-origin: right;
}

#navbar-container li.active{
    transform: scale(1.2, 1.2);
    transform-origin: right;
}

@media (min-width: 1000px){
    #navbar-container{
        overflow: visible;
        background-color: transparent;
        width: max(var(--menu-width), 20dvw);
        height: 100vh;
        z-index: -1;
        pointer-events: none; /*prevents scrolling conflicts*/
    }
    
    #navbar-container a {
        pointer-events: auto; /* Menu items remain interactive */
    }
    
    #navbar-container ul{
        height: 100vh;
        padding-top: calc(var(--header-content-size) * 2);
        padding-bottom: calc(var(--header-content-size) * 2);
        padding-left: 0;
    }

    #menu-icon{
        display: none;
    }
}