.main-menu li a {
    padding:0;
}
.main-menu li a div {
    margin:0;
}
.main-menu li a span {
    transition:var(--transition);
    white-space: nowrap;
}
body#index:not(.scrolled) .menu-trigger summary > ::before , 
body#index:not(.scrolled) .menu-trigger summary > ::after , 
body#index:not(.scrolled) .menu-trigger summary > :where(span, div) > span {
    background:var(--color-white);
}
.main-menu li a span:last-of-type {
    opacity:0;
    position:absolute;
    top:50%;
    left:50%;
    translate:-50% -50%;
}
.main-menu li a:hover span:last-of-type {
    opacity:1;
}
.main-menu li a:hover span:first-of-type {
    opacity:0;
}

.main-menu .contact a {
    border:solid 1px var(--color-black);
    border-radius:100px;
    min-width:160px;
    text-align:center;
}
.main-menu .contact a:hover {
    background:var(--color-lightgray-60);
}

#nav-cover {
    background:var(--color-light-glass);
}


/* Media Query */
@media (width > 920px){
    body#index:not(.scrolled) .main-menu li a {
        color:var(--color-white);
    }
    body#index:not(.scrolled) .main-menu .contact a {
        border:solid 1px var(--color-white);
    }
}
@media (max-width : 920px){
    .main-menu {
        width:100vw;
        height:100vh;
    }
    .main-menu ul {
        padding:120px var(--padding) var(--padding) var(--padding);
        margin:0 auto;
        width:100%;
        max-width:200px;
        overflow:hidden;
    }
    .main-menu ul li {
        padding:20px 0;
        opacity:0;
        left:100vw;
    }

    .menu-trigger[open]:not(.close) .main-menu :is(li, p) {
        animation:main-menu-view 0.6s ease-out var(--menu-li-order) 1 forwards;
    }
    .menu-trigger[open].close .main-menu ul :is(li, p) {
        animation:main-menu-hide var(--transition) ease-out 0s 1 forwards;
    }

    @keyframes main-menu-view {
        0%{
            left:100vw;
            opacity: 0;
        }
        30%{
            left:20px;
            opacity: 1;
        }
        100%{
            left:0;
            opacity: 1;
        }
    }
    @keyframes main-menu-hide {
        0%{
            left:0;
            opacity: 1;
        }
        50%{
            left:20px;
            opacity: 1;
        }
        100%{
            left:100vw;
            opacity: 0;
        }
    }
}