html, body{
    height: 100%;
}

.middler{
    height: 80%;
    background: rgb(0,106,179);
    background: -moz-linear-gradient(180deg, rgba(0,106,179,1) 0%, rgba(25,123,191,1) 29%, rgba(56,154,222,1) 64%, rgba(105,191,250,1) 87%);
    background: -webkit-linear-gradient(180deg, rgba(0,106,179,1) 0%, rgba(25,123,191,1) 29%, rgba(56,154,222,1) 64%, rgba(105,191,250,1) 87%);
    background: linear-gradient(180deg, rgba(0,106,179,1) 0%, rgba(25,123,191,1) 29%, rgba(56,154,222,1) 64%, rgba(105,191,250,1) 87%);
}

.small-middler{
    height: 10%;
    background: rgb(0,106,179);
    background: -moz-linear-gradient(180deg, rgba(0,106,179,1) 0%, rgba(25,123,191,1) 29%, rgba(56,154,222,1) 64%, rgba(105,191,250,1) 87%);
    background: -webkit-linear-gradient(180deg, rgba(0,106,179,1) 0%, rgba(25,123,191,1) 29%, rgba(56,154,222,1) 64%, rgba(105,191,250,1) 87%);
    background: linear-gradient(180deg, rgba(0,106,179,1) 0%, rgba(25,123,191,1) 29%, rgba(56,154,222,1) 64%, rgba(105,191,250,1) 87%);
}

.List{
    margin-left: 3em;
    margin-right: 3em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-top: 1em;
    padding-bottom: 3em;
}

.preview_article{
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}

.objet{
    text-align: left;
    max-width: 90%;
    white-space:nowrap;
    overflow:hidden;
}

.date{
    text-align: right;
}

.btnArticle{
    opacity: 0.5;
    height: 3em;
}

.btnArticle:hover{
    opacity: 1;
    height: 5em;
    transition: height 0.5s;
}

.spanarticle{
    text-align: center;
    position: relative;
    display: block;
    color: white;
    font-size: xx-large;
    font-style: oblique;
    font-family: sans-serif;
    margin-right: 1em;
}

footer{
    width: 100%;
    height: 10em;
    background-color: #232323;
    color: white;
}


.article{
    width: 100%;
    height: fit-content;
    min-height: 100%;
    padding: 3em;
    background: rgb(0,106,179);
    background: -moz-linear-gradient(180deg, rgba(0,106,179,1) 0%, rgba(25,123,191,1) 29%, rgba(56,154,222,1) 64%, rgba(105,191,250,1) 87%);
    background: -webkit-linear-gradient(180deg, rgba(0,106,179,1) 0%, rgba(25,123,191,1) 29%, rgba(56,154,222,1) 64%, rgba(105,191,250,1) 87%);
    background: linear-gradient(180deg, rgba(0,106,179,1) 0%, rgba(25,123,191,1) 29%, rgba(56,154,222,1) 64%, rgba(105,191,250,1) 87%);
}

.info{
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    font-size: xx-large;
    font-family: sans-serif;
}

.contenu{
    background-color: white;
    padding: 10px;

}

.divArticle{
    background-color: white;
}

.middlerTop{
    display: inline-flex;
    justify-content: center;
    width: 100%;
}


.switchPage{
    display: flex;
}

.command_article{
    display: flex;
}

#supprimer_article{
    background-color: red;
    color: white;
    opacity: 0.8;
}
#supprimer_article:hover{
    cursor: pointer;
    opacity: 1;
}

#modifier_article{
    background-color: #47d147;
    color: white;
    opacity: 0.8;
}
#modifier_article:hover{
    cursor: pointer;
    opacity: 1;
}

#btnlist{
    width: 100%;
}

.command_controlArticle{
    display: inline-flex;
}

.command_topArticle{
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
}