@media screen and (max-width:1225px) {
    .game-type{column-gap: 45px}
}


@media screen and (max-width:1000px) {
    .game-type{column-gap: 20px;}
    .game-info{
        flex: 0 1 180px;
    }
}


@media screen and (max-width:900px) {
    .nav-container {
    display: flex;
    }

    .site-nav {
        display: flex;
        flex: 3;
    }

    .user-nav {
        display: flex;
        flex: 1;
    }

}


@media screen and (max-width:850px) {
    .game-type{column-gap: 12px;}
    .game-info{
        flex: 0 1 160px;
    }
}





@media screen and (max-width:750px) {
    .nav-container{
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }

    .nav-container>ul{
        gap: 1px;
        display: none;
    }

    .site-nav, .user-nav{flex-direction: column;}

    .nav-container a{
        width: 180px;
        text-align: center;
        margin: 4px;
    }    

    .nav-container>ul.active{display: flex;}

    .toggleBtn{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 4px 0;
        width: 100px;
        height: 35px;
    }

    .header-section{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .info-container.logo-div{
        width: 20%;
        height: clamp(4.5rem, 4vh, 4rem);
        margin-top: 6px;
    }

    .info-container.web-info{
        margin-top: 10px;
        width: 80%;
        height: clamp(3rem, 4vh, 4rem);
    }

    .web-info>p{
        margin-top: 2px;
        font-size: clamp(0.6rem, 1vw, 1rem);
    }

    .info-container.search-container{
        margin: 12px 8px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: clamp(1.5rem, 3vh, 3rem);
    }

    .search-container label {
        display: none;
        font-size: clamp(0.8rem, 1.2vw, 1.2rem);
    }


    .search-container input {
    width: clamp(1rem, 80vw, 20rem);
    padding: 2px 8px;
    font-size: 0.8rem;
    }

    .results-container {
        top: 86.5%;
        left: 2%;
        width: 95.5%;
    }

    .user-nav{
    margin-bottom: 10px;        
    } 




/* Resoponding Word Meanings Middle and Right Section */
    .word-show-container{
        flex-direction: column;
    }

    .current-and-next{
        flex-direction: row;
        justify-content: center;
    }


    .current-status{
        width: 30%;
    }

    .next-actions {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .action-btn-container{
        display: flex;
        justify-content: center;
    }

    .action-btn{
        display: flex;
        height: 100%;
        margin: 2px;
        border: 1px solid black;
    }


    .game-type{column-gap: 30px;}
    .game-info{flex: 0 1 160px;}

}



@media screen and (max-width:600px) {
    .parent-div{
        padding-bottom: 20px;
    }

    .parent-div > p{
        padding: 0 10px;    
    }
    .parent-div > ul, .parent-div > ol{
        padding: 0 15px;    
    }

    .ask-dictionary-type,
    .word-show-container,
    .words-buttons-container,
    .day-word,
    .today-wrapper{
        width: 100%;
    }


    .middle-and-right-container{
        flex-direction: column;
    }

    .word-btn{
    font-size: 0.9rem;
    width: 140px;        
    }


    .game-type{
        column-gap: 20px;
        padding: 5px;
    }

    .game-info{flex: 0 1 140px}

    .game-type {

        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        gap: 20px;
        padding: 10px 20px;
        scroll-behavior: smooth;
        align-items: stretch;
        justify-content: flex-start;
        scrollbar-gutter: stable both-edges;
        overflow-y: hidden;
    }

    .game-type::-webkit-scrollbar {
        height: 8px;
    }

    .game-type::-webkit-scrollbar-track {
        background: #d1d5db; 
        border-radius: 10px;
    }

    .game-type::-webkit-scrollbar-thumb {
        background: #4f46e5;
        border-radius: 10px;
        border: 2px solid #d1d5db; 
    }

    .game-type::-webkit-scrollbar-thumb:hover {
        background: #3730a3;
    }

    .game-type {
        scrollbar-width: auto; 
        scrollbar-color: #4f46e5 #d1d5db;
    }

    .optionsGrid{
        flex-direction: column;
    }

    .optionsGrid > button {
        width: 95%;
    }

}