/*fait par Lucas Grossrieder le 13.01.*/

nav {
    /*je définit une couleur à mon menu de nav, espace mes liens et les aligne 
    tous sur une ligne commune */
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    background-color: rgb(117, 8, 8);
    padding: 30px;
}

.centre {
    /*j'utiliserai cette classe pour centrer mes deux titres*/
    display: flex;
    justify-content: center;
}

article {
    /*je fais en sorte que les objets de mes articles retournent à la ligne et s'empillent avec 
    column.Je leurs met une largeur qui s'adapte et qui ne dépasse pas 500px pour les grands écrans
    et leurs met une bordure arrondie et un peu de padding*/
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 30px;
    border: double black;
    border-radius: 20px;
    padding: 10px;
    gap: 1px;
    width: 100%;
    max-width: 500px;
    height: auto;
}



img {
    /*je fais en sorte que l'image adapte sa taille et se centre en fonction du container*/ 
    width: 100%;
    max-width: 500px;
    align-self: center;
    border: dotted grey 3px;
    border-radius: 10%;
}

main {
    /*je fait en sorte que mes éléments soit centré, en une seul ligne et légèrement espacés avec
     space around dans le main */
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    align-items: center;
}

aside {
    /*je replace correctement mon aside*/
    margin-right: 5%;
    margin-top: 3%;
    margin-bottom: 5%;
}

hr {
    /*j'augmente la taille de la ligne séparatrice*/
    width: 500px;
}



a, #selectionne {
    /*Je met une couleur, une bordure arrondie, et une couleur de texte à mes objets du nav*/
    padding: 1%;
    background-color: #ff6666;
    text-decoration: none;
    border: solid 1px #ffe6e6;
    border-radius: 10px;
    color: black;


}

a:hover {
    /*je crée un effet d'aggrandissement au moment où je passe ma souris sur un des liens et change
    leurs couleurs (texte, background et bordure)*/
    background-color: #990000;
    color: white;
    border: white;
    border: solid;
        transform: scale(1.1);
 
}

body {
    /*je met une couleur au fond de ma page*/
    background-color: #ffe6e6
}

footer {
    /*Je met le footer en rouge en bas de la page et centre ses objet comme l'heure*/
    display: flex;
    align-self: flex-end;
    background-color: #990000;
    justify-content: center;
    font-size: xx-large;
    color: white;
    margin-top: 5%;

}

.lien {
    /*je met de la couleur et une bordure à mes liens sous l'image*/
    background-color: pink;
    border: grey solid 3px;

}
/*je définit la police "Times New Roman et sans serif au cas où ça ne s'affiche pas"*/
h1 {
    font-family: 'Times New Roman', sans-serif
}

.long {
    /*j'empêche l'article de devenir trop large et lui fait s'aggrandir seulement en longueur*/
    height: auto;
    width: 20%;
    font-size: 20px;
}

.lien:hover {
    /*j'ajoute un agrandissement quand on passe au dessus des liens*/
    transform: scale(1.1);
}
/*dès que lécran est plus petit que 600 pixels je met les règles suivantes*/
@media (max-width : 600px) {
   

    nav {
        /*j'empile chaque élément de mon menu en créant un petit espace entre eux et les centre*/
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    a, #selectionne {
        /*je centre le texte de mes <a> , je les fait prendre toute la largeur et j'aggrandi 
        un peu leur bordure qui était trop petite*/
        border: #ffe6e6 2px solid;
        width: 100%;
        padding: 3%;
        text-align: center;
    }

    aside {
        /*je met tout le contenu de mon aside en colonne et centré
         pour fonctionner au format téléphone et lui fait prendre toute la place car
         je réduirais la taille de l'article et l'image plus tard*/
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        margin: auto;
    }

    body {
        flex-direction: column;
        align-items: center;
        margin: 0%;
    }

    .long {
        /*je laisse mon article long prendre plus de place sur la largeur pour éviter qu'il soit une 
        longue bande fine verticale*/
        width: 90%;
    }

    main {
        /*je met tout le contenu du main au centre en colonne pour pouvoir correspondre au format 
        téléphone*/
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    
   
       
    

    article,img {
        /*je m'assure de centrer le contenus des articles et j'adatpte les images automatiquement
        au container avec width et max-width et j'aligne les articles et images au centre*/
        align-self: center;
        justify-content: center;
        width: 100%;
        max-width: 325px;

    }

 
    .lien {
        /*je rétrécis mes liens qui prennent tout l'article de base avec transform*/
        transform: scale(0.8);
        /*permet au contenu de s'adapter pour qu'il prenene tout l'élement à cause du padding 
        qui le décentrait*/
        box-sizing: border-box; 

    }

    .lien:hover {
        /*les images ont un transform trop grand alors je l'adapte pour le téléphone*/
        transform: scale(1);
    }
    

    hr {
        width :50%
    }
}