.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li {
    margin-bottom: 0.5em;
}

.menu-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 0 0;
    font-size: 1em;
    cursor: pointer;
    color: var(--background);
    font-weight: bold;
}

.menu-btn:focus {
    outline: 2px solid var(--green);
    padding: 0.2em;
    border-radius: 5px;
}

.submenu {
    list-style: none;
    margin: 0;
    padding-left: 1em;
    overflow: hidden;
    height: 0;
    opacity: 1;
    transition: height 0.6s ease;
}

.submenu.animating {
    transition: height 0.6s ease;
}

.submenu li{
    padding: 0.5em 0;
}

.submenu a {
    display: block;
    padding: 0.5em;
    width: 12em;
}


/* Hamburger Menu -> https://www.youtube.com/watch?v=dAIVbLrAb_U */
.hamburger-menu{
    --x-width: calc(var(--hamburger-height) * 1.41421356237); /* sq root of 2 */    
    display: flex;
    flex-direction:column;
    gap: var(--hamburger-gap);
    width: max-content;
    position: absolute;
    top: var(--hamburger-margin);
    left: var(--hamburger-margin);
    z-index: 999;
    cursor: pointer;
}

.hamburger-menu:has(input:checked){
    --foreground: white;
    --background: #333;
}

/* accessibility - check using tab */
.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible{
    border: 1px solid var(--background);
    box-shadow: 0 0 0 1px var(--foreground);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input{
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background: var(--background);
    border-radius: 9999px;
    transition:  width var(--animation-timing), rotate var(--animation-timing), opacity var(--animation-timing), translate var(--animation-timing), ; /*background-color var(--animation-timing)*/
    transform-origin: left center;
}

.hamburger-menu input{
    appearance: none;
    padding:0;
    margin:0;
    outline: none;
    pointer-events: none;
}

.hamburger-menu:has(input:checked)::before{
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2);
    background: var(--foreground);
}

.hamburger-menu:has(input:checked)::after{
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2);
    background: var(--foreground);
}

.hamburger-menu input:checked {
    opacity: 0;
    width: 0;
}

.sidebar{   
    transition: translate var(--animation-timing);
    translate: -100%;
    padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
    background: var(--gradient);
    color: var(--background);
    max-width: 17em;
    min-height: 100vh;
    z-index: 888;
    position: relative;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    border-bottom-right-radius: 15px;
}

.sidebar li{
    list-style: none;
    width: 17em;
    padding: 1em;
    border-bottom: #e1ffe4 1px solid;
}

.sidebar li:first-child{
    border-top: #e1ffe4 1px solid;
}

.sidebar li a{
    color: #ffffff;
    text-decoration: none;
}

.sidebar li a:hover{
    text-decoration: underline;
}

.sidebar .material-symbols-outlined, .header_right .material-symbols-outlined{
    font-size: 1em;
}

.hamburger-menu:has(input:checked) + .sidebar{
    translate: 0;
}