* {
    text-align : center;
    margin: 0;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
body{ scroll-behavior: smooth; }
hr{ border: none; }
#to-top img{ width: 50px; }


@media (min-width: 578px) {
    #t-hover{ display: none; }
    #to-top:hover #t-hover{ display: block; }
    #to-top:hover #t-normal{ display: none; }
    h2{
        margin: 50px;
        font-size: 55px;
        text-transform: uppercase;
    }
    h4{ color: rgb(167, 167, 167); font-size: 25px; }
    #notif{ padding-top: 5px; height: 30px; }
    #to-top{
        position: fixed;
        width: 50px;
        bottom: 100px;
        right: 50px;
        z-index: 100;
    }
    #hero {
        background-color: coral;
        height: 100vh;
        padding-bottom: 10%;
    }
    #hero h1{
        text-transform: uppercase;
        z-index: 100;
        top: 45%;
        left: 25%;
        position: absolute;
        color: white;
        font-size: 80px;
    }
    #hero h1 span{ color: coral; }
    #hero h3{
        z-index: 100;
        top: 57%;
        left: 34%;
        position: absolute;
        color: rgba(255, 255, 255, 0.89);
        font-size: 30px;
    }
    #hero video{
        mask-image: linear-gradient(rgba(255, 127, 80, 0.606),rgba(255, 127, 80, 0.606));
        min-height: 600px;
        width: 100%;
    }
    .b-compt{ 
        margin: 50px;
        display: flex;
        justify-content: center;
    }
    .b-compt a{
        border: solid coral 2px;
        border-radius: 20px;
        color: coral;
        margin: 20px;
        padding: 10px;
        text-decoration: none;
    }
    .b-compt a:hover{ background-color: coral; color: white; }
    #bio{
        position: relative;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(2, 450px);
        grid-template-rows: repeat(4, 100px);
        height: 65vh;
        z-index: -1;
        background-color: coral;

    }
    #bio h2{ color: white; }
    #bio h4{
        grid-row: 2 / 2;
        grid-column: 1 / 1;
        margin-top: 2%;
        color: maroon;
    }
    #bio p{
        margin-top: 5%;
        font-size: 20px;
        grid-row: 3 / span 2;
        color: white;
    }
    #bio img{
        margin-left: 150px;
        grid-row: 1 / span 2;
        grid-column: 2 / 2;
        object-fit: contain;
        height: 500px;
        width: 400px;
    }
    #grid{
        position: relative;
        display: grid;
        gap: 10px;
        margin: auto;
        justify-content: center;
        margin-bottom: 100px;
        width:100vh;
        grid-template-columns: repeat(3, 300px);
        grid-template-rows: repeat(2, 300px);
    }
    #grid img{
        width: 300px;
        height: 300px;
        object-fit:cover;
        background-color: coral;
    }
    #grid h3{ display: none;}
    #grid img:hover{ mask-image: linear-gradient(rgba(255, 127, 80, 0.606),rgba(255, 127, 80, 0.853)); }
    #grid img:hover h3{ display: block; top: 50px; }
    form{
        position: relative;
        display: grid;
        padding-right: 200px;
        justify-content: center;
        grid-template-columns: repeat(2, 450px);
        grid-template-rows: repeat(6, 90px), auto;
        height: auto;
        padding-top: 10px;
        padding-bottom: 5%;
        background-color: coral;
    }
    form h2{
        margin: 0;
        grid-row: 1 / 2;
        grid-column: 2 / 2;
        margin-top: 50px;
        margin-bottom: 50px;
        color: white;
    }
    form img{
        grid-row: 1 / span 7;
        grid-column: 1 / 1;
        object-fit: contain;
        height: 655px;
        margin-top: 100px;
        width: 600px;
        color: white;
    }
    form input{
        border: none;
        margin: 5px;
        border-radius: 30px;
        height: 50px;
    }
    form textarea{
        padding-top: 10%;
        border: none;
        margin: 5px;
        border-radius: 50px;
        /*resize: none;*/
        height: 100px;
        font-size: 13px;
    }
    #send{
        border: solid white 2px;
        margin: 10px;
        border-radius: 30px;
        cursor: pointer;
        color: white;
        background-color: coral;
    }
    #send:hover{
        border-radius: 30px;
        cursor: pointer;
        color: coral;
        background-color: white;
    }
    #pdf{
        background-color: coral;
        display: block;
        width: 100%;
        height: 100vh;
    }
    #h2-contact{ height: 10%; }
    #contact-autre{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 10px;
        margin-bottom: 1%;
    }
    #contact-autre p{
        border: solid coral 2px;
        width: 500px;
        margin: 20px;
        padding-top: 10px;
        border-radius: 30px;
        color: coral;
        background-color: white;
    }
    #contact-autre a{ width: 300px; border-radius: 30px; padding-top: 12px; }
}