@media screen and (max-width: 768px) {

    header, footer {
        padding: .5rem;
    }
    
    /*********************************
        HEADER
    *********************************/

    .page-title {
        font-size: 26px;
    }
    

    /*********************************
        FOOTER
    *********************************/
    
    footer {
        padding: 0;
    }


    footer #mobile-settings--toggle-btn {
        width: 100%;
        padding: 1rem;

        display: flex;
        justify-content: center;
        align-items: center;
        
        color: var(--clr-light);
        background-color: var(--clr-primary);

        z-index: 10;
    }

    .settings--wrapper {
        position: fixed;
        left: 0; top: 100%;
        width: 100%; height: 100%;
        padding: 0 1rem 56px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;

        background-color: var(--clr-light);

        transition: top ease-in-out .3s;
    }

    .settings--wrapper.active {
        top: 0%;
    }


    .settings-inputs--outerWrapper, 
    #randomizer--btn,
    #sort--btn {
        width: clamp(250px, 100%, 400px);
    }

}


@media screen and (max-width: 790px) {
    #displayed-numbers--wrapper li {
        letter-spacing: 0;
    }
}