/* ==========================================
   DevTools Hub
   Responsive Styles
========================================== */

/* ===============================
   Large Tablets
================================ */

@media (max-width:1200px){

    .navbar{

        padding:0 25px;

    }

    .container{

        width:96%;

    }

}

/* ===============================
   Tablets
================================ */

@media (max-width:992px){

    .editor-grid{

        grid-template-columns:1fr;

    }

    .CodeMirror{

        height:500px;

    }

    .toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .left-actions,
    .right-actions{

        justify-content:center;

    }

}

/* ===============================
   Mobile
================================ */

@media (max-width:768px){

    .navbar{

        flex-direction:column;

        height:auto;

        padding:18px;

        gap:18px;

    }

    nav{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    .page-title{

        margin:40px 0 30px;

    }

    .page-title h1{

        font-size:38px;

    }

    .editor-header{

        padding:0 15px;

        font-size:15px;

    }

    .toolbar button{

        width:100%;

        justify-content:center;

    }

    .left-actions,
    .right-actions{

        width:100%;

        flex-direction:column;

    }

    .upload-card{

        padding:40px 20px;

    }

    .upload-card h3{

        font-size:20px;

    }

}

/* ===============================
   Small Mobile
================================ */

@media (max-width:480px){

    .logo{

        font-size:20px;

    }

    nav{

        flex-direction:column;

        align-items:center;

    }

    .page-title h1{

        font-size:32px;

    }

    .CodeMirror{

        height:380px;

        font-size:14px;

    }

    .footer-links{

        flex-direction:column;

        gap:16px;

    }

}