body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    background-color: rgb(45, 45, 45);
    color: white;
}

h1 {
    text-align: center;
}

.textcorpus {
    /* Définir cette classe me permet de créer une boîte par-dessus le fond de couleur de la page */
    background-color: aliceblue;
    color: black;
    width: 80%;
    margin: auto;
    padding: 1em;
    text-align: justify;
}

.couleurs {
    margin-top: 1em;
    text-align: center;
    font-size: 20px;
}

.button {
    /* Je stylise les boutons. Cela me fait des boutons stylés */
    padding: 16px;
    display: block;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    background-color: forestgreen;
    border: none;
    width: 200px;
    color: white;
    text-align: center;
    font-size: 16px;
}

.button:hover {
    /* Ceci me permet de changer la couleur des boutons lorsque la souris passe dessus */
    background-color: red;
    color: white;
    /* Le changement de curseur permet de mieux faire comprendre qu'il s'agit d'un bouton */
    cursor: pointer;
}

li {
    padding: 0.5em;
}

#intro {
    background-color: forestgreen;
    color: white;
    text-align: center;
    font-size: 20px;
    padding: 0.5em;
}


/* Les couleurs de base des noms de couleurs */

#rouge1 {
    margin-top: 2em;
    color: red;
}

#rouge2 {
    color: red;
}

#bleu1 {
    color: blue;
}

#bleu2 {
    color: blue;
}

#bleu3 {
    color: blue;
}

#bleu4 {
    color: blue;
}

#jaune1 {
    color: yellow;
}

#jaune2 {
    color: yellow;
}

#vert1 {
    color: green;
}

#vert2 {
    color: green;
}


/* Le bouton CSS */

#flyingcolors {
    padding: 16px;
    display: block;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    background-color: forestgreen;
    border: none;
    width: 120px;
    color: white;
    text-align: center;
    font-size: 16px;
    /* La transition, l'effet appliqué et sa durée d'exécution */
    transition: background-color 0.6s ease-out;
}


/* Son animation */

#flyingcolors:hover {
    background-color: red;
    cursor: pointer;
}

#pourallerplusloin {
    margin-top: 0em;
}

#footerlink {
    text-align: center;
    padding: 2em;
    color: aliceblue;
}

#impressum {
    font-size: 12px;
    text-align: right;
}