#articlePage
{
    width: 100vw;
    display: flex;
    flex-direction: row;
}

.article
{
    width: 60vw;
}

.image-article
{
    height: 40vh;
    width: 45vw;
    overflow: hidden;
    object-fit: cover;
    margin-top: 10vh;
    margin-left: 15vw;
    margin-bottom: 10vh;
}

.articleTitle
{
    margin-left: 15vw;
    font-family: 'Roboto';
    font-weight: bolder;
    font-size: 4vh;
    margin-bottom: 6vh;
}

.articleGras
{
    margin-left: 15vw;
    font-family: 'Roboto';
    font-weight: bolder;
    font-size: 2vh;
    margin-bottom: 3vh;
}

.articleText
{
    margin-left: 15vw;
    font-family: 'Roboto';
    font-size: 1.8vh;
    max-width: 60vw;
    line-height: 3vh;
    margin-bottom: 3vh;
}

.finArticle
{
    margin-left: 15vw;
    font-family: 'Roboto';
    font-size: 1.8vh;
    max-width: 60vw;
    line-height: 3vh;
    margin-bottom: 10vh;
}

#lastArticles
{
    margin-top: 10vh;
    margin-left: 5vw;
}

.lastText
{
    font-family: 'Roboto';
    font-size: large;
    font-weight: bold;
    margin-bottom: 5vh;
}

.othersArticle
{
    font-family: 'Roboto';
    height: 8vh;
    width: 25vw;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: #696868b4 1px solid;
    color: rgb(5, 142, 196);
    transition: color ease 0.3s;
    text-decoration: none;
}

.othersArticle.first
{
    padding-top: 3vh;
}

.othersArticle.last
{
    border-bottom: none;
}

.othersArticle:hover
{
    color: rgb(7, 61, 131);
    cursor: pointer;
}