/* =======================================================
   RESPONSIVE.CSS
   DESKTOP / TABLET
======================================================= */

@media (max-width:1400px){

    :root{

        --container:1180px;

    }

}

/* =======================================================
   DESKTOP
======================================================= */

@media (max-width:1200px){

    .section{

        padding:100px 0;

    }

    .section-header{

        margin-bottom:60px;

    }

    .section-header h2{

        font-size:2.6rem;

    }

    .hero h1{

        font-size:4.8rem;

    }

    .hero h2{

        font-size:2rem;

    }

    .hero p{

        max-width:650px;

    }

    .about-grid{

        gap:60px;

    }

    .games-grid{

        gap:30px;

    }

    .game-card.featured{

        min-height:420px;

    }

    .game-card{

        min-height:330px;

    }

    .philosophy-grid{

        gap:20px;

    }

    .why-grid{

        gap:20px;

    }

    .join-wrapper{

        padding:60px;

        gap:50px;

    }

}

/* =======================================================
   TABLET
======================================================= */

@media (max-width:992px){

    /* ==========================
       HEADER
    ========================== */

    header .container{

        height:80px;

    }

    .logo span{

        display:none;

    }

    .discord-button{

        display:none;

    }

    #mobile-menu{

        display:block;

    }

    #navigation{

        position:fixed;

        top:80px;

        right:-100%;

        width:320px;

        height:calc(100vh - 80px);

        background:#050505;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:25px;

        padding:40px;

        border-left:1px solid var(--border);

        transition:.35s ease;

        z-index:9999;

    }

    #navigation.active{

        right:0;

    }

    /* ==========================
       HERO
    ========================== */

    .hero{

        min-height:auto;

        padding:140px 0 100px;

    }

    .hero-logo{

        width:150px;

    }

    .hero h1{

        font-size:4rem;

    }

    .hero h2{

        font-size:1.6rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons a{

        width:280px;

    }

    /* ==========================
       ABOUT
    ========================== */

    .about-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about-image{

        order:-1;

    }

    /* ==========================
       GAMES
    ========================== */

    .games-grid{

        grid-template-columns:1fr;

    }

    .game-card.featured{

        min-height:400px;

    }

    .game-card{

        min-height:340px;

    }

    /* ==========================
       PHILOSOPHY
    ========================== */

    .philosophy-grid{

        grid-template-columns:repeat(2,1fr);

    }

    /* ==========================
       WHY
    ========================== */

    .why-grid{

        grid-template-columns:repeat(2,1fr);

    }

    /* ==========================
       JOIN
    ========================== */

    .join-wrapper{

        grid-template-columns:1fr;

        text-align:center;

        padding:50px 35px;

    }

    .join-buttons{

        display:flex;

        justify-content:center;

    }

    .join-image{

        margin-top:20px;

    }

    .join-image img{

        max-width:220px;

    }

    /* ==========================
       FOOTER
    ========================== */

    .footer-grid{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;

    }

    .footer-brand{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .footer-brand p{

        max-width:100%;

    }

    .footer-links{

        align-items:center;

    }

    .footer-space{

        display:none;

    }

    .network-badge{

        width:180px;

    }

    .copyright{

        flex-direction:column;

        text-align:center;

    }

    .copyright-right{

        justify-content:center;

    }

}
/* =======================================================
   RESPONSIVE.CSS
   SMARTPHONE
======================================================= */

@media (max-width:768px){

    html{

        font-size:15px;

    }

    .section{

        padding:80px 0;

    }

    .container{

        width:92%;

    }

    /* ==========================
       HERO
    ========================== */

    .hero{

        padding:120px 0 80px;

    }

    .hero-logo{

        width:120px;

    }

    .hero-tag{

        font-size:.75rem;

        letter-spacing:2px;

    }

    .hero h1{

        font-size:3rem;

    }

    .hero h2{

        font-size:1.3rem;

    }

    .hero p{

        font-size:1rem;

        margin-bottom:35px;

    }

    .hero-buttons{

        gap:15px;

    }

    .hero-buttons a{

        width:100%;

        max-width:320px;

    }

    .scroll-indicator{

        display:none;

    }

    /* ==========================
       SECTION HEADER
    ========================== */

    .section-header{

        margin-bottom:50px;

    }

    .section-header h2{

        font-size:2rem;

    }

    /* ==========================
       ABOUT
    ========================== */

    .about-content{

        text-align:center;

    }

    .about-content .btn-primary{

        width:100%;

    }

    /* ==========================
       GAMES
    ========================== */

    .game-card.featured{

        min-height:340px;

    }

    .game-card{

        min-height:280px;

    }

    .game-overlay{

        padding:25px;

    }

    .game-overlay h3{

        font-size:1.35rem;

    }

    /* ==========================
       PHILOSOPHY
    ========================== */

    .philosophy-grid{

        grid-template-columns:1fr;

    }

    .philosophy-card{

        padding:35px 25px;

    }

    /* ==========================
       WHY
    ========================== */

    .why-grid{

        grid-template-columns:1fr;

    }

    .why-card{

        padding:35px 25px;

    }

    /* ==========================
       JOIN
    ========================== */

    .join-wrapper{

        padding:35px 25px;

    }

    .join-image img{

        max-width:180px;

    }

    .join-buttons .btn-primary{

        width:100%;

    }

    /* ==========================
       FOOTER
    ========================== */

    .footer-brand h3{

        font-size:1.4rem;

    }

    .footer-brand p{

        font-size:.95rem;

    }

    .network-badge{

        width:170px;

    }

    .copyright-left{

        font-size:.9rem;

    }

    .copyright-right{

        flex-wrap:wrap;

        gap:10px;

    }

    /* ==========================
       COOKIE
    ========================== */

    .cookie-wrapper{

        flex-direction:column;

        text-align:center;

    }

    .cookie-wrapper .btn-primary{

        width:100%;

    }

}


/* =======================================================
   SMALL SMARTPHONES
======================================================= */

@media (max-width:576px){

    html{

        font-size:14px;

    }

    .section{

        padding:70px 0;

    }

    .hero{

        padding-top:100px;

    }

    .hero-logo{

        width:90px;

    }

    .hero h1{

        font-size:2.3rem;

    }

    .hero h2{

        font-size:1.1rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .section-header h2{

        font-size:1.7rem;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        padding:15px;

    }

    .game-card.featured{

        min-height:300px;

    }

    .game-card{

        min-height:240px;

    }

    .game-overlay{

        padding:20px;

    }

    .game-overlay p{

        display:none;

    }

    .network-badge{

        width:150px;

    }

}


/* =======================================================
   EXTRA SMALL
======================================================= */

@media (max-width:400px){

    .hero h1{

        font-size:2rem;

    }

    .hero h2{

        font-size:1rem;

    }

    .section-header h2{

        font-size:1.5rem;

    }

    .logo img{

        width:48px;

    }

}


/* =======================================================
   LANDSCAPE
======================================================= */

@media (max-height:600px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding:120px 0 60px;

    }

    #navigation{

        overflow-y:auto;

    }

}


/* =======================================================
   TOUCH DEVICES
======================================================= */

@media (hover:none){

    .game-card:hover,
    .why-card:hover,
    .philosophy-card:hover{

        transform:none;

    }

    .game-card:hover img,
    .about-image:hover img{

        transform:none;

    }

}


/* =======================================================
   PRINT
======================================================= */

@media print{

    header,
    footer,
    #cookieBanner,
    #topButton{

        display:none !important;

    }

    body{

        background:#ffffff;

        color:#000000;

    }

}