@font-face {
    font-family: chevin-light;
    src: url("../fonts/Chevin-Light-6115ca7a3a2d775507065498fe8621bd.woff") format('woff');
}
@font-face {
    font-family: chevin-bold;
    src: url("../fonts/Chevin-Bold-4f267a80af2fcd6afba107ca42791337.woff") format('woff');
}
@font-face {
    font-family: gotham-black;
    src: url("../fonts/Gotham-Black-44b5007f1420ee99f1b7033d5e898f3b.otf") format('woff');
}
@font-face {
    font-family: gotham-medium;
    src: url("../fonts/Gotham-Medium-55bea1f5620d1db2b1c29001bce26bc7.otf") format('woff')
}

* {
    --dark-blue: #103887;
    --medium-blue: #0073BB;
    --light-blue: #8fcad2;
    --green: #d5e6c8;
    --dark-pink: #f0d6d3;
    --light-pink: #f8ebe2;
    --dark-pink-label: #fa9595;
}

html {
    --favicon-color: #ff0000; /* Rouge */
}

body {
    margin:0;
    height: 100%;
    font-family: Arial sans-serif;
}

body.theme-light {
    background-color: white;
}

body.theme-dark {
    background-color: #dddddd;
}

.theme-light {
    color: var(--dark-blue);
}

.container {
    background-color: #eee;
    padding: 1em;
    min-height: 720px;
    max-height: fit-content;
    display: flex;
}

#content {
    width: 75%;
    padding: 3em;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #ddd;
    min-height: inherit;
}
#content.theme-light {
    background-color: #FFFFFF;
}

#content.theme-dark {
    background-color: #CCCCCC;
    box-shadow: 2px 2px 5px #333333;
}

#lateral {
    margin: 0 10px;
    border-radius: 5px;
    background-color: var(--light-pink);
    width: 20%;
    padding: 1em;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 2px 2px 5px var(--dark-pink);
}

#lateral .button {
    margin-bottom: .35em;
}

a, a:hover, a:visited {
    text-decoration: none;
    color: var(--dark-blue);
}

h1, h2, h3, h4, h5 {
    font-family: chevin-bold, sans-serif;
    transition: color .3s;
}

.w-10 {
    width: 10%;
}
.w-20 {
    width: 20%;
}
.w-30 {
    width: 30%;
}

h1.theme-light,
h2.theme-light,
h3.theme-light,
h4.theme-light,
h5.theme-light{
    color: var(--dark-blue);
}

h1.theme-dark,
h2.theme-dark,
h3.theme-dark,
h4.theme-dark,
h5.theme-dark{
    color: var(--medium-blue);
}

.hide {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.show {
    max-height: fit-content;
    opacity: 1;
}

legend {
    font-size: 1.4em;
}

legend.theme-light {
    color: var(--dark-blue)
}
legend.theme-dark {
    color: var(--medium-blue)
}

fieldset.theme-light {
    border-color: var(--dark-blue);
}

fieldset.theme-dark {
    border-color: var(--dark-blue);
}

[class*="hidden-content"].hide {
    z-index:-1;
    max-height: 0;
    opacity: 0;
}

[class*="hidden-content"].show {
    transition: max-height .3s ease-in-out, opacity .3s ease-in-out;
    z-index: 1;
    max-height: fit-content;
    opacity: 1;
}

link[rel="icon"] {
    filter: invert(22%) sepia(91%) saturate(7487%) hue-rotate(360deg) brightness(96%) contrast(108%);
}
.show-registration-informations {visibility: hidden;}

@media (width < 1100px){
    #lateral, #content {
        width: auto;
        padding: 1em;
    }

    #lateral {
        flex-direction: row;
        margin-top: .25em;
        align-items: center;
    }

    .container {
        display: flex;
        flex-direction: column-reverse;
        height: fit-content;
    }

    #nav-main .menu-list{
        display: none;
    }


    div.lateral-primary {
        display:flex;
        flex-direction: row;
        justify-content: space-around;
    }

    .show-registration-informations {
        visibility: visible;
    }
}

@media (width < 840px) {
    div.lateral-primary {
        flex-direction: column;
    }
    div.lateral-primary {
        text-align: center;
    }
    .show-registration-informations {
        max-width: fit-content;
        align-self: end;
    }
}