/* ==========================================================
   MISSION CONTROL
   DASHBOARD LAYOUT
   ========================================================== */


/* ==========================================================
   NAVBAR
   ========================================================== */

#navbar{
    height:90px;

    display:grid;

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

    align-items:center;

    gap:30px;
}


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

#hero{
    display:grid;

    grid-template-columns:
        330px
        1fr
        340px;

    gap:35px;

    align-items:stretch;
}


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

.scanner-card,
.intro-card,
.status-card{
    min-height:520px;
}


/* ==========================================================
   STATISTICS
   ========================================================== */

#statistics{

    display:grid;

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

    gap:25px;
}


/* ==========================================================
   DASHBOARD
   ========================================================== */

#dashboard{

    display:grid;

    grid-template-columns:
        1.1fr
        .9fr
        1.2fr;

    gap:25px;

    align-items:start;
}


/* ==========================================================
   MAIN PANELS
   ========================================================== */

.skills-card{
    min-height:700px;
}

.timeline-card{
    min-height:700px;
}

.projects-card{
    min-height:700px;
}


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

#footer{

    margin-top:60px;

    padding:40px 0;
}


/* ==========================================================
   GRID HELPERS
   ========================================================== */

.two-column{

    display:grid;

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

    gap:20px;
}

.three-column{

    display:grid;

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

    gap:20px;
}

.four-column{

    display:grid;

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

    gap:20px;
}


/* ==========================================================
   FLEX HELPERS
   ========================================================== */

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;
}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.flex-column{

    display:flex;

    flex-direction:column;
}


/* ==========================================================
   COMMON SPACING
   ========================================================== */

.gap-10{
    gap:10px;
}

.gap-20{
    gap:20px;
}

.gap-30{
    gap:30px;
}

.mt-10{
    margin-top:10px;
}

.mt-20{
    margin-top:20px;
}

.mt-30{
    margin-top:30px;
}

.mt-40{
    margin-top:40px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1400px){

    #hero{

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

}

@media(max-width:1200px){

    #statistics{

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

    }

    #dashboard{

        grid-template-columns:1fr;

    }

}

@media(max-width:900px){

    #hero{

        grid-template-columns:1fr;

    }

#navbar{

    grid-template-columns:1fr;

    gap:20px;

    padding:20px;

}

}

@media(max-width:650px){

    #statistics{

        grid-template-columns:1fr;

    }

}