:root:has(input[type="checkbox"]#nav-settings-menu:checked) {
    settings-area {
        opacity: 1;
        transition: opacity .3s, scale .3s, visibility .3s;
        visibility: visible;

        settings-model {
            scale: 1;
        }
    }
}

settings-area {
    /* inital state for animations */
    opacity: 0;
    transform-origin: center;
    transition: opacity .3s, scale .3s, visibility .3s;
    visibility: hidden;

    align-items: center;
    background: linear-gradient(#00000000, #121418);
    display: flex;
    inset: 0;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 3rem;
    z-index: 999;

    settings-model {
        background: var(--background);
        border-radius: .4rem;
        outline: .13rem solid var(--border);
        padding: .6rem;
        position: static;
        scale: .5;
        transition: .2s;
        width: 40rem;

        &:hover {
            outline-color: var(--accent);
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;

            settings-section {
                margin-right: auto;
            }
        }
    }

    @media screen and (max-width: 40rem) {
        settings-model {
            border-radius: 0;
        }
    }

    @media screen and (max-width: 28.8rem) {
        settings-model {
            margin-top: 5rem;
        }
    }
}