/* Navbar */
.main-navbar{
    max-height: 200px;
}

.navbar{
    display: grid;
    grid-template-columns: 1fr;
}

.navbar h1, .navbar ul, .navbar .logo-container{
    justify-self: center;
}

.navbar h1{
    margin: 10px 0 3px 0;
}

.navbar ul{
    margin-bottom: 10px; 
}

.navbar .logo-container{
    padding: 10px;
}

/* Main Content */
.recent-section{
    height: 100vh;
}

/* Aricles */
.articles{
    display: grid;
    margin: auto;
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem;
}

.articles .first-article{
    grid-template-columns: 1fr;
    grid-column: 1 ;
}

  .articles .seventh-article{
    grid-template-columns: 1fr;
    grid-column: 1 ;
}



@media only screen and (max-width: 600px){
    /* Main Content */
    .recent-section{
       display: block;
       height: 40vh; 
       padding-top: 20px;
}

    /* Aricles */
    .articles{
    display: grid;
    grid-template-columns: 1fr;
}
    .articles .sixth-article{
    background: url('./img/datasience.jpg') no-repeat center center/cover;
    height: 100px;
}
 
/* Footer */
.main-footer{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 20px;
}  

.footer-logo{
    padding: 15px;
}

.main-footer > *{
    border-bottom: #333 dotted 1px;
    padding-bottom: 20px; 
}

.main-footer div:nth-child(2){
    padding-left: 10px;
}


/* About Page */
.about-main{
    grid-template-columns: 1fr;
    gap: 2rem;
    height: 100%;
}


.about-section{
    margin: 0 10px;
}

.about-aside{
    margin: 0 10px;
}


.about-aside{
    display: grid;
    grid-template-columns: 1fr;
    gap:2rem;
}

.about-main .about-aside div:nth-child(2){
    margin-top: 0;
    padding: 0;
}

.reg-form{
    width: 90%;
}

}

@media only screen and (max-width: 350px){
    .about-aside{
        display: grid;
        grid-template-columns: 1fr;
        gap:2rem;
    }

    .reg-form h2{
        margin-top: 30px;
        margin-bottom: 50px;
    }
}