:root {
    --color-1: #044591; /* BLUE */
}

body {
    font-family: 'Alan Sans', sans-serif;
    margin: 0px;
    padding: 0px;
    color: var(--color-2);
    /*font-size: 18px;*/
    font-size: min(14px, 2.4vw);


    /*background-image: url("/img/competitionavalanche/snow_fx.svg");*/
    background-repeat: repeat-y;
    background-position: 80%;
    background-size: 100px 2000px;

}

h1 {
    display: block;
    margin-bottom: 40px;
    text-align: center;
    color: var(--color-1);
    font-weight: bold;
    text-transform: uppercase;
    /*border-bottom: 1px solid #ddd;*/
}

h2 {
    display: block;
    margin-bottom: 40px;
    text-align: center;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    font-size:2rem;
    /*border-bottom: 1px solid #ddd;*/
}



hr {
    margin: 60px;
    background-color: var(--color-1);
}

.h1-sub {
    color: #888;
    font-size: 14px;
}

p {
    padding: min(20px,1vw) 0px;
}

a.btn-club {
    display: inline-block;
    background-color: var(--color-1);
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: min(30px,3vw);
    padding: 16px 20px;
    margin: 20px auto;
    border: 1px solid var(--color-1);
}

a.btn-club:hover {
    scale: 98%;
    color: var(--color-1);
    background-color: white;


}


.middle {
    margin: auto;
}

.center {
    text-align: center;
}

.caps {
    text-transform: uppercase;
}

.medium {
    max-width: 500px;
}

.short {
    max-width: 350px;
}

.fit {
    max-width: fit-content;
}

.top {
    display: flex;
    justify-content: flex-start;
    /*align-items: flex-start;*/
    width: 100vw;
    position: sticky;
    top: 0px;
    z-index: 2;
    border-bottom: 1px solid #ccc;
    /*background-color: yellow;*/
}

.top-logo {
    padding: min(20px,2%);
    width: min(150px, 35%);
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-logo img {

}


.top-split {
    display: grid;
    grid-template-rows: min-content auto;
    /*background-color: blue;*/
    width: 100%;
}

.top-menu {
    background-color: black;
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding-right: 20px;
    min-height: 50px;
}

.top-menu a {
    color: white;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: min(18px, 5vw);

}

.header-menu {
    background-color: var(--color-1);

    /*background: rgb(0,176,75);*/

    /*background: linear-gradient(0deg, rgba(0,176,75,1) 0%, rgba(0,150,64,1) 21%, rgba(0,150,64,1) 100%);*/


    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: solid 1px #ccc;
    padding: 0px 10px;
    min-height: 60px;
}

.header-menu a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: min(18px, 3vw);
}

.header-menu a:hover {
    color: black;
    scale: 98%;
}

.header-menu a.btn-link {
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(34, 34, 34, 1) 33%, rgba(0, 0, 0, 1) 100%);
    color: white;
    padding: 7px 10px;
}

.header-menu a.btn-link:hover {
    background-color: white;
    color: var(--color-1);
    scale: 98%;
}

#menu {
    display: none;
    background-color: rgba(0, 0, 0, .8);
    position: absolute;
    z-index: 10;
}

.menu-container {
    width: 100vw;
    padding: 60px 40px;

}

.menu-container-section {
    margin: auto;
    width: min(900px, 90%);
    display: flex;
    justify-content: space-around;
    gap: 30px;
    flex-wrap: wrap;

}

.menu-section {
    width: 170px;
    /*background-color: green;/*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;

}


.menu-title {
    color: white;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--color-1);

}

.menu-link {
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-size: 1rem;
}

.menu-link:before {
    /*content: "\00BB";*/
    content: "\2605";
    margin-right: 8px;
    color: var(--color-1);
}

.menu-link:hover {
    scale: 98%;
    color: var(--color-1);
}


.frontpage-container {
    display: grid;
    grid-template-rows: min-content auto;
    height: 100vh;
}

.frontpage {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


    background-image: url('/img/leviski/header.jpg');
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.25);
    width: 100vw;

    display: flex;
    justify-content: center;
    align-items: center;
}

.title {
    /*color:var(--color-1);*/
    color: white;
    font-weight: bold;
    font-size: min(5rem, 9vw);
    text-transform: uppercase;
    text-align: center;
    line-height: min(4rem, 9vw);
    text-shadow: #000 1px 0 15px;
}

.sub_title {
    color: white;
    line-height: min(4rem, 7vw);
    text-align: center;
    text-transform: uppercase;
    font-size: min(4rem, 7vw);
    text-shadow: #000 1px 0 15px;
}

.page {
    padding: 90px 0px;
    margin: auto;
    max-width: min(1200px, 90%);

}

.vsplit {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap-reverse;
}


.vsplit div {
    width: min(400px, 90%);
}

#valeurs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 40% 1fr;
    font-size: min(40px, 4vw);
}


.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    width: min(300px, 90%);
    padding: 15px;
}

.card .img {
    margin:20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 200px;
}

.plus {
    font-weight: bold;
    font-size: 40px;
    color: var(--color-1);

}

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

a.link:hover {
    color:grey;
}

.song {
    background-color: var(--color-1);
    color:white;
    font-style:italic;
    font-size:1.3rem;
    padding:min(40px, 4vw);
    margin:0px auto 20px auto;
    width: fit-content;
    text-align: center;
}

.sponsors_options {
    background-color: var(--color-1);
    color:white;
    margin:40px auto;
}
.sponsors_options th {
    padding:min(20px,3vw) min(60px,4vw);
    text-align: center;
    font-size:min(1.3rem, 3vw);
}

.sponsors_options td {
    padding:min(10px,2vw);
    text-align: center;
}


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

footer, footer a {
    color: white !important;
}

footer a:hover {
    color: black !important;
}

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

.footer-logo svg:hover {
    fill: black !important;
}

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