/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

a {
    
}

p {
    text-align: justify;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    line-height: 2em;
}

.header-info p {
    text-align: center;
}

h2 {
    text-align: justify;
    font-family: "Source Serif 4", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

h2 > .kd-color-2 {
    font-weight: bold;
    color: #212529;
}

.btn, .navbar a {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .05em;
    font-size: 1.2em;
    padding-top: 0.5em;
}

.kd-color {
    color: saddlebrown;
    font-weight: bold;
}

.kd-color-2 {
    color: black;
    font-weight: bold;
}

.navbar-brand {
    
}

.header-info a {
    text-decoration: none;
    color: black;
}

.header-info i {
    color: saddlebrown;
}

.bg-dark {
    background-color: #141414 !important;
}

/* Images */
.header.img-container {
    display: block;
    width: 100%;
    overflow: hidden;
}

.bg-img-full {
    width: 100%;
    height: 100%;
}

section.img-container img {
    object-fit: cover;
    object-position: center center;
}

.vignette {
    position: relative;
    width: 100%;
}

.vignette::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 50em rgba(0, 0, 0, .5) inset;
}

.vignette > div {
    max-height: 30rem;
}

.img-header {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Media Queries */
@media only screen and (min-width : 320px) {
    .img-header {
        content: url("../assets/couverture_mobile.svg");
    }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
    .img-header {
        content: url("../assets/couverture_mobile.svg");
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .img-header {
        content: url("../assets/couverture_mobile.svg");
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .img-header{
        content: url("../assets/couverture.jpg");
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .img-header {
        content: url("../assets/couverture.jpg");
        
    }
}