body{
    font-family:verdana;
}

#description{
    background:linear-gradient(to bottom, #242B7B, #48247B, #74247B);
    width:800px;
    margin:auto;
    color:rgb(237, 245, 243);
    border-radius:20px;
    padding:20px;
    font-size:1.2em;
}

#description h2, #description p{
    margin:0px;
}

#conteneur{
    margin:auto;
    margin-top:20px;
    width:800px;
    padding:20px;
    background-color:#f0f1ff;
    border-radius:20px;
    text-align:center;
}

.row{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    margin:auto;
    gap:10px;
    align-items:center;
    margin:5px 0px 5px 0px;
}

#grenouille{
    border:black solid 5px;
    border-radius: 10px;
}

.besoin{
    border:black solid 3px;
    border-radius:5px;
    width:120px;
    text-align:left;
    padding:5px;
    background-color:white;
    overflow:hidden;
}

#satiete,#hydratation,#energie{
    width:120px;
    height:10px;
    margin-top:5px;
}

#satiete{
    background-color:limegreen;
}

#hydratation{
    background-color:deepskyblue;
}

#energie{
    background-color:gold;
}

#nourrir,#abreuver,#dormir{
    background-color:white;
    border:black solid 3px;
    border-radius:15px;
    padding:5px;
}

.action{
    vertical-align: middle;
}