/* ==========================================================
   MISSION CONTROL
   RESPONSIVE DESIGN
   ========================================================== */


/* ==========================================================
   LARGE LAPTOP
   ========================================================== */

@media (max-width: 1400px){

    #app{

        width:95%;

    }

    #hero{

        grid-template-columns:
            300px
            1fr
            300px;

        gap:25px;

    }

}


/* ==========================================================
   LAPTOP
   ========================================================== */

@media (max-width: 1200px){

    #hero{

        grid-template-columns:
            280px
            1fr
            280px;

        gap:20px;

    }

    #dashboard{

        grid-template-columns:1fr;

    }

    #statistics{

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

    }

    .skills-card,
    .timeline-card,
    .projects-card{

        min-height:auto;

    }

}


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

@media (max-width: 992px){

    #navbar{

        height:auto;

        grid-template-columns:1fr;

        gap:18px;

        padding:20px 0;

        text-align:center;

    }

    .nav-menu{

        flex-wrap:wrap;

        gap:18px;

    }

    .nav-status{

        justify-content:center;

    }

    #hero{

        grid-template-columns:1fr;

        gap:20px;

    }

    .scanner-card,
    .intro-card,
    .status-card{

        min-height:auto;

    }

    .scanner-placeholder{

        height:360px;

    }

    #dashboard{

        grid-template-columns:1fr;

    }

    .skills-grid{

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

    }

    .contact-grid{

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

    }

}


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

@media (max-width: 768px){

    body{

        font-size:15px;

    }

    #app{

        width:92%;

        margin:20px auto;

    }

    #navbar{

        margin-bottom:25px;

    }

    .nav-brand{

        font-size:21px;

    }

    .nav-menu{

        flex-direction:row;

        justify-content:center;

        gap:12px 18px;

    }

    .nav-menu a{

        font-size:13px;

    }

    #hero{

        grid-template-columns:1fr;

        gap:18px;

    }

    .intro-card h1{

        font-size:30px;

        line-height:1.2;

    }

    .intro-card h2{

        font-size:19px;

    }

    .hero-tech{

        gap:6px;

    }

    .hero-badge{

        font-size:11px;

        padding:6px 10px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:10px;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .scanner-placeholder{

        height:320px;

    }

    .scanner-frame{

        width:290px;

        height:290px;

    }

    .scanner-photo{

        width:205px;

        height:205px;

    }

    .hud-ring{

        width:245px;

        height:245px;

    }

    .ring-2{

        width:275px;

        height:275px;

    }

    #statistics{

        grid-template-columns:1fr;

        gap:15px;

    }

    .stat-card{

        min-height:110px;

    }

    .skills-grid{

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

        gap:12px;

    }

    .skill-item{

        height:105px;

    }

    .mission-item{

        grid-template-columns:58px 1fr;

        column-gap:14px;

    }

    .timeline-track{

        left:28px;

    }

    .timeline-node{

        width:56px;

        height:56px;

    }

    .company-logo{

        width:44px;

        height:44px;

        font-size:11px;

    }

    .mission-status{

        grid-column:2;

        justify-self:start;

        margin-top:-8px;

    }

    .mission-content h3{

        font-size:16px;

    }

    .mission-card{

        padding:18px;

    }

    .contact-header{

        flex-direction:column;

        gap:18px;

    }

    .contact-status{

        align-self:flex-start;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .contact-footer{

        flex-direction:column;

        gap:8px;

    }

}


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

@media (max-width: 480px){

    #app{

        width:94%;

    }

    .card{

        padding:18px;

    }

    .nav-brand{

        font-size:18px;

    }

    .nav-menu{

        gap:10px 14px;

    }

    .nav-menu a{

        font-size:12px;

    }

    .intro-card h1{

        font-size:26px;

    }

    .intro-card h2{

        font-size:17px;

    }

    .scanner-placeholder{

        height:285px;

    }

    .scanner-frame{

        width:255px;

        height:255px;

    }

    .scanner-photo{

        width:180px;

        height:180px;

    }

    .hud-ring{

        width:215px;

        height:215px;

    }

    .ring-2{

        width:240px;

        height:240px;

    }

    .skills-grid{

        grid-template-columns:1fr 1fr;

    }

    .skill-item{

        height:95px;

    }

    .skill-item i{

        font-size:30px;

    }

    .timeline-track{

        left:25px;

    }

    .timeline-node{

        width:50px;

        height:50px;

    }

    .company-logo{

        width:38px;

        height:38px;

        font-size:10px;

    }

    .mission-item{

        grid-template-columns:52px 1fr;

        column-gap:12px;

    }

    .mission-content h3{

        font-size:15px;

    }

    .mission-year{

        font-size:11px;

    }

    .mission-status{

        font-size:9px;

        padding:6px 10px;

    }

    .contact-card{

        padding:18px;

    }

    .contact-description{

        font-size:13px;

    }

    .contact-item{

        min-height:68px;

        padding:12px;

    }

    .contact-info strong{

        font-size:12px;

    }

}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media (max-width: 360px){

    .nav-menu{

        gap:8px 10px;

    }

    .nav-menu a{

        font-size:11px;

    }

    .scanner-frame{

        width:230px;

        height:230px;

    }

    .scanner-photo{

        width:165px;

        height:165px;

    }

    .hud-ring{

        width:195px;

        height:195px;

    }

    .ring-2{

        width:220px;

        height:220px;

    }

    .skills-grid{

        gap:8px;

    }

    .skill-item{

        height:90px;

    }

}