@font-face {
    font-family: 'Merriweather';
    src: url("./Merriweather-VariableFont_opsz,wdth,wght.ttf") format("truetype");
}

:root, body {
    font-family: 'Merriweather', 'Arial Narrow', Arial, sans-serif;
    margin: 0px;
    padding: 0px;
}

/* <= <= root et body || header et nav => => */ 

header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: #121f47;
    color: white;
    height: 172.5px;
    
    h1 {
        width: 40%;
        display: flex;
        text-align: center;
        line-height: 30px;
        justify-content: flex-end;
        font-size: xxx-large;
        margin-right: 0.5em;
        
        .guardian{
            position: relative;
            left: 105px;
            top: 5px;
        }

    }

    nav {
        height: 80%;
        width: 60%;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
    }

    a {
        font-size: x-large;
        color: white;
        text-decoration: none;
    }
}

#culture {
    text-decoration: underline;
    text-decoration-thickness: 6px; /* épaisseur */
    text-underline-offset: 18px;     /* espace entre texte et ligne */
    text-decoration-color: orange;   /* couleur */
}

/*<= <= header et nav || main et article => =>*/

main {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*<= <= main et article || map + tooltip => =>*/

p {
    text-align: start;
    width: 100%;
}

.paragraphecentre {
    text-align: center;
}

label {
    width: 80%;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

input {
    margin: 2px;
}

#range {
    width: 50%;
}

object {
    height: 464px;
    width: 547.54px;
}

img {
    width: 100%;
}

#empty {
    height: 300px;
    width: 300px;
}