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

body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}

H1,
h2,
h3 {
    font-family: 'Libre Baskerville', serif;
}

#logo {}

#majortitle {
    position: absolute;
    top: 15rem;
    left: 5rem;
    right: 5rem;
    color: #eee;
    font-weight: bold;
    font-size: 7rem;
    padding: 1rem;
    background-color: rgba(47, 54, 64, 0.3);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#header-picture {}

#header {
    margin-top: 0rem;
    background-color: rgba(255, 255, 255, 50);

}

.titrerubrique,
#mentionlegale {
    font-size: 6rem;
    font-weight: bold;
}

#mentionlegale {
    padding: 3rem 0;
}

.bg-black {
    background-color: #2f3640;
}

.navbar {
    border-bottom: solid 15px #f5f6fa;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-link,
.navbar-brand {
    color: #f5f6fa;
    transition: all 900ms;
}

.nav-link:hover {
    color: #f5f6fa;
    border-bottom: 1px solid #fff;
}

.dropdown-menu {
    border-radius: 0;
    padding: 0;
    background-color: #2f3640;
}

.dropdown-item {
    background-color: #f5f6fa;
    color: #2f3640;
}

.dropdown-item:hover {
    background-color: #2f3640;
    color: #f5f6fa;
}

.dropdown-divider {
    margin: 0;
    padding: 0;
    border-color: #2f3640 !important;
}

#map {
    height: 400px;
}

.numerotation {
    font-family: 'Libre Baskerville', serif;
    font-size: 3rem;
    font-weight: bold;
}


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    #majortitle {
        position: absolute;
        top: 8rem;
        left: 1rem;
        right: 1rem;
        padding: 1rem;
        color: #fff;
        background-color: rgba(47, 54, 64, 0.3);
        font-weight: bold;
        font-size: 2.7rem;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }

    .titrerubrique,
    #mentionlegale {
        font-size: 2rem;
        font-weight: bold;
    }

    #mentionlegale {
        padding: 0.7rem 0;
    }

}

@media (min-width: 320px) and (max-width: 375px) {
    #majortitle {
        position: absolute;
        top: 7rem;
        left: 1rem;
        right: 1rem;
        padding: 1rem;
        color: #fff;
        background-color: rgba(47, 54, 64, 0.3);
        font-weight: bold;
        font-size: 2.7rem;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }

}

@media (max-width: 320px) {

    #majortitle {
        position: absolute;
        top: 6rem;
        left: 1rem;
        right: 1rem;
        padding: 1rem;
        color: #fff;
        background-color: rgba(47, 54, 64, 0.3);
        font-weight: bold;
        font-size: 1.7rem;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    #majortitle {
        position: absolute;
        top: 14rem;
        left: 1rem;
        right: 1rem;
        padding: 1rem;
        color: #fff;
        background-color: rgba(47, 54, 64, 0.3);
        font-weight: bold;
        font-size: 5rem;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }

    .titrerubrique {
        font-size: 4rem;
        font-weight: bold;
    }

    #mentionlegale {
        font-size: 3.7rem;
        font-weight: bold;
    }

    .numerotation {
        font-family: 'Libre Baskerville', serif;
        font-size: 3rem;
        font-weight: bold;
        padding: 0 0.6rem;
    }

}

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

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