@import url('https://fonts.googleapis.com/css2?family=Dongle&family=Dosis:wght@200..800&family=Emblema+One&family=Fuzzy+Bubbles:wght@400;700&family=Galada&family=Gayathri:wght@100;400;700&family=Gideon+Roman&family=Hammersmith+One&family=IM+Fell+French+Canon+SC&family=Imbue:opsz,wght@10..100,100..900&family=Imperial+Script&family=KoHo:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap&family=Gowun+Dodum&display=swap'); /*Dongle, Dosis, Emblema One, Fuzzy Bubbles, Galada, Gayathri, Gideon Roman, Hammersmith One, IM Fell French Canon SC, Imperial Script, Koho*/

*, ::before, ::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box; 
}

html, body {
    height: 100%;
}

html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth; 
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.slide {
	scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
}

a {
    text-decoration: none;
}

/*SECTION COUVERTURE*/
#section_couverture {
    height: 100vh;
    width: 100%;
}

#couverture_logo {
    position: absolute;
    z-index: 10;
    left: 13vw;
    top: clamp(5vh, calc(40vh - 15vw), 80vh);
    height: clamp(1vh, calc(20vw + 13vh), 100vh);
    width: clamp(1vw, calc(30vw + 20vh), 100vw);
    background-image: url(Sources/couvertureLogo.svg);
    background-size: cover;
    background-repeat: no-repeat;
    backdrop-filter: blur(calc(2vh - 1vw));
    border-radius: 3vh;
    filter: drop-shadow(2vh 2vh 1vh #00000090);
}

#couverture_logo h1 {
    text-align: center;
    color: #fff;
    font-family: 'Franklin Gothic Medium';
    font-size: clamp(.1vh, calc(2vw + 1.3vh), 10vh);
    font-weight: 100;
    margin-top: clamp(1vh, calc(20vw + 13vh), 100vh);
}

#couverture_background {
    height: 100%;
    width: 100%;
    background-image: url(Sources/couvertureBg.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0 -2vh 2vh #00000080;
}

/*SECTION SOMMAIRE*/
#section_sommaire {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-color: #D7D7D7;
    color: #121942;
    padding: 2vw;
}

#section_sommaire #inner1 {
    flex: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sommaire_selection {
    transition: 250ms ease;
}

.sommaire_selection:hover {
    cursor: pointer;
    z-index: 2;
    transform: translateY(-1vh);
    box-shadow: 1vh 1vh 1vh #00000050;
}

#inner1 hr {
    display: block;
    height: 1vw;
    width: 20vw;
    background: #121942;
    border: transparent;
}

#inner1 h1 {
    margin: 0 2vh;
    margin-bottom: 2vw;
    font-size: 9vw;
}

#section_sommaire #inner2 {
    flex: 1;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    min-height: 10vh;
}

#inner2 .innerCase1 {
    display: flex;
    flex-direction: column;
    border: calc(.2vw + .5vh) #121942 solid;
    flex: 1;
    flex-wrap: nowrap;
    margin: 0 calc(.5vw + .5vh);
    min-height: 10vh;
    padding: 1vh;
}

#inner2 .innerCase1 h1 {
    position: absolute;
    margin-top: calc(-1.5vh - 1vw);
    font-size: calc(1vh + 1vw);
    font-family: 'Emblema One';
    align-self: center;
    text-align: center;
    background-color: #D7D7D7;
    padding: 0 .5vh;
    width: auto;
}

.innerCase1 .line {
    display: flex;
    justify-content: space-between;
}

.line p {
    font-size: 2vh;
    font-family: 'Dosis';
}

#section_sommaire #inner3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: calc(.2vw + .5vh) #121942 solid;
    margin: 2vh calc(.5vw + .5vh); 
    padding: 0 7vw;
}

#inner3 h1 {
    position: absolute;
    margin-top: calc(-6.5vh - 6vw);
    left: 7vw;
    font-size: calc(1vh + 1vw);
    font-family: 'Emblema One';
    align-self: center;
    text-align: center;
    background-color: #D7D7D7;
    padding: 0 .5vh;
    width: auto;
}

#inner3 #progression_bar {
    height: 2vh;
    width: 80vw;
    background-color: #CECECE;
    box-shadow: inset .5vh .5vh 1vh #00000040;
    border-radius: .7vh;
    align-self: center;
}

#progression_bar #progression {
    height: 2vh;
    width: 55vw;
    background-color: #8DA485;
    box-shadow: inset .5vh .5vh 1vh #00000040;
    border-radius: .7vh;
}

#inner3 #under_text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;;
    margin-top: 1vh;
}

#under_text h2 {
    font-family: 'Elsie';
    font-size: calc(1vw + 1vh)
}

#under_text h3 {
    font-family: 'Elsie';
    font-size: calc(1vw + 1vh);
    color: #5C7453;
}

#section_sommaire #inner4 {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 8vh;
    max-width: 100vw;
}

#inner4 .innerCase2 {
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    margin: 0 calc(.5vw + .5vh);
    height: 100%;
    flex: 1;
    border: calc(.2vw + .5vh) #121942 solid;
    padding: 2vh;
}

.innerCase2 h1 {
    position: absolute;
    margin-top: calc(-2.5vh - 1vw);
    font-size: calc(1vh + 1vw);
    font-family: 'Emblema One';
    align-self: center;
    text-align: center;
    background-color: #D7D7D7;
    padding: 0 .5vh;
    width: auto;
}

.innerCase2 p {
    flex: 1;
    font-family: 'Fuzzy Bubbles';
    font-size: 2vh ;
}

/*SECTION PRESENTATION*/
#section_presentation {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    max-height: 300vw;
    background-image: url(Sources/woodTexture.png);
    background-size: contain;
    box-shadow: inset 2vh 0 2vh #00000080;
}

#section_presentation #couvercle_boite {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5vw 0;
    min-height: 60vw;
    width: 60vw;
    background-image: url(Sources/boiteDeJeu.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: drop-shadow(3vw 3vw 3vw #00000080);
    transition: 250ms ease-in;
}

#couvercle_boite:hover {
    cursor: pointer;
    transform: scale(1.1);
    filter: drop-shadow(5vw 5vw 3vw #000000F0);
}

#couvercle_boite:hover > #trailer_button {
    background-color: #00000050;
    color: #ffffff;
}

#couvercle_boite.changed {
    transform: translateX(-100vw) rotateZ(50deg);
}

#trailer_button {
    color: #fff;
    font-family: 'Dongle';
    font-weight: 100;
    font-size: 3vh;
    padding: 0 3vw;
    color: #ffffff90;
    background-color: #00000010;
    border-radius: 100vw;
    transition: 250ms ease;
}

@media (max-aspect-ratio: 1/1){
    #trailer_button {
        background-color: #00000050;
        color: #ffffff;
    }
}

#video_youtube{
    position: relative;
    margin-top: -60vw;
    margin-bottom: 20vw;
    z-index: 0;
}

#video_youtube iframe{
    box-shadow: 2vw 2vw 2vw #00000080;
    width: 53vw;
    height: 30vw;
}

#up_on_plate {
    display: flex;
    align-items: end;
}

#cup_of_coffee {
    width: 20vw;
    height: 20vw;
    margin-bottom: -1vw;
    filter: drop-shadow(2vw 2vw 2vw #00000080);
}

model-viewer {
    height: 30vw;
    width: 50vw;
    filter: drop-shadow(2vh 2vh 1vh #00000090);
}

#section_presentation #cutlery {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80vw;
    filter: drop-shadow(1.5vw 1.5vw 1vw #00000080);
}

#cutlery #fork {
    height: 45vw;
}

#cutlery #plate {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 3vw;
    height: 45vw;
    width: 45vw;
    background-image: url(Sources/assiette.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#plate #plate_logo {
    height: 40vw;
    width: 40vw;
    filter: drop-shadow(.8vw .8vw .3vw #00000040);
}

#cutlery #knife {
    height: 45vw;
}

#cutlery #spoon {
    height: 35vw;
}

#section_presentation #description {
    padding: 3vw 2vw;
    margin-top: 10vw;
    flex: 1;
    width: 100%;
    background-color: #00000040;
    backdrop-filter: blur(calc(.2vw + .2vh));
    color: #fff;
}

#description h1 {
    font-family: 'KoHo';
    font-size: 3vh;
    text-align: center;
}

#description p {
    font-family: 'KoHo';
    font-size: 15px;
    margin: 2vh;
}

/*SECTION FOOTER*/
#section_footer {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    background-color: #282828;
    width: 100%;
    padding: 2vw;
}

#section_footer .header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    background-color: #282828;
}

.header img {
    height: 20vw;
    margin-right: 1.5vw;
    margin-top: calc(.5vh + 1vw);
}

.header h1 {
    color: #fff;
    font-family: 'Imperial Script';
    font-weight: 100;
    font-size: calc(2vh + 4vw);
}

#section_footer .mainH2 {
    color: white;
    font-family: 'Imbue';
    font-size: 5vw;
    text-align: center;
    margin-top: -10vw;
}

#section_footer #progression_div {
    display: flex;
    align-self: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin-top: 2vw;
}

#progression_div #progression_block {
    margin-bottom: 1vw;
    height: 2vw;
    width: 100%;
    border-radius: .5vw;
    background-color: #D9D9D9;
    overflow: hidden;
}

#progression_block #progression_inner {
    z-index: 2;
    margin-top: -2vw;
    width: 80%;
    height: 100%;
    background-color: #3E6342 ;
    border-radius: .5vw 0 0 .5vw;
    clip-path: polygon(
        53vw 0%,
        50vw 100%,
        0% 100%,
        0% 0%
    );
}

#progression_block #under_inner {
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #628867 ;
    border-radius: .5vw 0 0 .5vw;
    clip-path: polygon(
        56vw 0%,
        53vw 100%,
        0% 100%,
        0% 0%
    );
}

#progression_div #progression_under_text {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    color: #fff;
    font-size: 2vw;
}

#progression_under_text h3 {
    font-family: 'Gideon Roman';
}

#progression_under_text #participate_button {
    background-color: #D9D9D9;
    color: #282828;
    padding: .5vh 1vh;
    border-radius: clamp(1vw, 1vh, 100vw);
    font-size: clamp(2vw, 2vh, 100vw);
    box-shadow: inset .3vh .3vh .4vh #00000060,
    0 0 0 #FFFFFF90;
    text-shadow: .3vh .3vh .4vh #00000060;
    transition: 250ms ease;
}

#progression_under_text #participate_button:hover {
    cursor: pointer;
    text-shadow: .6vh .6vh .5vh #00000060;
    box-shadow: inset .6vh .6vh .5vh #00000060,
    0 .8vh 0 #FFFFFF60;
    transform: translateY(-.8vh) ;
}

#section_footer #donation_tiers {
    display: flex;
    align-self: center;
    justify-content: center;
    flex-direction: row;
    color: #fff;
    width: 80vw;
}

#donation_tiers .tier {
    display: flex;
    align-self: center;
    align-items: left;
    justify-content: flex-start;
    flex-direction: column;
    width: clamp(30vh,30vh,30vw);
    border: #fff .5vw solid;
    margin: 3vw 2vw;
    padding: calc(.6vh + .8vw);
    border-radius: 2vw;
    transition: 300ms ease;
}

#plonge_div {
    height: auto;
    box-shadow: inset 0 0 1vw #d46e6eF0;
}

#plonge_div:hover {
    cursor: pointer;
    box-shadow: inset 0 0 2vw #ff6969;
    transform: scale(1.1);
}

#commis_div {
    box-shadow: inset 0 0 2vw #5da24f60;
}

#commis_div:hover {
    cursor: pointer;
    box-shadow: inset 0 0 3vw #43db25;
    transform: scale(1.1);
}

#chef_div {
    box-shadow: inset 0 0 3vw #FFF64560;
}

#chef_div:hover {
    cursor: pointer;
    box-shadow: inset 0 0 5vw #fff875;
    transform: scale(1.1);
}

.tier h1 {
    font-size: clamp(1vh,5vh,3vw);
    font-family: 'Fuzzy Bubbles';
}

.tier h3 {
    font-size: 1vw;
    font-family: 'Fuzzy Bubbles';
    margin-top: -.5vw;
    margin-bottom: 1vh;
}

.tier p {
    font-size: calc(.5vw + .5vh);
    font-family: 'Galada';
    text-align: left;
    line-height: 1.2;
}

#section_footer #title {
    color: #fff;
    text-align: center;
    font-family: 'Imperial Script';
    font-weight: 100;
    font-size: calc(3vh + 4vw);
    margin-top: calc(9vw - 5vh);
}

#section_footer #big_donations {
    margin: 5vw;
}

#big_donations h1 {
    font-family: 'Gayathri';
    font-weight: 100;
    font-size: calc(1vw + 2vh);
    color: #fff;
    text-align: center;
}

#big_donations_div {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.donation_case {
    border: #fff .7vw solid;
    border-top-left-radius: calc(2vw + 1vh);
    border-bottom-right-radius: calc(2vw + 1vh);
    padding: .5vw 1vw;
}

#big_donations h2 {
    font-family: 'Hammersmith One';
    font-weight: 100;
    font-size: calc(2vw + 1vh);
    color: #fff;
}

#all_donations h1 {
    font-family: 'Gayathri';
    font-weight: 100;
    font-size: calc(1vw + 2vh);
    color: #fff;
    text-align: center;
}

#all_donations_div {
    display: flex;
    justify-content: center;
    justify-self: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 80%;
}

#all_donations div {
    overflow: hidden;
    display: grid;
    grid-template-columns: 
    repeat(
        auto-fit,
        minmax(
            5vh,
            20vw
        )
    );

}

#all_donations h2 {
    text-align: center;
    font-family: 'Fuzzy Bubbles';
    font-size: calc(.8vw + 1vh);
    margin: 0 2vw;
    color: #fff;
}

#section_footer .footer {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.footer img {
    margin-top: -10vw;
    transform: rotate(180deg);
    height: 20vw;
    margin-left: 1.5vw;
}

#credits {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 0 2vw;
    margin-top: -10vw;
    margin-bottom: -5vw;
    align-items: center;
    color: #fff;
}

#school_part {
    display: flex;
    flex-direction: column;
    margin-bottom: 5vh;
}

#school_part img {
    width: 20vh;
}

#school_part p {
    font-family: 'Gowun Dodum';
    font-size: 1.5vh;
}

#credits #credits_part {
    margin-bottom: 5vh;
}

#credits_part h1 {
    font-family: 'Galada';
    font-weight: 100;
    font-size: 2vh;
    text-align: center;
}

#credits_part p {
    font-family: 'Gowun Dodum';
    font-size: 2vh;
    line-height: 1;
    text-align: center;
    margin-bottom: 2vw;
}

#logo_part img {
    width: 18vh;
}

.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    position: absolute;
    font-family: 'koho';
    font-size: 1.5vh;
    color: #fff;
    width: 8vh;
    height: 6vh;
    background-image: radial-gradient(transparent, #000000bb);
    border-radius: 0 5vh 5vh 5vh;
    pointer-events: none;
    opacity: 1;
    transition: opacity 150ms ease, all 200ms ease-out;
}