:root {
    /* https://coolors.co/264f74/variations */
    --color-blue: #264f74;
    --color-light: #32699a;
    --color-dark: #0F3264;
    --color-red: #e14242;
    --color-red-dark: #AD3333;
    --color-cloud: #d1e1f0;
    --color-snow: #f0f5fa;
    --container-width: min(1000px, 90vw);
}

body {
    background-color: white;
    font-family: "lato", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: min(18px, 4vw);
    margin: 0;
    padding: 0;
    border: 0;
}

h1 {
    font-family: "lato", sans-serif;
    font-weight: 900;
    font-size: min(30px, 8vw);
    text-transform: uppercase;
}


h2 {
    font-family: "lato", sans-serif;
    font-weight: 800;
    font-size: min(20px, 6vw);
    color: var(--color-dark);
    text-transform: uppercase;
}

h2.subtitle {
    font-weight: 300;
    color: white;
    line-height: 0.3;

}

h3 {
    font-family: "lato", sans-serif;
    font-weight: 700;
    font-size: min(18px, 5vw);
    color: var(--color-blue);
    text-transform: uppercase;
}

h4 {
    font-family: "lato", sans-serif;
    font-weight: 600;
    font-size: min(16px, 4vw);
    color: var(--color-light);
}

h1.center {
    margin: 0 auto;
    text-align: center;
}

a.link {
    text-decoration: none;
    font-weight: 400;
    color: var(--color-light);
}

.equipe_nav {
    margin-bottom: 20px;
}

.page {
    margin: auto;
    max-width: var(--container-width);
}

.justify {
    text-align: justify;
}

.center {
    text-align: center;
}

.blue {
    color: var(--color-blue);
}

.light {
    color: var(--color-light);
}

.red {
    color: var(--color-red);
}

.cloud {
    color: var(--color-cloud);
}

.snow {
    color: var(--color-snow);
}

.white {
    color: white;
}

.dark {
    color: var(--color-dark);
}


.front {
    min-height: 75vh;
    width: 100vw;
    color: var(--color-snow);
    background-color: #005577;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url("/img/zonedeskidelestrie/front.jpg?v={{Config::get('release.version')}}");
    background-blend-mode: multiply;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.front svg {
    margin-bottom: min(50px, 2vw);
    fill: white;
    width: min(300px, 30vw);
}

.front .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.front .title > * {
    padding: 0;
    margin: 0;
    text-align: center;
    line-height: min(60px, 8vw);
    font-weight: 900;
    font-size: min(70px, 9vw);
}

.header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-dark);
    color: white;
}

.header .navbar {
    display: flex;
    margin-top: min(50px, 5vw);
    width: var(--container-width);
    justify-content: flex-start;
    gap: 15px
}

.header-link {
    font-size: min(30px, 8vw);
    margin-bottom: 7px;
    color: var(--color-cloud);
}

.ceiling {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    padding-right: 20px;
    background-color: white;
    height: max(70px, 5vw);
}

.btn-menu {
    position: fixed; /* stays in place on scroll */
    top: max(30px, 3vw);
    right: max(30px, 3vw);
    font-size: 30px;
    cursor: pointer;
    z-index: 50;
}

#menu {
    position: fixed; /* stays in place on scroll */
    top: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(15, 50, 100, 0.95);
    min-height: 100vh;
    width: 100vw;
    display: none;
    justify-content: center;
    align-items: center;
    overflow-y: auto;

}


#menu .rows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#menu .menu-logo svg {
    width: 100vw;
    max-height: 50px;
    fill: white;

}

#menu .container {
    margin-top: 5vh;
    width: min(1300px, 90vw);
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-wrap: wrap;
}

#menu .container .column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
}

#menu .commanditaire {
    margin-top: 10vh;
    width: 100vw;
    height: 100px;
    background-image: url('/img/zonedeskidelestrie/cascades_white.svg');
    background-repeat: no-repeat;
    background-position: center;
}


#menu a {
    font-weight: 600;
    text-decoration: none;
    color: white;
}

#menu a:hover {
    color: var(--color-light);
}

.sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 5vw;
}

.legende {
    display: inline-block;
    font-size: 10px;
}

.administrators {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 15px;
}

.administrator {
    width: 125px;
    border: 1px solid var(--color-dark);
    padding: 10px;
}

.persons {
    /*background-color: var(--color-light);*/
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 2vw;
    flex-wrap: wrap;
}

.person {
    background-color: var(--color-snow);
    display: flex;
    flex-direction: column;
    justify-items: flex-start;
    margin: auto;
    width: min(300px, 100%);
    align-items: start;
    max-height: 600px;
    overflow-y: scroll;
    gap: 5px;
}

.person .description {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 5px;
    padding: 10px;
    text-align: justify;
}

.portrait_container {

    width: 100%;
    background-color: var(--color-light);
}

.portrait {
    margin: auto;
    /*border-radius: 50%;*/
    border: 5px solid var(--color-blue);
    width: min(300px, 100%);
    height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.bio {
    text-align: justify;
}

.top_section {
    font-weight: 700;
}

.vote {
    float: right;
    color: red;
    position: relative;
    font-size: 18px;
}

.bottom_section {
    font-size: 12px;
}

.rect {
    /*background-color: red;*/
}

.squares {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}


.btn {
    text-decoration: none;
    font-size: min(15px, 3vw);
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
}

thead {
    background-color: white;
}

td {
    vertical-align: middle;
}
tr.cloud td {
    background-color: var(--color-cloud);
    color:black;
}

tr td.light {
    background-color: var(--color-light);
    color: white !important;
}

td.right {
    text-align: right;
}



folder {
    display: inline-block;
    padding-left: 20px;
}

.green {
    color: green;
}

.btn-blue {
    color: var(--color-snow);
    background: linear-gradient(0deg, var(--color-blue), var(--color-light));
}

.btn-blue:hover {
    color: white;
    background: linear-gradient(0deg, var(--color-light), var(--color-dark));
}

.btn-poudre {
    color: var(--color-blue);
    background: linear-gradient(0deg, var(--color-cloud), var(--color-snow));
}

.btn-poudre:hover {
    color: var(--color-blue);
    background: linear-gradient(0deg, white, white);
}


.btn-red {
    color: white;
    background: linear-gradient(0deg, var(--color-red), var(--color-red-dark));
}

.btn-red:hover {
    color: white;
    background: linear-gradient(0deg, var(--color-red), var(--color-red));
}


.slogan {
    margin: 40px auto;
    width: min(700px, 90vw);
    text-align: center;
}

.voie {
    padding: 15vw;
    width: 100vw;
    min-height: 40vw;
    background-repeat: no-repeat;
    background-position: top center;

    background-size: cover;
    background-image: url("/img/zonedeskidelestrie/voie.png?v={{Config::get('release.version')}}");
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.voie div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: min(200px, 90vw);
}

@media (max-width: 800px) {
    .voie {
        background-position: 25% center;
        background-size: 200%;
    }
}


.clubs, .partenaires, .commanditaires {
    padding: min(30px, 10vw);
    margin: auto;
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: min(5vw, 30px);
    text-align: center; /* optional for child content alignment */
}

.club {
    /*border: 5px solid var(--color-cloud);*/
    filter: grayscale(100%);
    opacity: 0.7;
    transition: opacity 0.3s ease, filter 0.3s ease;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 150px;
    width: min(150px, 20vw);
}

.club:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.club-owlshead {
    width: min(100px, 20vw);
}

.club-orford {
    width: min(250px, 50vw);
}

.club-sutton {
    width: min(130px, 20vw);
}

.club-bromont {
    width: min(100px, 20vw);
}

.cascades {
    width: min(300px, 50vw);
}

.footer {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 25vh;
    background-color: var(--color-dark);
}

.footer > div {
    color: var(--color-snow);
    padding-left: min(30px, 15vw);
    padding-bottom: min(30px, 15vw);
}

footer {
    background-color: var(--color-1);
}

footer, footer a {
    color: white
}

footer a:hover {
    color: var(--color-light);
}

.footer-logo > svg {
    fill: white;
}

.footer-logo svg:hover {
    fill: var(--color-light);
}