@media screen and (max-width: 769px) {
    #mobile-menu-btn > div {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 999999;
        backdrop-filter: blur(50px);
        padding: 5rem 2rem 2rem 2rem;
        color: #fff;
        animation: mobile-menu-slide-out 0.5s ease forwards;
        opacity: 0;
        overflow: hidden;
    }

    #mobile-menu-btn > div.show {
        animation: mobile-menu-slide-in 0.5s ease forwards;
    }
    #mobile-menu-btn > div.hide {
        animation: mobile-menu-slide-out 0.5s ease forwards;
    }

    #mobile-menu-btn > div .close-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        cursor: pointer;
        color: #fff;
    }

    #mobile-menu-btn > div .back-btn {
        position: absolute;
        top: 1rem;
        left: 1rem;
        cursor: pointer;
        color: #fff;
        visibility: hidden;
    }

    #mobile-menu-btn > div > div[id^="mobilemenu"] {
        position: absolute;
        width: calc(100% - 4rem);
        height: calc(100% - 6rem);
        top: 4rem;
        left: 2rem;
        animation: mobile-sub-menu-slide-out 0.5s ease forwards;
    }

    #mobile-menu-btn > div > div[id^="mobilemenu"].show {
        animation: mobile-sub-menu-slide-in 0.5s ease forwards;
    }

    body.no-scroll {
        overflow: hidden;
    }
}

@keyframes mobile-menu-slide-in {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes mobile-menu-slide-out {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}

@keyframes mobile-sub-menu-slide-in {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes mobile-sub-menu-slide-out {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}