/* Liste / historique */
#histo {
    width: 80%;
    display: flex;
    flex-direction: column;
}

/* Chaque jour de la liste */
#histo .container {
    padding: 3% 0 3% 0;
    margin: 8% 0 1% 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 15px;
}

/* Date des jours */
#histo .container h4 {
    padding: 0 0 2% 5%;
    font-size: larger;
    width: 95%; 
}

/* Liste des éléments par jour */
#histo .container .histo1 {
    width: 90%;
    margin: 0 0 1% 5%;
    padding-top: 1%;
    border-top: 1px solid black;
}

/* Chaque élément d'une journée */
#histo .container p {
    text-align: justify;
    font-size: large;
    margin: 1% 0 5px 2%;
}

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

    .upper-container h2 {
        font-size: x-large;
    }

    .upper-container p {
        font-size: large;
    }

    #histo {
        width:85%;
    }

    #histo .container h4 {
        font-size: large;
    }

    #histo .container p {
        font-size: medium;
    }
}

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

    .upper-container h2 {
        font-size: large;
    }

    .upper-container p {
        font-size: medium;
    }

    #histo {
        width:90%;
    }

    #histo .container h4 {
        font-size: medium;
    }

    #histo .container p {
        font-size: smaller;
    }
}

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

    .upper-container h2 {
        font-size: medium;
    }

    .upper-container p {
        font-size: small;
    }

    #histo .container h4 {
        font-size: smaller;
    }

    #histo .container p {
        font-size: small;
    }
}