*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;


}

#grid{
    display: grid;
    grid-gap: 2%;
    grid-template-columns: repeat(3, 1fr) ;
    position: absolute ;
    max-width: 100% ;
    height: 100vh ;
    padding: 2%;
} 

#grid a{
    display: block;
    width: 100%;
    height: auto;
}

#grid a img{
    width: 100%;
    height: auto;
}

#header{
    padding-top: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

#header h1{
    padding-bottom: 5px;
}

body{
    color: rgb(25, 99, 56);
    background-color: rgb(231, 252, 210);
    font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}

#calathea{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 3;
    grid-column-end: auto;
    grid-row-start: 1;
    grid-row-end: auto;
    z-index: 99;
}

#calathea:hover{
    opacity: 0;
    transition: 1s;
    }

#texte-calathea{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 3;
    grid-column-end: auto;
    grid-row-start: 1;
    grid-row-end: auto;
    }

#crassula {
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 2;
    grid-column-end: auto;
    grid-row-start: 1;
    grid-row-end: auto;
    z-index: 99;
}

#crassula:hover{
    opacity: 0;
    transition: 1s;
    }

#texte-crassula{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 2;
    grid-column-end: auto;
    grid-row-start: 1;
    grid-row-end: auto;
}

#aloe{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 1;
    grid-column-end: auto;
    grid-row-start: 3;
    grid-row-end: auto;
    z-index: 99;
}

#aloe:hover{
opacity: 0;
transition: 1s;
}

#texte-aloe{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 1;
    grid-column-end: auto;
    grid-row-start: 3;
    grid-row-end: auto;
}

#plantes-1{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 1;
    grid-column-end: auto;
    grid-row-start: 1;
    grid-row-end: auto;
    z-index: 99;
}

#plantes-1:hover{
opacity: 0;
transition: 1s;
}

#texte-1{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 1;
    grid-column-end: auto;
    grid-row-start: 1;
    grid-row-end: auto;
}

#strelitzia{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 3;
    grid-column-end: auto;
    grid-row-start: 3;
    grid-row-end: auto;
    z-index: 99;
}

#strelitzia:hover{
opacity: 0;
transition: 1s;
}

#texte-strelitzia{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 3;
    grid-column-end: auto;
    grid-row-start: 3;
    grid-row-end: auto;
}

#philo{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 2;
    grid-column-end: auto;
    grid-row-start: 2;
    grid-row-end: auto;
    z-index: 99;
}

#philo:hover{
opacity: 0;
transition: 1s;
}

#texte-philo{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 2;
    grid-column-end: auto;
    grid-row-start: 2;
    grid-row-end: auto;
}

#monstera{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 1;
    grid-column-end: auto;
    grid-row-start: 2;
    grid-row-end: auto;
    z-index: 99;
}

#monstera:hover{
opacity: 0;
transition: 1s;
}

#texte-monstera{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 1;
    grid-column-end: auto;
    grid-row-start: 2;
    grid-row-end: auto;
}

#plantes-2{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 3;
    grid-column-end: auto;
    grid-row-start: 2;
    grid-row-end: auto;
    z-index: 99;
}

#plantes-2:hover{
opacity: 0;
transition: 1s;
}

#texte-2{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 3;
    grid-column-end: auto;
    grid-row-start: 2;
    grid-row-end: auto;
}

#plantes-3{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 2;
    grid-column-end: auto;
    grid-row-start: 3;
    grid-row-end: auto;
    z-index: 99;
}

#plantes-3:hover{
opacity: 0;
transition: 1s;
}

#texte-3{
    width: 100%;
    border: 2px solid rgb(110, 129, 90);
    grid-column-start: 2;
    grid-column-end: auto;
    grid-row-start: 3;
    grid-row-end: auto;
}

#pied{
    grid-column-start: 2;
    grid-column-end: auto;
    grid-row-start: 4;
    grid-row-end: auto; 
    padding-top: 2%;
    padding-bottom: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}
#pied a{
    grid-column-start: 2;
    grid-column-end: auto;
    grid-row-start: 4;
    grid-row-end: auto; 
    padding-top: 2%;
    padding-bottom: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

#rendu{
    grid-column-start: 3;
    grid-column-end: auto;
    grid-row-start: 5;
    grid-row-end: auto; 
    padding-top: 2%;
    padding-bottom: 3%;
    display: flex;
    flex-direction: column;
    text-align: right;
   /* align-items: center;
    justify-content: center;*/
}

#rendu a{
    grid-column-start: 3;
    grid-column-end: auto;
    grid-row-start: 5;
    grid-row-end: auto; 
    padding-top: 2%;
    padding-bottom: 3%;
    display: flex;
    flex-direction: column;
    text-align: right;
    /*align-items: center;
    justify-content: center;*/
}

/* À FAIRE :

Refaire images textes même couleur + images plantes avec noms /
Rajouter images de texte pour crassula et calathea /
Rajouter d'autres plantes /
Rajouter lien vers compte insta /
Rajouter page pour chaque plante /
Rajouter lien de chaque page sur chaque image /
Changer texte pages /
Trouver meilleure typo pour texte du header - 

*/