/* ===========================================
   Responsive.css
   Mobile + Tablet Optimization
=========================================== */


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

@media (max-width:1100px){


.hero{

    grid-template-columns:1fr;

    text-align:center;

}


.hero-right{

    display:flex;

    justify-content:center;

}


.hero h1{

    font-size:58px;

}


.hero p{

    font-size:20px;

}


.buttons{

    justify-content:center;

}


nav{

    padding:20px 5%;

}


section{

    padding:90px 6%;

}


}


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

@media(max-width:800px){


nav ul{

    gap:20px;

}


nav a{

    font-size:14px;

}


.hero h1{

    font-size:48px;

}


section h2{

    font-size:36px;

}


.title-row{

    flex-direction:column;

    align-items:flex-start;

    gap:25px;

}


#search{

    width:100%;

}


#repoGrid{

    grid-template-columns:1fr;

}


.repo{

    padding:25px;

}


}


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

@media(max-width:600px){


body{

    overflow-x:hidden;

}


/* Navigation */

nav{

    flex-direction:column;

    gap:20px;

    padding:18px;

}


.logo{

    font-size:24px;

}


nav ul{

    width:100%;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}


/* Hero */


header{

    padding-top:150px;

}


.hero{

    gap:40px;

}


.hero h1{

    font-size:42px;

}


.hero p{

    font-size:18px;

}


.buttons{

    flex-direction:column;

    align-items:center;

}


.btn{

    width:220px;

    text-align:center;

}



/* Cards */

.glass,

.glass-card{

    padding:25px;

}


/* Skills */

.skill-grid{

    grid-template-columns:

    repeat(2,1fr);

}


.skill{

    padding:18px;

}


/* Sections */

section{

    padding:80px 5%;

}


section h2{

    font-size:32px;

}



/* Repository */

.repo h3{

    font-size:20px;

}


.repo .stats{

    flex-direction:column;

    gap:10px;

}



/* Footer */

footer{

    font-size:14px;

}


}


/* ==========================
   Very Small Screens
========================== */

@media(max-width:400px){


.hero h1{

    font-size:36px;

}


.skill-grid{

    grid-template-columns:1fr;

}


nav ul{

    display:none;

}


}