/* MOBILE RESPONSIVE DESIGN */

@media screen and (max-width:768px){

.header{
    flex-direction:column;
    text-align:center;
    gap:15px;
}

.logo{
    font-size:24px;
}

.search{
    width:90%;
}


.menu{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.menu a{
    margin:5px;
}


.container{
    flex-direction:column;
    padding:10px;
}


.sidebar{
    width:auto;
    order:2;
}


.content{
    padding:20px;
}


.content h1{
    font-size:28px;
}


.article-card{
    padding:15px;
}


.footer{
    padding:20px 10px;
}


.footer a{
    display:block;
    margin:10px;
}

}