html{
    background-color: antiquewhite;
    line-height: 1.15;
    font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ;
}

header{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
}
main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}



/*  Début ex1  */
.ex1--js{
    display: block;
    background-color: #fff;
    padding: 1em;
}

.ex1--contenu{
    display: block;

}
#ex1--button{
    background-color: #4d90fe;
    border: 3px solid #4d90fe;
    color: #fff;
    border-radius: 4px;
    padding: .5em;
    cursor: pointer;
}
#ex1--button:hover{
    background-color: #fff;
    color: #4d90fe;
}

.ex1--ul{
    display: block;
    list-style-type: none;
    padding: 0;
}
.ex1--li{
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    padding: 1em;
    background: #fff;
}
.ex1--li:hover{
    background-color: rgb(221, 214, 214);
}
.unread{
    background-color: #eaf9ff;
}
.unread:hover{
    background-color: #def4fd;
}
.unread::before{
    content: "🆕";
    margin: 0 1em 0 0;
}

/*  Fin ex1  */

.title--h1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-left: 5em;
}


/*  Début ex2  */