/* Global styles inluding mobile */
@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,500;0,800;1,500&display=swap');
@import url("variables.css");
@import url("std.css");
@import url("main.css");
@import url("index.css");
@import url("game-list.css");
@import url("about.css");
@import url("game.css");
@import url("contact.css");
@import url("create-account.css");
@import url("shopping-cart.css");
@import url("account.css");
@import url("animations.css");



@media (min-width: 650px){
    :root{
        font-size: 17px;
        }

    .hamb-menu-win{
        height: 515px;
    }
    
    #toggle-btn{        
        top: -36px;
        left: 72px;
    }

    .preview-list-item > a > img {
        margin: 10px;
        width: 130px;
        min-width: 130px;
    
    }

}

@media (min-width: 960px){
    
    body{        
        line-height: 1.2rem;
    }    

    /* navigation
    -----------------------*/
    #hamb-menu-label{
        display: none;
    }

    #site-title{
        display: none;
    }

    #nav-mobile{
        border: none;
    }

    .hamb-menu-win {
        animation-name: fade-in;
        animation-duration: 1s;
        display: block;
        top: -10px;
        width: 100%;
        height: 250px;
        border: none;
        background:var(--black) url("../images/background.png") repeat top center;
    }

    .hamb-menu-win .blur-logo-container {
        position: relative;
        width: 300px;
        height: 115px;
        left: 16px;
    }

    .hamb-menu-win .blur-logo-img {
        top: 65px;
        left: 81px;
        position: absolute;
        width: 180px;
        height: 114px;
        z-index: 2;
    }

    #search-shopping-cart{
        position: relative;
        top: 32px;
    }

    #utilities-desktop{
        position: absolute;
        top: 33px;
        right: 20px;
        width: 460px;
    }

    #utilities-desktop ul{        
        display: flex;
        justify-content: flex-end;
        margin-left: 0;
    }

    #utilities-desktop li{
        margin-left: 20px;
    }

    #main-nav-desktop{
        position: fixed;
        top: 170px;
        left: 0px;
        width: 100%;
        border-top: var(--gray) 2px solid;
        border-bottom: var(--gray) 2px solid;

    }

    #main-nav-desktop ul{        
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    #main-nav-desktop li{    
        padding: 10px 20px;
        border-right: var(--gray) 1px solid;
    }

    #main-nav-desktop li:last-child{
        border-right: none;
    }

    .mob-utilities a:hover{
        color: var(--orange);
        
    }

    /* index.html
    ------------------*/
    main {
        margin: 300px auto 0 auto;
    }

    .info-item{
        flex-basis: 40%;
    }

    .info-item p{
        height: 70px;
        margin-top: 10px;
    }

    .preview-list-item{
        flex-basis: 45%;
    }

    #social-payment-info{
        flex-direction: row;
        justify-content: space-around;
    }
       
    #social-payment-info div {
        margin: 0;    
    }

    #footer-links{
        flex-direction: row;
        justify-content: space-around;
    }

    /* game-*.html
    -----------------------*/
    .game-content{
        flex-direction: row;
    }

    .game-content > div:nth-child(1){
        order: 1;
    }

    .game-grid-item1{
        line-height: 1.4rem;
        vertical-align: middle;
    }

    .game-grid-item3{
        grid-column: 2;
    }

    /* game categories
    ---------------------*/
    ul .nav-selected {
        color: var(--orange);
    }

    .game-container{
        flex-direction: row;
        justify-content: center;
    }

    .game-container section:nth-child(1){
        text-align: left;
    }

    .game-container section:nth-child(2){
        flex-basis: 100%;
        margin-top: 19px;
    }

    #toggle-categories-label h2 {
        font-size: var(--font-size-nav-17);
        color: var(--gray);
        margin: 25px 0px 5px 25px;
    }

    #game-categories{
        width: 85%;
        padding-left: 20px;
    }

    #toggle-categories:checked ~ #game-categories{
        display: block; /* disable categories toggle */
    }

    /* contact.html
    ------------------*/
    .contact-container{
        width: 60%;
    }

    /* create-account.html
    ------------------------*/
    .utilities-desktop-account{
        width: 350px;
    }
    .black-container{
        margin-top: -400px;
        width: 65%;
    }

    .blur-logo-container-big{
        width: 600px;
        height: 230px;
    }

    .blur-logo-img-big {
        width: 400px;
        height: 254px;
        top: -286px;
    }

    .preview-container{
        width: 80%;
        margin-top:88px;
    }

    .black-main-content label{
        padding-bottom: 5px;;
    }

    /* shopping-cart.html
    ------------------------*/
    .shopping-cart-item-container{
        flex-direction: row;
    }

    /* .container-white .shopping-cart-item-container:nth-last-child(1){
        flex-direction: column;
    } */
    
/* 
    .shopping-cart-item-container > div:nth-child(2){
        flex-direction: row;
    } */

    #shopping-cart-amount{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    /* checkout.html
    -----------------------*/
    .main-content > form {
        padding: 0 30px;
        display: block;
        flex-basis: 60%;
    }

    #nav-mobile{ 
        opacity: 0.95;
    }

    #logo-container-checkout{
        width: 400px;
        margin: 0 auto;
        text-align: center;
        opacity: 0.95;
    }
    
    #logo-container-checkout .blur-logo-img{
        position: relative;
        top: -50px;
        left: 20px;
    }

    /* account*.html
    ---------------------*/
    .account-flex{
        flex-direction: row;
    }
    
    .a-black{
        font-size: 1.1rem;
    }

    .account-flex > section:nth-child(1){
        flex-basis: 30%;
        line-height: 1.4rem;
        padding: 13px 10px;
        text-align: left;
    }
    
    .account-flex > section:nth-child(2){
        flex-basis: 67%;
        line-height: 1.4rem;
    }

}

@media (min-width: 1980px){
    body, html{
        max-width: 1900px;   
        margin: 0 auto;
    }

}