/* page créée par Arthur Toffel / 18-JANVIER-2024*/

/*le style de l'index est difféent de toutes les autres pages,elle a des points 
en comun avec la feuile commun, mais la page index n'a pas de barra de 
navigation, donc la feuille commun ne servirait à rien*/


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e7e7e7;
    margin-bottom: 75px;
    font-size: 105%;
}

/*Pour le header, j'ai mis un fond d'une autre couleur que le body et j'ai arondi les angles avec "border-radius"*/
header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 25px;
    font-size: 100%;
    border-radius: 7px;
}

main {
    margin: 35px auto;
    padding: 20px;
    background-color: #fff;
}

img {
    width: auto;
    margin: 20px;

}

a {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 7px;
}

/*Quand on passe sur le boutton du lien, il change de couleurs*/
a:hover {
    background-color: #999;
}

/*Pour le footer, j'ai mis un fond de la même couleur que le header et 
je l'ai fixé au bas de la page avec "position:fixed"*/
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 15px;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 17px;
    border-radius: 7px;
}

/*Pour que le texte et l'image soient centrés*/
div {
    text-align: center;
    display: flex;
    align-content: center;

}

/*Pour la version sur les plus petits écrans ou sur mobile, j'ai fait un mediaquerie qui 
s'appliquera si la largeur fait moins de 750px*/
@media screen and (max-width: 750px) {

    /*L'image s'enleve*/
    img {
        display: none;
    }

    /*La taille de la police du header et du footer soient de 10px*/
    header,
    footer {
        font-size: 10px;
    }

    /*Le padding du header soie de 10px*/
    header {
        padding: 10px;
    }

}