/* Menu */
#menu {
    height: 100%;
    width: 0;

    padding: 0;
    opacity: 0;

    background: var(--bg2);
    border-right: 1px solid var(--bg3);

    white-space: nowrap; /* Fixes text coming in too early then re-adjusting */

    z-index: 999;
    
    /* ADDED: width, padding, and opacity to the transition list */
    transition: margin-left 0.3s ease-in-out, 
                width 0.3s ease-in-out, 
                padding 0.3s ease-in-out, 
                opacity 0.3s ease-in-out;
}

/* The class JS will toggle */
#menu.slide-right {
    padding: 20px;
    opacity: 1;
    width: 20%;
}

/* Menu buttons */
#menuBtn {
    position: absolute;
    display: flex;
    /* margin: 10px 20px; */
    margin-left: 50px;
    z-index: 1000;
    
    /* ADDED: width, padding, and opacity to the transition list */
    transition: margin-left 0.3s ease-in-out, 
                width 0.3s ease-in-out, 
                padding 0.3s ease-in-out, 
                opacity 0.3s ease-in-out;
}
#menuBtn.slide-right {
    display: none;
}
#menuCloseBtn {
    margin: 10px 0;
    float: right;
    z-index: 1000;
}


/* Menu text styling */
#menu .header {
    background: var(--bg2);
    color: var(--text-muted);

    padding: 20px 20px;

    position: sticky;
    top: 0;
}
#menu li {
    color: var(--text-muted);
    padding: 2px;
}
#menu li a {
    padding: 1px 0; /*gap*/
    /* Placed here in order to not move the anchor */
    display: inline-block; /* Required for the transition to work */
    transition: transform 0.3s ease;
}
#menu li:hover a {
    transform: translateX(5px);
}

#menu a {
    color: var(--text-muted);
    text-decoration: none;
}
#menu a:hover {
    color: var(--text);
}

ul.no-anchor {
    list-style-type: none;
}

.menu-header {
    padding: 20px 0;
}

.menu-btns {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.m-btn {
    height: fit-content;
    width: 100%;
    padding: 12px 16px;

    background: var(--bg2);
    color: var(--text-muted);

    /* border: 1px solid var(--bg3); */
    border-radius: 5px;

    display: flex;
    flex-direction: row;
    align-items: center;

    transition: all 0.3s ease;
}
.m-btn-selected {
    color: var(--text) !important;
    background: var(--bg3);
}
.m-btn-hover:hover {
    color: var(--text);
    /* border: 1px solid var(--text); */
    transform: translateY(-2px);
}
.fit {
    width: fit-content;
}


.material-symbols-outlined {
    font-size: 30px; /* Adjust this value to your liking */

    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 30; /* Match the font size */
}
.small {
    font-size: 20px; /* Adjust this value to your liking */
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; /* Match the font size */
}


/* For Tablets and smaller laptops */
@media(max-width: 768px) {

}

/* For Mobile Phones */
@media(max-width: 574px) {
    #menu {
        position: absolute;
    }
    #menu.slide-right {
        height: 100%;
        width: 100vw;
    }

    #menu.slide-right ~ main {
        display: none;
    }
    #menu.slide-right ~ footer{
        display: none;
    }
}