styles.css

/**************** Desktop view ****************/

html {
    max-width: 1200px;
    background-color: white;
}

.container {
    margin: 20px;
    border: 20px solid black;
}

.nav-container {
    display: flex;
    flex-direction: row;
    align-items: space-arround;
    border-bottom: 20px solid black;
    padding: 15px solid rgb(44,64,89);
    overflow: hidden;
}

.nav-container > div {
    display: flex;
    background-color: rgb(234,84,85);
    border: 20px solid rgb(44,64,89);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    align-items: center;
}

.ban-container {
    flex-direction: row;
}

.nav {
    flex: 3;
    overflow: hidden;
}

.logo, .social {
    flex: 1;
}

.banner {
    display: flex;
    font-weight: bold;
    font-size: 30px;
    padding: 10px;
    background-color: rgb(248,214,0);
    border: 20px solid rgb(242,139,4);
    overflow: hidden;

}

.content-container {
    display: flex;
    flex-direction: row;
    margin: 20px;
    border: 20px solid black;
}

.article-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-right: 20px solid black;
    width: 85%;
    overflow: hidden;
}

.articles {
    display: flex;
    flex-wrap: wrap;
}

.article {
    flex: 1 1 calc(50% - 60px);
    background-color: rgb(45,109,177);
    padding: 10px;
    border: 20px solid rgb(78,78,106);
}

.navegacion {
    background-color: rgb(90, 172, 213);
    padding: 10px;
    border: 20px solid rgb(78,78,106);
    width: 100%;
}

.pub-container {
    display: flex;
    flex-direction: column;
    background-color: rgb(239,62,81);
    width: 15%;
    padding: 10px;
}

.pub {
    background-color: rgb(248,214,0);
    border: 10px solid rgb(239,62,81);
    padding: 10px;
}

.pie {
    background-color: rgb(239, 230, 103);
    padding: 10px;
}

/**************** tablet device ****************/

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

    html {
        background-color: rgb(137, 137, 137);
        color: rgb(6, 66, 218);
    }
    
    .nav-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .ban-container {
        flex-direction: row;
    }

    .content-container {
        display: flex;
        flex-direction: column;
        border: 20px solid black;
    }

    .article-container {
        border-bottom: 20px solid black;
        width: 100%;
    }
    
    .article {
        flex: 1 1 calc(50% - 60px);
        background-color: rgb(45,109,177);
        padding: 10px;
        border: 20px solid rgb(78,78,106);
    }

    .articles {
        display: flex;
        flex-wrap: wrap;
    }
    
    .navegacion {
        background-color: rgb(90, 172, 213);
        padding: 10px;
        border: 20px solid rgb(78,78,106);
    }
    
    .pub-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
    }
}

/**************** mobile device ****************/

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

    html {
        background-color: rgb(46, 46, 46);
        color: rgb(206, 86, 186);
    }

    .nav-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .article-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        border-bottom: 20px solid black;
    }
    
    .articles {
        display: flex;
        flex-wrap: wrap;
    }
    
    .article {
        flex: 1 1 calc(50% - 6px);
        background-color: rgb(45,109,177);
        padding: 10px;
        border: 20px solid rgb(78,78,106);
    }
    
    .navegacion {
        background-color: rgb(113,163,196);
        padding: 10px;
        border: 20px solid rgb(78,78,106);
    }
}

/**************** Animation ****************/

@keyframes hoverAnimation {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.04);
        color: beige;
        background-color: rgb(239,39,147);
    }
}

.nav:hover, .logo:hover, .social:hover {
    animation: hoverAnimation 0.4s forwards;
}