/* ==========================================================
   PSICOTIKA - TRAVIAN TOOLKIT
   RESPONSIVE
   Version 1.0
========================================================== */


/* ==========================================================
   LARGE TABLETS
========================================================== */

@media (max-width:1200px){

    .toolGrid{

        grid-template-columns:1fr;

    }

}


/* ==========================================================
   TABLETS
========================================================== */

@media (max-width:900px){

    .header{

        flex-direction:column;

        text-align:center;

        gap:25px;

        padding:30px;

    }

    .headerLeft h1{

        font-size:42px;

    }

    .headerRight{

        text-align:center;

    }

    .main{

        flex-direction:column;

    }

    .sidebar{

        width:100%;

        border-right:none;

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

        padding:20px;

    }

    .sidebar nav{

        display:grid;

        grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

        gap:12px;

    }

    .content{

        padding:25px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:700px){

    .header{

        padding:25px 20px;

    }

    .headerLeft h1{

        font-size:34px;

    }

    .headerRight h2{

        font-size:22px;

    }

    .content{

        padding:20px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .toolGrid{

        grid-template-columns:1fr;

    }

    .toolPanel{

        padding:20px;

    }

    .resultRow{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

    .toolButton{

        width:100%;

        text-align:center;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    body{

        font-size:15px;

    }

    .headerLeft h1{

        font-size:28px;

    }

    .sidebar nav{

        grid-template-columns:1fr;

    }

    .card{

        padding:20px;

    }

    .toolPanel{

        padding:18px;

    }

    .input,
    .select{

        font-size:16px;

    }

}