html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    font-family: 'Fasthand', cursive;
}

h1,
h2,
h3 {
    font-family: 'Bebas Neue', cursive;
}

#header {
    min-height: 30rem;
    background-image: url(../images/header.jpg);
    background-size: cover;
}

#footer {
    padding: 4rem;
    background-color: #c37b3e;
}

#titredusite {
    margin-top: 10rem;
    margin-right: 5rem;
    margin-left: -5rem;
    padding: 3rem;
    background-color: #634432;
}

#titredusite h1 {
    color: #eec599;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 0.4rem;
}

#titredusite h3 {
    font-family: 'Bebas Neue', cursive;
    color: #dedcda;
}

#blocrubrique {
    background-color: #eec599 !important;
}

.rubrique {
    text-align: center !important;
    padding: 1rem;
}

.rubrique:hover {
    text-align: center !important;
    background-color: #634432;
    color: #eec599;
    padding: 1rem;
}

.reseausocial:hover {
    opacity: 0.9;
}

/*****************/
/* media queries */
/*****************/
/* extra small */
@media screen and (max-width: 575px) {
    #titredusite {
        margin-top: 0rem;
        margin-right: 0;
        margin-left: 0;
        padding: 3rem;
        background-color: #634432;
    }

    #titredusite h1 {
        font-size: 1.7rem;
    }

    #titredusite h3 {
        font-size: 1.2rem;
    }

    #header {
        background-image: url(../images/header-mobile.jpg);
        background-size: contain;
    }

    .rubrique {
        font-size: 1.3rem;
    }

}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767px) {
    #titredusite {
        margin-top: 0;
        margin-right: 0;
        margin-left: 0;
        padding: 3rem;
        background-color: #634432;
    }

}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    #titredusite {
        margin-top: 5rem;
        margin-right: 5rem;
        margin-left: -5rem;
        padding: 3rem;
        background-color: #634432;
    }

    #titredusite h1 {
        color: #eec599;
        font-family: 'Bebas Neue', cursive;
        letter-spacing: 0.4rem;
        font-size: 2rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}