body{
    /*Définir l'image de fond */
    background-image: url(Pictures/p0.jpg);
    /*Cover pour que l'image couvre tout le body*/
    background-size: cover;
    /*Fixed pour fixer l'image, l'empêcher de défiler avec le contenu*/
    background-attachment: fixed;
}

header{
    text-align: center; 
    color: seashell;
    background-color: rgba(000, 000, 000, 0.5);
    /*Fixed pour fixer h1, l'empêcher de défiler avec le contenu*/
    position: fixed;
    width: 100%;
    /*Espacer les lettrs de h1*/
    letter-spacing: 2rem;
    /*Définir une bordure*/
    border: solid 0.5px black;
    /*Arrondir la bordure*/
    border-radius: 10px ;

}

.grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.d1,.d2,.d3,.d4,.d5,.d6,.d7,.d8,.d9,.d10,.d11,.d12{
    /*Disposer les div côte à côte*/
    display: inline-block;
    background-size: cover;
    height: 18rem; 
    width: 18rem;
    border-radius: 100%;
    margin: 50px 90px;
    text-align: center;
    /*Ne pas afficher tous les élements des div qui débordent*/
    overflow: hidden;
}

span{
    /*Positionner les spans par rapport à leurs élements parent*/
    position: relative;
    top: 18rem;
    color: snow;
    background-color: rgba(000, 000, 000, 0.5);
    /*Transitions*/
    transition: all;
    transition-duration: 1s;
}

.hover a:hover span{
    position: relative;
    top: 6rem;
    color: snow;
    background-color: rgba(000, 000, 000, 0.5);
}

.d{

    display: inline-block;
    margin: 0px 10px;
}

img{
    height: 6rem;
    width: 6rem;
}

p{
    color: snow;
}

.col-lg-12{
    text-align: center;
    color: snow;
    margin-top: 70px;
}

.col-lg-12 a{
    text-decoration: none;
    color: snow;
}

.col-lg-12 a:hover{
    text-decoration: none;
    color: snow;
}

.sec{
    text-align: center;
    margin-top: 30px;
}

.submit{
    font-family: cursive;
    text-align: center;
    color: snow;
    border: beige 1px solid;
    background-color: brown;
    height: 40px;
    width: 100px;
    border-radius: 10px;
    position: relative;
    top: -1px;
    left: -5px;
}

.input{
    background-color: rgba(000, 000, 000, 0.5);
    color: lavender;
    height: 40px;
    width: 300px;
    border-radius: 10px;
}



/*Définir les images en fond des div*/
.d1{background-image: url(Pictures/p1.jpg);}
.d2{background-image: url(Pictures/p2.jpg);}
.d3{background-image: url(Pictures/p3.jpg);}
.d4{background-image: url(Pictures/p4.jpg);}
.d5{background-image: url(Pictures/p5.jpg);}
.d6{background-image: url(Pictures/p6.jpg);}
.d7{background-image: url(Pictures/p7.jpg);}
.d8{background-image: url(Pictures/p8.jpg);}
.d9{background-image: url(Pictures/p9.jpg);}
.d10{background-image: url(Pictures/p10.jpg);}
.d11{background-image: url(Pictures/p11.jpg);}
.d12{background-image: url(Pictures/p12.jpg);}