:root {
    --fetch-trigger-height: 160vh;
    --black: hsl(0, 0%, 11%);
}

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



html {
    height: 100%;
    }






/* MOBILE de 0px jusqu'à 768px */

.img1 {
    width: 100%
    

}

body {
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: grey;
    text-decoration: none;
}
a:hover {
    color: black;
}

a img {
    border: 1px solid transparent;
}
a:hover img {
    border: 1px solid black;
}
header {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 60px;
}

/* Infinite Scroll */
.is-on {
    position: relative !important;
    transition: all .5s ease;
} 

.is-on::before {
    content: "";
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.is-on::after {
    content: "";
    display: inline-block;
    background-image: url("../img/giphy.gif");
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 150px;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}

#end-message {
    text-align: center;
}

/* MAIN */
main article {
    text-align: center;
    margin: 40px;
    min-height: 600px;
    position: relative;
}
main article img {
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    margin: auto;
}


.form-contact {
    margin: 0 20px;
}
.form-group {
    margin-bottom: 10px;
}
.form-group label {
    display: block;
}
.form-group textarea {
    width: 100%;
}
.bouton_submit {
    padding: 5px 10px;
    display: block;
    cursor: pointer;
}

/* media queries */

/* TABLETTE PORTRAIT de 350px jusqu'à 768px */
@media screen and (min-width:350px){
    .form-group textarea {
        width: 100%;
    }
}
/* TABLETTE PAYSAGE de 769px jusqu'à 1200px */
@media screen and (min-width:769px){
    .form-group textarea {
        width: 350px;
    }
    main article {
        min-height: 769px;
    }
}

/* ORDINATEUR de 1201px jusqu'à l'infini */
@media screen and (min-width:1201px){
    main article img {
       /* width: 1200px; */
    }
    .form-group textarea {
        width: 500px;
    }
}

