#side_menu{
    position:fixed;
    right:0px;
    background-color:var(--surface_bg_color, whitesmoke);
    min-height:100vh;
    width:fit-content;
    display:flex;
    flex-direction:column;
    box-sizing: border-box;
    z-index: 99;
    position-anchor: --header_anchor;
    top: anchor(bottom);
    transform: translateX(100%);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.4s ease-in-out;
	box-shadow: 0px 2px 20px 7px rgb(0 0 0 / 70%);
    &.visible{
        transform: translateX(0);
        pointer-events: auto;
        opacity: 1;
    }
    @media (min-width: 1025px) {
        display: none !important;
        transform: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
  }
    .menu{
        display:flex;
        flex-direction:column;
        padding: 0px;
        box-sizing: border-box;
        gap:0px;
        .menu-item{
            padding: 12px;
            padding-inline: 24px;
            min-width:120px;
            a{
                font-family: 'Roboto';
                font-size: 1.7rem;
                font-weight: 400;
             }
        }
        .menu-item:hover{
            background-color:orange;
            cursor:pointer;
            a{
                font-family: 'Roboto';
                font-size: 1.7rem;
                font-weight: 400;
                color:white;
             }
        }
     }
    & > *{
        &::after{
            display:block;
            content:"";
            width:100%;
            height:1px;
            background-color:black;
            opacity:.6;
        }
    }

}