@charset "UTF-8";


body {
    width: 100vw;
    height: auto;
    font-family: 'Space Grotesk', sans-serif;
}

html {
    cursor: none;
}

.cursor {
    position: fixed;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
    left: -100px;
    top: 50%;
    background: transparent;
    z-index: 10000;
    border: none;
    height: 50px;
    width: 50px;
    transition: all 0ms ease-out;
    border: solid 5px #b8b8b8;
    /* stroke width and color */
}

/* WELCOME PAGE */
div#background-home {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to left, rgb(255, 27, 255), rgb(27, 255, 251));
    animation: animatedgradient 3s infinite alternate-reverse;
    background-size: 300%;
    background-position: -100%;
}

@keyframes animatedgradient {
    from {
        background-position: 0%;
    }

    to {
        background-position: 100%;
    }
}

.title-S {
    position: static;
    margin-left: 40%;
    Transform: translateX(-50%);
    padding-top: 4vh;
    text-align: center;
    font-size: 20rem;
    font-weight: 600;
    text-transform: uppercase;
    -webkit-text-stroke: 5px #b8b8b8;
    /* stroke width and color */
    color: transparent;
    -webkit-font-smoothing: antialiased;
}

a#enter {
    position: absolute;
    width: 300px;
    height: 125px;
    font-size: 5rem;
    Transform: translateX(-50%);
    margin-top: 20vh;
    margin-left: 50%;
    text-align: center;
    background-color: #b8b8b8;
    border: none;
    color: white;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    transition-duration: 0.4s;
}

a#enter:hover {
    background-color: #ffffff;
    color: #b8b8b8;
}

p#enterbutton {
    margin-top: 18px;
}

/* Intro 01 */

.title {
    background-color: rgb(0, 255, 145);
    width: 100vw;
    height: 100vh;
}

h1.level {
    position: static;
    text-align: center;
    padding-top: 5vh;
    padding-left: 15vw;
    padding-right: 15vw;
    font-size: 7rem;
    text-transform: uppercase;
    -webkit-text-stroke: 4px #337d3e;
    /* stroke width and color */
    color: transparent;
    -webkit-font-smoothing: antialiased;
}

p.soustitre {
    position: static;
    text-align: center;
    padding-top: 2%;
    padding-left: 15vw;
    padding-right: 15vw;
    font-size: 3rem;
    color: #337d3e;

}

a#play {
    position: relative;
    margin-top: 5%;
    margin-left: 50%;
    font-size: 3em;
    text-align: center;
    background-color: #337d3e;
    border: none;
    color: rgb(0, 255, 145);
    width: 300px;
    height: 125px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    transition-duration: 0.4s;
    animation: platform0 3s infinite;
    transform: translateX(-50%);
}

a#play:hover {
    background-color: rgb(0, 255, 145);
    border: solid 4px #337d3e;
    color: #337d3e;

}

@keyframes platform0 {
    0% {
        left: 0px;
        top: 0%;
    }

    50% {
        left: 0px;
        top: 22%;
    }

    100% {
        left: 0px;
        top: 0%;
    }
}

p#game01button {
    padding-top: 12%;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
}

/* GAME 01*/

.game {
    position: relative;
    width: 100vw;
    height: 300vh;
    padding-top: 3%;
    background-image: linear-gradient(to bottom, rgb(0, 255, 145), #337d3e);
    z-index: 50;
}

.ptf {
    background: rgb(0, 0, 0);
    position: relative;
    transition-timing-function: ease-in-out;
}

.platform1 {
    margin-top: 0%;
    width: 400px;
    height: 100px;
    animation: myfirst 3s infinite;
}


@keyframes myfirst {
    0% {
        left: 10%;
        top: 0px;
    }

    50% {
        left: 50%;
        top: 0px;
    }

    100% {
        left: 10%;
        top: 0px;
    }
}

.platform2 {
    margin-left: 20%;
    margin-top: 0%;
    width: 200px;
    height: 200px;
    animation: updown01 5s infinite;
}


@keyframes updown01 {
    0% {
        left: 0px;
        top: 5%;
    }

    50% {
        left: 0px;
        top: 20%;
    }

    100% {
        left: 0px;
        top: 5%;
    }
}


.platform3 {
    margin-left: 60%;
    margin-top: 0%;
    width: 300px;
    height: 500px;
    animation: updown02 2s infinite;
}


@keyframes updown02 {
    0% {
        left: 0px;
        top: 0%;
    }

    50% {
        left: 0px;
        top: 15%;
    }

    100% {
        left: 0px;
        top: 0%;
    }
}

.platform4 {
    margin-left: 3%;
    margin-top: 5%;
    width: 250px;
    height: 250px;
    animation: leftright02 4s infinite;
}


@keyframes leftright02 {
    0% {
        left: 0%;
        top: 0px;
    }

    50% {
        left: 25%;
        top: 0px;
    }

    100% {
        left: 0%;
        top: 0px;
    }
}

.platform5 {
    margin-top: 20%;
    width: 500px;
    height: 150px;
    animation: myfirst02 3s infinite;
}

@keyframes myfirst02 {
    0% {
        left: 10%;
        top: 0px;
    }

    50% {
        left: 50%;
        top: 0px;
    }

    100% {
        left: 10%;
        top: 0px;
    }
}

.platform6 {
    margin-left: 3%;
    margin-top: 4%;
    width: 200px;
    height: 200px;
    animation: updown03 2s infinite;
}


@keyframes updown03 {
    0% {
        left: 0px;
        top: 0%;
    }

    50% {
        left: 0px;
        top: 8%;
    }

    100% {
        left: 0px;
        top: 0%;
    }
}

.platform7 {
    margin-left: 80%;
    margin-top: -15%;
    width: 200px;
    height: 200px;
    animation: updown04 2s infinite;
}


@keyframes updown04 {
    0% {
        left: 0px;
        top: 0%;
    }

    50% {
        left: 0px;
        top: 8%;
    }

    100% {
        left: 0px;
        top: 0%;
    }
}

.platform71 {
    display: none;

}

.platform72 {
    display: none;

}

.platform73 {
    display: none;

}

/* Congrats 01 */

.congrats {
    width: 100vw;
    height: 100vh;
    position: relative;
    padding-top: 1%;
    background-image: linear-gradient(to left, rgb(0, 255, 145), #337d3e);
    background-size: 300%;
    animation: animatedtext 3s infinite alternate-reverse;
}

@keyframes animatedtext {
    from {
        background-position: 0%;
    }

    to {
        background-position: 100%;
    }
}

#bloc01 {
    position: relative;
    width: 30%;
    height: 50%;
    background-color: black;
    margin-top: -32%;
    margin-left: 5%;
    overflow-wrap: break-word;
}

#bloc01.animate {
    animation: windownb 3s;
    animation-fill-mode: forwards;
}

@keyframes windownb {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 105%;
    }
}

.win {
    position: relative;
    width: 50%;
    height: 30%;
    background-color: #337d3e;
    margin-top: -30%;
    margin-left: 30%;
}

.win.animate {
    animation: windown 5s, win01 3s;
    animation-fill-mode: forwards;
}

@keyframes win01 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(36deg);
    }
}

@keyframes windown {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 108%;
    }
}

p#congratsbloc {
    padding-bottom: 2%;
    padding-top: 7%;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    font-size: 8rem;
    font-weight: 700;
    color: rgb(0, 255, 145);
}

a#nextmission {
    position: relative;
    width: 600px;
    height: 200px;
    margin-top: -5%;
    margin-left: 56%;
    text-align: center;
    border: none;
    background-color: #337d3e;
    color: rgb(0, 255, 145);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    z-index: 30;
}

#nextmission.animate {
    animation: nm01 6s;
    animation-fill-mode: forwards;
}

@keyframes nm01 {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 58%;
    }
}

p#nextmissionbutton {
    padding-top: 10%;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    font-size: 4.5rem;
}

a#nextmission:hover {
    background-color: rgb(0, 255, 145);
    color: #337d3e;
}

/* INTRO 02 */

.title02 {
    position: relative;
    width: 100vw;
    height: auto;
    background-color: rgb(113, 137, 243);
}

h1#samusaran {
    position: static;
    text-align: center;
    padding-top: 5vh;
    padding-left: 15vw;
    padding-right: 15vw;
    color: rgb(28, 47, 154);
    font-size: 7rem;
    text-transform: uppercase;
    font-weight: 500;

}

.hiddenlevel:hover {
    opacity: 1 !important;
}

.info01 {
    position: relative;
    width: 60vw;
    font-size: 1rem;
    color: rgb(28, 47, 154);
    margin-top: 3%;
    margin-right: 4%;
    margin-left: 4%;
    line-height: 100%;
    font-weight: 500;
    column-count: 2;
    column-gap: 3vw;
    column-rule: 1.5px solid rgb(28, 47, 154);
}

.hide {
    opacity: 0;

}

.show {
    opacity: 1;

}

h1#level02 {
    position: static;
    text-align: center;
    margin-top: 15%;
    font-size: 7rem;
    text-transform: uppercase;
    z-index: 1000;
    -webkit-text-stroke: 4px rgb(28, 47, 154);
    /* stroke width and color */
    color: transparent;
    -webkit-font-smoothing: antialiased;
}

p#soustitre02 {
    position: static;
    text-align: center;
    padding-top: 2%;
    padding-left: 15vw;
    padding-right: 15vw;
    font-size: 3rem;
    color: rgb(28, 47, 154);

}

a#play02 {
    width: 200px;
    height: 200px;
    position: relative;
    margin-top: 5%;
    margin-left: 42%;
    margin-bottom: 5%;
    font-size: 3rem;
    text-align: center;
    background-color: rgb(28, 47, 154);
    border-radius: 50%;
    color: rgb(113, 137, 243);
    width: 210px;
    height: 210px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
}

p#game02button {
    padding-top: 25%;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
}

a#play02:hover {
    background-color: rgb(113, 137, 243);
    color: rgb(28, 47, 154);
    border: solid 4px rgb(28, 47, 154);

}

/* GAME 02 */
.game02 {
    position: relative;
    width: 100vw;
    height: 525vh;
    padding-top: 5%;
    z-index: 50;
    background-image: linear-gradient(to bottom, rgb(113, 137, 243), rgb(28, 47, 154));
}


.platform8 {
    width: 200px;
    height: 200px;
    background: rgb(0, 0, 0);
    position: relative;
    animation: horizontal8 2s infinite;
    transition-timing-function: ease-in-out;
}


@keyframes horizontal8 {
    0% {
        left: 0%;
        top: 0px;
    }

    50% {
        left: 50%;
        top: 0px;
    }

    100% {
        left: 0%;
        top: 0px;
    }
}

.platform9 {
    margin-top: 2%;
    margin-left: 2%;
    width: 250px;
    height: 400px;
    background: rgb(0, 0, 0);
    position: relative;
    animation: vertical9 2s infinite;
    transition-timing-function: ease-in-out;
}


@keyframes vertical9 {
    0% {
        left: 0px;
        top: 0%;
    }

    50% {
        left: 0px;
        top: 20%;
    }

    100% {
        left: 0px;
        top: 0%;
    }
}

.platform10 {
    margin-top: -10%;
    margin-left: 35%;
    width: 400px;
    height: 200px;
    background: rgb(0, 0, 0);
    position: relative;
    animation: vert9 2.5s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes vert9 {
    0% {
        right: -35%;
        top: 0px;
    }

    50% {
        right: 10%;
        top: 0%;
    }

    100% {
        right: -35%;
        top: 0px;
    }
}

.platform11 {
    margin-top: 10%;
    margin-left: 35%;
    width: 400px;
    height: 400px;
    background: rgb(0, 0, 0);
    border-radius: 50%;
    position: relative;
    animation: diag11 3s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes diag11 {
    0% {
        left: 0%;
        top: 0%;
    }

    50% {
        left: 35%;
        top: 20%;
    }

    100% {
        left: 0%;
        top: 0%;
    }
}

.platform11:hover {
    animation-play-state: paused;
}

.platform12 {
    margin-top: 20%;
    margin-left: 5%;
    width: 350px;
    height: 200px;
    background: rgb(0, 0, 0);
    position: relative;
    animation: horizontal12 2s infinite;
    transition-timing-function: ease-in-out;
}


@keyframes horizontal12 {
    0% {
        left: 0%;
        top: 0px;
    }

    50% {
        left: 25%;
        top: 0px;
    }

    100% {
        left: 0%;
        top: 0px;
    }
}

.platform13 {
    margin-top: 10%;
    margin-left: 55%;
    width: 350px;
    height: 200px;
    background: rgb(0, 0, 0);
    position: relative;
    animation: vertical13 2s infinite;
    transition-timing-function: ease-in-out;
    transform: translateX(-50%);
}

@keyframes vertical13 {
    0% {
        right: 0%;
        top: 0px;
    }

    50% {
        right: 35%;
        top: 0px;
    }

    100% {
        right: 0%;
        top: 0px;
    }
}

.platform14 {
    margin-top: 0%;
    margin-left: 75%;
    width: 150px;
    height: 400px;
    background: rgb(0, 0, 0);
    position: relative;
    animation: horizontal14 3s infinite;
    transition-timing-function: ease-in-out;
}


@keyframes horizontal14 {
    0% {
        left: 0px;
        top: 0%;
    }

    50% {
        left: 0px;
        top: 10%;
    }

    100% {
        left: 0px;
        top: 0%;
    }
}

.platform15 {
    margin-top: -10%;
    margin-left: 38%;
    width: 250px;
    height: 250px;
    background: rgb(0, 0, 0);
    border-radius: 50%;
    position: relative;
    animation: diag15 2.5s infinite;
    transition-timing-function: ease-in-out;
}


@keyframes diag15 {
    0% {
        right: 0%;
        top: 0%;
    }

    50% {
        right: 34%;
        top: 15%;
    }

    100% {
        right: 0%;
        top: 0%;
    }
}

.platform15:hover {
    animation-play-state: paused;
}

.platform16 {
    margin-top: 23%;
    margin-left: 73%;
    width: 350px;
    height: 200px;
    background: rgb(0, 0, 0);
    position: relative;
    animation: horiz16 2s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horiz16 {
    0% {
        right: 0%;
        top: 0px;
    }

    50% {
        right: 30%;
        top: 0px;
    }

    100% {
        right: 0%;
        top: 0px;
    }
}

.platform17 {
    margin-top: 5%;
    margin-left: 5%;
    width: 300px;
    height: 150px;
    background: rgb(0, 0, 0);
    position: relative;
    animation: horizontal17 3s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal17 {
    0% {
        left: 0%;
        top: 0px;
    }

    50% {
        left: 45%;
        top: 0px;
    }

    100% {
        left: 0%;
        top: 0px;
    }
}

.platform171 {
    margin-top: -12%;
    margin-left: 80%;
    width: 200px;
    height: 300px;
    background: rgb(0, 0, 0);
    position: relative;
    animation: horizontal171 3s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal171 {
    0% {
        left: 0px;
        top: 0%;
    }

    50% {
        left: 0px;
        top: 10%;
    }

    100% {
        left: 0px;
        top: 0%;
    }
}

/* Congrats 02 */

.congrats02 {
    width: 100vw;
    height: 100vh;
    position: relative;
    padding-top: 1%;
    background-image: linear-gradient(to left, rgb(113, 137, 243), rgb(28, 47, 154));
    background-size: 300%;
    animation: animatedtext 3s infinite alternate-reverse;
}

#bloc02 {
    position: relative;
    width: 450px;
    height: 450px;
    background-color: black;
    margin-top: -40%;
    margin-left: 2%;
    border-radius: 50%;
    overflow-wrap: break-word;
}

#bloc02.animate {
    animation: windownb02 5s;
    animation-fill-mode: forwards;
}

@keyframes windownb02 {
    0% {
        left: 0%;
        top: 0%;
    }

    100% {
        left: 30%;
        top: 96.5%;
    }
}

.win02 {
    position: relative;
    width: 50%;
    height: 30%;
    background-color: rgb(28, 47, 154);
    margin-top: -20%;
    margin-left: 50%;
    text-transform: uppercase;
    text-align: center;
    z-index: 25;
}

.win02.animate {
    animation: windown02 5s, win02 3s;
    animation-fill-mode: forwards;
}

@keyframes win02 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-45deg);
    }
}

@keyframes windown02 {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 75%;
    }
}

a#nextmission02 {
    position: relative;
    width: 600px;
    height: 200px;
    margin-top: -30%;
    margin-left: 2%;
    text-align: center;
    border: none;
    background-color: rgb(28, 47, 154);
    color: rgb(113, 137, 243);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    z-index: 30;
}

p#congratsbloc02 {
    padding-bottom: 2%;
    padding-top: 7%;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    font-size: 8rem;
    font-weight: 700;
    color: rgb(113, 137, 243);
}

#nextmission02.animate {
    animation: nm02 4s, nmrotation 3s;
    animation-fill-mode: forwards;
}

@keyframes nmrotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(30deg);
    }
}


@keyframes nm02 {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 90%;
    }
}

a#nextmission02:hover {
    background-color: rgb(113, 137, 243);
    color: rgb(28, 47, 154);
}

p#nextmissionbutton02 {
    padding-top: 10%;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    font-size: 4.5rem;
}

/* Intro03 */

.title03 {
    position: relative;
    width: 100vw;
    height: auto;
    padding-top: 2%;
    background-color: rgb(252, 221, 109);
}

h1#adventure {
    position: static;
    text-align: center;
    padding-top: 0vh;
    padding-left: 15vw;
    padding-right: 15vw;
    color: rgb(249, 62, 0);
    font-size: 7rem;
    text-transform: uppercase;
    font-weight: 500;

}

.info02 {
    position: relative;
    width: 60vw;
    font-size: 1rem;
    color: rgb(249, 62, 0);
    margin-top: 3%;
    margin-right: 4%;
    margin-left: 4%;
    line-height: 100%;
    font-weight: 500;
    column-count: 2;
    column-gap: 3vw;
    column-rule: 1.5px solid rgb(249, 62, 0);
}

h1#level03 {
    position: static;
    text-align: center;
    margin-top: 15%;
    margin-left: 15%;
    margin-right: 15%;
    font-size: 7rem;
    text-transform: uppercase;
    z-index: 1000;
    -webkit-text-stroke: 4px rgb(249, 62, 0);
    /* stroke width and color */
    color: transparent;
    -webkit-font-smoothing: antialiased;
}

p#soustitre03 {
    position: static;
    text-align: center;
    padding-top: 2%;
    padding-left: 15vw;
    padding-right: 15vw;
    font-size: 3rem;
    color: rgb(249, 62, 0);

}

a#play03 {
    width: 200px;
    height: 200px;
    position: relative;
    margin-top: 5%;
    margin-left: 42%;
    margin-bottom: 5%;
    font-size: 3rem;
    text-align: center;
    background-color: rgb(249, 62, 0);
    border-radius: 50%;
    color: rgb(252, 221, 109);
    width: 210px;
    height: 210px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
}

p#game03button {
    padding-top: 28%;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
}

a#play03:hover {
    color: rgb(249, 62, 0);
    background-color: rgb(252, 221, 109);
    border: solid 4px rgb(249, 62, 0);
}


/* GAME 03 */

.game03 {
    position: relative;
    width: 100vw;
    height: 600vh;
    z-index: 50;
    background-image: linear-gradient(to bottom, rgb(252, 221, 109), rgb(249, 62, 0));
}

.platform18 {
    margin-top: 10%;
    margin-left: 5%;
    width: 300px;
    height: 300px;
    fill: rgb(0, 0, 0);
    position: relative;
    animation: rotation 2s infinite, horizontal18 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal18 {
    0% {
        left: 5%;
        top: 0px;
    }

    50% {
        left: 60%;
        top: 0px;
    }

    100% {
        left: 5%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(350deg);
    }
}

/* rectangle */
.platform19 {
    margin-top: 5%;
    margin-left: 5%;
    width: 200px;
    height: 75px;
    background: rgb(0, 0, 0);
    position: relative;
    transition-timing-function: ease-in-out;
    animation: vertical19 2s infinite;
}


@keyframes vertical19 {
    0% {
        left: 0px;
        top: 0%;
    }

    50% {
        left: 0px;
        top: 5%;
    }

    100% {
        left: 0px;
        top: 0%;
    }
}

.platform20 {
    margin-top: 5%;
    margin-left: 80%;
    width: 300px;
    height: 300px;
    fill: rgb(0, 0, 0);
    position: relative;
    animation: rotation 1.75s infinite, horizontal20 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal20 {
    0% {
        right: 5%;
        top: 0px;
    }

    50% {
        right: 55%;
        top: 0px;
    }

    100% {
        right: 5%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-350deg);
    }
}


.platform21 {
    margin-top: 5%;
    margin-left: 2%;
    width: 300px;
    height: 300px;
    /* background: rgb(0, 0, 0); */
    fill: rgb(0, 0, 0);
    /* border-radius: 50%; */
    position: relative;
    animation: rotation 1.75s infinite, horizontal21 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal21 {
    0% {
        left: 0%;
        top: 0px;
    }

    50% {
        left: 45%;
        top: 0px;
    }

    100% {
        left: 0%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(350deg);
    }
}

.platform211 {
    margin-top: 5%;
    margin-left: 35%;
    width: 400px;
    height: 400px;
    background: rgb(0, 0, 0);
    border-radius: 50%;
    position: relative;
    animation: diag211 3s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes diag211 {
    0% {
        left: 0%;
        top: 0%;
    }

    50% {
        left: 25%;
        top: 15%;
    }

    100% {
        left: 0%;
        top: 0%;
    }
}

.platform211:hover {
    animation-play-state: paused;
}

.platform2111 {
    margin-top: -25%;
    margin-left: 5%;
    width: 200px;
    height: 75px;
    background: rgb(0, 0, 0);
    position: relative;
    transition-timing-function: ease-in-out;
    animation: vertical2111 2s infinite;
}

.platform2111:hover {
    animation-play-state: paused;
    width: 400px;
    height: auto;
}

@keyframes vertical2111 {
    0% {
        left: 0px;
        top: 0%;
    }

    50% {
        left: 0px;
        top: 7%;
    }

    100% {
        left: 0px;
        top: 0%;
    }
}

.platform22 {
    margin-top: 40%;
    margin-left: 2%;
    width: 300px;
    height: 300px;
    fill: rgb(0, 0, 0);
    position: relative;
    animation: rotation 1.75s infinite, horizontal22 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal22 {
    0% {
        left: 0%;
        top: 0px;
    }

    50% {
        left: 32%;
        top: 0px;
    }

    100% {
        left: 0%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-350deg);
    }
}

.platform23 {
    margin-top: 5%;
    margin-left: 2%;
    width: 200px;
    height: 75px;
    background: rgb(0, 0, 0);
    position: relative;
    transition-timing-function: ease-in-out;
    animation: vertical23 2s infinite;
}

@keyframes vertical23 {
    0% {
        left: 0%;
        top: 0px;
    }

    50% {
        left: 35%;
        top: 0px;
    }

    100% {
        left: 0%;
        top: 0px;
    }
}

.platform233 {
    margin-top: 5%;
    margin-left: 85%;
    width: 200px;
    height: 75px;
    background: rgb(0, 0, 0);
    position: relative;
    transition-timing-function: ease-in-out;
    animation: vertical233 2s infinite;
}

@keyframes vertical233 {
    0% {
        right: 0%;
        top: 0px;
    }

    50% {
        right: 30%;
        top: 0px;
    }

    100% {
        right: 0%;
        top: 0px;
    }
}


.platform2333 {
    margin-top: 2%;
    margin-left: 32%;
    width: 200px;
    height: 200px;
    background: rgb(0, 0, 0);
    border-radius: 50%;
    position: relative;
    animation: diag2333 2.5s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes diag2333 {
    0% {
        right: 0%;
        top: 0%;
    }

    50% {
        right: 25%;
        top: 10%;
    }

    100% {
        right: 0%;
        top: 0%;
    }
}

.platform211:hover {
    animation-play-state: paused;
}

.platform24 {
    margin-top: 5%;
    margin-left: 65%;
    width: 300px;
    height: 300px;
    fill: rgb(0, 0, 0);
    position: relative;
    animation: rotation 1.75s infinite, horizontal24 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal24 {
    0% {
        right: 0%;
        top: 0px;
    }

    50% {
        right: 40%;
        top: 0px;
    }

    100% {
        right: 0%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-350deg);
    }
}

.platform25 {
    margin-top: 5%;
    margin-left: 80%;
    width: 300px;
    height: 300px;
    fill: rgb(0, 0, 0);
    position: relative;
    animation: rotation 1.75s infinite, horizontal25 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal25 {
    0% {
        right: 0%;
        top: 0px;
    }

    50% {
        right: 40%;
        top: 0px;
    }

    100% {
        right: 0%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-350deg);
    }
}

.platform26 {
    margin-top: 2%;
    margin-left: 5%;
    width: 300px;
    height: 300px;
    fill: rgb(0, 0, 0);
    position: relative;
    animation: rotation 2s infinite, horizontal26 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal26 {
    0% {
        left: 0%;
        top: 0px;
    }

    50% {
        left: 40%;
        top: 0px;
    }

    100% {
        left: 0%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-350deg);
    }
}

.platform27 {
    margin-top: 3%;
    margin-left: 75%;
    width: 300px;
    height: 300px;
    fill: rgb(0, 0, 0);
    position: relative;
    animation: rotation 2s infinite, horizontal27 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal27 {
    0% {
        right: 0%;
        top: 0px;
    }

    50% {
        right: 35%;
        top: 0px;
    }

    100% {
        right: 0%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-350deg);
    }
}

/* Congrats 03 */

.congrats03 {
    width: 100vw;
    height: 100vh;
    position: relative;
    padding-top: 1%;
    background-image: linear-gradient(to left, rgb(252, 221, 109), rgb(249, 62, 0));
    background-size: 300%;
    animation: animatedtext 3s infinite alternate-reverse;
}

#bloc03 {
    position: relative;
    width: 450px;
    height: 450px;
    margin-top: -35%;
    margin-left: 65%;
    overflow-wrap: break-word;
    fill: rgb(0, 0, 0);
}

p#congratsbloc03 {
    padding-bottom: 2%;
    padding-top: 7%;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    font-size: 8rem;
    font-weight: 700;
    color: rgb(252, 221, 109);
}


#bloc03.animate {
    animation: windownb03 3s;
    animation-fill-mode: forwards;
}

@keyframes windownb03 {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 100%;
    }
}

.win03 {
    position: relative;
    width: 50%;
    height: 30%;
    background-color: rgb(249, 62, 0);
    margin-top: -22%;
    margin-left: 30%;
    text-transform: uppercase;
    text-align: center;
}

.win03.animate {
    animation: windown03 5s, win03 3s;
    animation-fill-mode: forwards;
}

@keyframes win03 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-45deg);
    }
}

@keyframes windown03 {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 83%;
    }
}

a#nextmission03 {
    position: relative;
    width: 600px;
    height: 200px;
    margin-top: -32%;
    margin-left: 3%;
    text-align: center;
    border: none;
    background-color: rgb(249, 62, 0);
    color: rgb(252, 221, 109);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    z-index: 30;
}

#nextmission03.animate {
    animation: nm03 8s, nmrotation03 6s;
    animation-fill-mode: forwards;
}

@keyframes nmrotation03 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-28deg);
    }
}

@keyframes nm03 {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 73%;
    }
}

a#nextmission03:hover {
    background-color: rgb(252, 221, 109);
    color: rgb(249, 62, 0);
}



p#nextmissionbutton03 {
    padding-top: 10%;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    font-size: 4.5rem;
}

/* Intro04 */

.title04 {
    position: relative;
    width: 100vw;
    height: auto;
    padding-top: 2%;
    background-color: rgb(222, 243, 242);
}

h1#final {
    position: static;
    text-align: center;
    padding-top: 0vh;
    padding-left: 15vw;
    padding-right: 15vw;
    color: rgb(114, 192, 241);
    font-size: 7rem;
    text-transform: uppercase;
    font-weight: 500;

}

.info03 {
    position: relative;
    width: 60vw;
    font-size: 1rem;
    color: rgb(114, 192, 241);
    margin-top: 3%;
    margin-right: 4%;
    margin-left: 4%;
    line-height: 100%;
    font-weight: 500;
    column-count: 2;
    column-gap: 3vw;
    column-rule: 1.5px solid rgb(114, 192, 241);
}

h1#level04 {
    position: static;
    text-align: center;
    margin-top: 15%;
    margin-left: 15%;
    margin-right: 15%;
    font-size: 7rem;
    text-transform: uppercase;
    z-index: 1000;
    -webkit-text-stroke: 4px rgb(114, 192, 241);
    /* stroke width and color */
    color: transparent;
    -webkit-font-smoothing: antialiased;

}

p#soustitre04 {
    position: static;
    text-align: center;
    padding-top: 2%;
    padding-left: 15vw;
    padding-right: 15vw;
    font-size: 3rem;
    color: rgb(114, 192, 241);
}

a#play04 {
    width: 210px;
    height: 210px;
    position: relative;
    margin-top: 5%;
    margin-left: 43%;
    margin-bottom: 5%;
    font-size: 3rem;
    text-align: center;
    background-color: rgb(114, 192, 241);
    border-radius: 50%;
    color: rgb(222, 243, 242);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
}

a#play04:hover {
    color: rgb(114, 192, 241);
    background-color: rgb(222, 243, 242);
    border: solid 4px rgb(114, 192, 241);
}

p#game04button {
    padding-top: 28%;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
}

/* game04 */
.game04 {
    position: relative;
    width: 100vw;
    height: 700vh;
    z-index: 50;
    background-image: linear-gradient(to bottom, rgb(198, 235, 234), rgb(141, 205, 246));
}

.platform31 {
    margin-top: 0%;
    margin-left: 35%;
    width: 900px;
    height: 100px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform32 {
    margin-top: 0%;
    margin-left: 3%;
    width: 300px;
    height: 200px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform33 {
    margin-top: -17%;
    margin-left: 30%;
    width: 50px;
    height: 500px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform34 {
    margin-top: -10%;
    margin-left: 10%;
    width: 250px;
    height: 250px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform35 {
    margin-top: 4%;
    margin-left: 2%;
    width: 800px;
    height: 250px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform36 {
    margin-top: -30%;
    margin-left: 63%;
    width: 300px;
    height: 600px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform37 {
    margin-top: -30%;
    margin-left: 90%;
    width: 100px;
    height: 600px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform38 {
    margin-top: 0%;
    margin-left: 20%;
    width: 900px;
    height: 450px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform39 {
    margin-top: -30%;
    margin-left: 4%;
    width: 150px;
    height: 150px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform40 {
    margin-top: 0%;
    margin-left: 90%;
    width: 100px;
    height: 150px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform41 {
    margin-top: 12%;
    margin-left: 7%;
    width: 652px;
    height: 150px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform42 {
    margin-top: 0%;
    margin-left: 58%;
    width: 500px;
    height: 150px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform43 {
    margin-top: 0%;
    margin-left: 5%;
    width: 600px;
    height: 500px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform44 {
    margin-top: -30%;
    margin-left: 55%;
    width: 200px;
    height: 300px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform45 {
    margin-top: -10%;
    margin-left: 73%;
    width: 200px;
    height: 300px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform29 {
    margin-top: 5%;
    margin-left: 70%;
    width: 300px;
    height: 300px;
    fill: rgb(0, 0, 0);
    position: relative;
    animation: rotation 1.75s infinite, horizontal29 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal29 {
    0% {
        right: 40%;
        top: 0px;
    }

    50% {
        right: 0px;
        top: 0px;
    }

    100% {
        right: 40%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-350deg);
    }
}

.platform30 {
    margin-top: 5%;
    margin-left: 45%;
    width: 300px;
    height: 300px;
    fill: rgb(0, 0, 0);
    position: relative;
    animation: rotation 1.75s infinite, horizontal30 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal30 {
    0% {
        right: 0%;
        top: 0px;
    }

    50% {
        right: 40%;
        top: 0px;
    }

    100% {
        right: 0%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-350deg);
    }
}

.platform48 {
    margin-top: 3%;
    margin-left: 40%;
    width: 700px;
    height: 100px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform49 {
    margin-top: 5%;
    margin-left: 2%;
    width: 700px;
    height: 100px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform50 {
    margin-top: -7%;
    margin-left: 55%;
    width: 200px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform51 {
    margin-top: -20%;
    margin-left: 73%;
    width: 350px;
    height: 150px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform52 {
    position: relative;
    margin-top: -4%;
    margin-left: 2%;
    width: 200px;
    height: 100px;
    animation: platform52 2s infinite;
}


@keyframes platform52 {
    0% {
        left: 0%;
        top: 0px;
    }

    50% {
        left: 35%;
        top: 0px;
    }

    100% {
        left: 0%;
        top: 0px;
    }
}

.platform53 {
    margin-top: 9%;
    margin-left: 80%;
    width: 250px;
    height: 150px;
    animation: platform53 2s infinite;
}


@keyframes platform53 {
    0% {
        right: 0%;
        top: 0px;
    }

    50% {
        right: 35%;
        top: 0px;
    }

    100% {
        right: 0%;
        top: 0px;
    }
}

.platform54 {
    margin-top: -15%;
    margin-left: 10%;
    width: 150px;
    height: 250px;
    animation: platform54 2s infinite;
}


@keyframes platform54 {
    0% {
        right: 0px;
        top: 0%;
    }

    50% {
        right: 0px;
        top: 10%;
    }

    100% {
        right: 0px;
        top: 0%;
    }
}

.platform55 {
    margin-top: 0%;
    margin-left: 25%;
    width: 250px;
    height: 350px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform56 {
    margin-top: -25%;
    margin-left: 75%;
    width: 300px;
    height: 300px;
    fill: rgb(0, 0, 0);
    position: relative;
    animation: rotation 1.75s infinite, horizontal56 1.75s infinite;
    transition-timing-function: ease-in-out;
}

@keyframes horizontal56 {
    0% {
        right: 0%;
        top: 0px;
    }

    50% {
        right: 27%;
        top: 0px;
    }

    100% {
        right: 0%;
        top: 0px;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-350deg);
    }
}

.platform57 {
    margin-top: 5%;
    margin-left: 25%;
    width: 450px;
    height: 200px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform58 {
    margin-top: -14%;
    margin-left: 60%;
    width: 250px;
    height: 200px;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.platform59 {
    margin-top: -14%;
    margin-left: 81%;
    width: 213px;
    height: 200px;
    background-color: rgb(255, 255, 255);
    position: relative;
}



/* Congrats 04 */

.congrats04 {
    width: 100vw;
    height: 100vh;
    position: relative;
    padding-top: 1%;
    background-image: linear-gradient(to left, rgb(198, 235, 234), rgb(141, 205, 246));
    background-size: 300%;
    animation: animatedtext 3s infinite alternate-reverse;
}

#bloc04 {
    position: relative;
    width: 450px;
    height: 350px;
    background-color: rgb(255, 255, 255);
    margin-top: -40%;
    margin-left: 5%;
    overflow-wrap: break-word;
}

#bloc04.animate {
    animation: windownb04 3s;
    animation-fill-mode: forwards;
}

@keyframes windownb04 {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 120%;
    }
}

p#congratsbloc04 {
    padding-bottom: 2%;
    padding-top: 7%;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    font-size: 8rem;
    font-weight: 700;
    color: rgb(198, 235, 234);
}

.win04 {
    position: relative;
    width: 50%;
    height: 30%;
    background-color: rgb(141, 205, 246);
    margin-top: -25%;
    margin-left: 5%;
}

.win04.animate {
    animation: windown04 4s;
    animation-fill-mode: forwards;
}


@keyframes windown04 {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 92%;
    }
}

a#nextmission04 {
    position: relative;
    width: 600px;
    height: 200px;
    margin-top: -40%;
    margin-left: 48%;
    font-size: 2rem;
    text-align: center;
    border: none;
    background-color: rgb(141, 205, 246);
    color: rgb(198, 235, 234);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    z-index: 30;
}

#nextmission04.animate {
    animation: nm04 5s, nmrotation04 4s;
    animation-fill-mode: forwards;
}

@keyframes nmrotation04 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(70deg);
    }
}


@keyframes nm04 {
    0% {
        left: 0px;
        top: 0%;
    }

    100% {
        left: 0px;
        top: 100%;
    }
}

a#nextmission04:hover {
    background-color: rgb(198, 235, 234);
    color: rgb(141, 205, 246);
}

p#nextmissionbutton04 {
    padding-top: 10%;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    font-size: 4.5rem;
}


/* FINAL */
.goodjob {
    position: relative;
    width: 100vw;
    height: auto;
    padding-top: 2%;
    background-image: linear-gradient(to left, rgb(0, 255, 145), rgb(141, 205, 246));
    animation: animatedgradient 5s infinite alternate-reverse;
    background-size: 300%;
    background-position: -100%;
}

h1.level05 {
    position: static;
    text-align: center;
    padding-top: 5vh;
    padding-left: 15vw;
    padding-right: 15vw;
    /* color: #b8b8b8; */
    font-size: 20rem;
    text-transform: uppercase;
    font-weight: 500;
    -webkit-text-stroke: 5px #b8b8b8;
    /* stroke width and color */
    color: transparent;
    -webkit-font-smoothing: antialiased;
}

.safe {
    width: 100vw;
    height: auto;
}

p.samussafe {
    position: static;
    text-align: center;
    padding-top: 5vh;
    padding-left: 15vw;
    padding-right: 15vw;
    color: #b8b8b8;
    font-size: 5rem;
    text-transform: uppercase;
    font-weight: 500;
}

.play05 {

    margin-left: 60%;
    background-color: #000000;
}

a#play05 {
    position: relative;
    width: 350px;
    height: 125px;
    font-size: 5rem;
    margin-top: 5%;
    margin-left: 40%;
    margin-bottom: 5%;
    text-align: center;
    color: #ffffff;
    background-color: #b8b8b8;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
}

p#game05button {
    padding-top: 6.5%;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
}

a#play05:hover {
    background-color: #ffffff;
    color: #b8b8b8;

}

p#final {
    font-size: 20rem;
    animation: rotate05 5s infinite;
    margin-top: -30%;
    padding-left: 65%;
    padding-bottom: 25%;
}

@keyframes rotate05 {
    0% {
        transform: rotate3d(2, -1, -1, -0.2turn);
    }

    50% {
        transform: rotate3d(1, 1, -1, 2turn);
    }

    0% {
        transform: rotate3d(2, -1, -1, -0.2turn);
    }
}


@media only screen and (min-width: 1500px) {
    body {
        width: 100vw;
        height: auto;
        font-family: 'Space Grotesk', sans-serif;
    }

    html {
        cursor: none;
    }

    .cursor {
        position: fixed;
        border-radius: 50%;
        transform: translateX(-50%) translateY(-50%);
        pointer-events: none;
        left: -100px;
        top: 50%;
        background: transparent;
        z-index: 10000;
        border: none;
        height: 50px;
        width: 50px;
        transition: all 0ms ease-out;
        border: solid 5px #b8b8b8;
        /* stroke width and color */
    }

    /* WELCOME PAGE large screen */
    div#background-home {
        width: 100vw;
        height: 100vh;
        background-image: linear-gradient(to left, rgb(255, 27, 255), rgb(27, 255, 251));
        animation: animatedgradient 3s infinite alternate-reverse;
        background-size: 300%;
        background-position: -100%;
    }

    @keyframes animatedgradient {
        from {
            background-position: 0%;
        }

        to {
            background-position: 100%;
        }
    }

    .title-S {
        position: static;
        Transform: translateX(-50%);
        margin-left: 43%;
        padding-top: 4vh;
        text-align: center;
        font-size: 25rem;
        font-weight: 600;
        text-transform: uppercase;
        -webkit-text-stroke: 8px #b8b8b8;
        /* stroke width and color */
        color: transparent;
        -webkit-font-smoothing: antialiased;
    }

    a#enter {
        position: absolute;
        width: 450px;
        height: 175px;
        font-size: 8rem;
        Transform: translateX(-50%);
        margin-top: 20vh;
        margin-left: 50%;
        text-align: center;
        background-color: #b8b8b8;
        border: none;
        color: white;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        transition-duration: 0.4s;
    }

    a#enter:hover {
        background-color: #ffffff;
        color: #b8b8b8;
    }

    p#enterbutton {
        margin-top: 5%;
    }


    /* Intro 01 large screen*/

    .title {
        background-color: rgb(0, 255, 145);
        width: 100vw;
        height: 100vh;
    }

    h1.level {
        position: static;
        text-align: center;
        padding-top: 2.5vh;
        padding-left: 15vw;
        padding-right: 15vw;
        font-size: 12rem;
        text-transform: uppercase;
        -webkit-text-stroke: 6px #337d3e;
        color: transparent;
        -webkit-font-smoothing: antialiased;
    }

    p.soustitre {
        position: static;
        text-align: center;
        padding-top: 2%;
        padding-left: 15vw;
        padding-right: 15vw;
        font-size: 4rem;
        color: #337d3e;

    }

    a#play {
        position: relative;
        margin-top: 5%;
        margin-left: 50%;
        font-size: 4rem;
        text-align: center;
        background-color: #337d3e;
        border: none;
        color: rgb(0, 255, 145);
        width: 450px;
        height: 150px;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        transition-duration: 0.4s;
        animation: platform0 3s infinite;
        transform: translateX(-50%);
    }

    a#play:hover {
        background-color: rgb(0, 255, 145);
        border: solid 6px #337d3e;
        color: #337d3e;

    }

    @keyframes platform0 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 17%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    p#game01button {
        padding-top: 9%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
    }

    /* Game01 wide screen*/

    .game {
        position: relative;
        width: 100vw;
        height: 325vh;
        padding-top: 3%;
        background-image: linear-gradient(to bottom, rgb(0, 255, 145), #337d3e);
        z-index: 50;
    }

    .ptf {
        background: rgb(0, 0, 0);
        position: relative;
        transition-timing-function: ease-in-out;
    }

    .platform1 {
        margin-top: 0%;
        width: 600px;
        height: 200px;
        margin-left: 5%;
        animation: myfirst 3s infinite;
    }

    @keyframes myfirst {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 60%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform2 {
        margin-left: 2%;
        margin-top: 5%;
        width: 400px;
        height: 400px;
        animation: updown01 2.5s infinite;
    }

    @keyframes updown01 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 20%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }


    .platform3 {
        margin-left: 50%;
        margin-top: -10%;
        width: 470px;
        height: 600px;
        animation: updown02 2s infinite;
    }

    @keyframes updown02 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 15%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform4 {
        margin-left: 2%;
        margin-top: 30%;
        width: 300px;
        height: 300px;
        animation: leftright02 3s infinite;
    }

    @keyframes leftright02 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 28%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform5 {
        margin-top: -5%;
        margin-left: 65%;
        width: 600px;
        height: 300px;
        animation: myfirst02 2.5s infinite;
    }

    @keyframes myfirst02 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 17%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    .platform6 {
        margin-left: 2;
        margin-top: -5%;
        width: 400px;
        height: 500px;
        animation: updown03 2s infinite;
    }

    @keyframes updown03 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 8%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform7 {
        margin-left: 40%;
        margin-top: -15%;
        width: 700px;
        height: 200px;
        animation: updown04 3s infinite;
    }


    @keyframes updown04 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 8%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform71 {
        margin-left: 25%;
        margin-top: 24%;
        width: 750px;
        height: 200px;
        animation: leftright71 2.5s infinite;
    }


    @keyframes leftright71 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 35%;
            top: 0px;
        }

        100% {
            left: 0px;
            top: 0px;
        }
    }

    .platform72 {
        margin-left: 15%;
        margin-top: 5%;
        width: 400px;
        height: 400px;
        animation: leftright72 2.5s infinite;
    }


    @keyframes leftright72 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 8%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform73 {
        margin-left: 50%;
        margin-top: -20%;
        width: 450px;
        height: 600px;
        animation: leftright73 2.5s infinite;
    }


    @keyframes leftright73 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 30%;
            top: 0px;
        }

        100% {
            right: 0px;
            top: 0px;
        }
    }

    /* Congrats 01 wide */

    .congrats {
        width: 100vw;
        height: 100vh;
        position: relative;
        padding-top: 1%;
        background-image: linear-gradient(to left, rgb(0, 255, 145), #337d3e);
        background-size: 300%;
        animation: animatedtext 3s infinite alternate-reverse;
    }

    @keyframes animatedtext {
        from {
            background-position: 0%;
        }

        to {
            background-position: 100%;
        }
    }

    #bloc01 {
        position: relative;
        width: 30%;
        height: 50%;
        background-color: black;
        margin-top: -32%;
        margin-left: 5%;
        overflow-wrap: break-word;
    }

    #bloc01.animatewide {
        animation: windownb 3s;
        animation-fill-mode: forwards;
    }

    @keyframes windownb {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 100%;
        }
    }

    .win {
        position: relative;
        width: 1000px;
        height: 300px;
        background-color: #337d3e;
        margin-top: -30%;
        margin-left: 32%;
    }

    .win.animatewide {
        animation: windown 5s, win01 3s;
        animation-fill-mode: forwards;
    }

    @keyframes win01 {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(33deg);
        }
    }

    @keyframes windown {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 102%;
        }
    }

    p#congratsbloc {
        padding-bottom: 2%;
        padding-top: 7%;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        font-size: 10rem;
        font-weight: 700;
        color: rgb(0, 255, 145);
    }

    a#nextmission {
        position: relative;
        width: 600px;
        height: 200px;
        margin-top: -6%;
        margin-left: 66%;
        text-align: center;
        border: none;
        background-color: #337d3e;
        color: rgb(0, 255, 145);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        z-index: 30;
    }

    #nextmission.animatewide {
        animation: nm01 6s;
        animation-fill-mode: forwards;
    }

    @keyframes nm01 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 70%;
        }
    }

    p#nextmissionbutton {
        padding-top: 10%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
        font-size: 4.5rem;
    }

    a#nextmission:hover {
        background-color: rgb(0, 255, 145);
        color: #337d3e;
    }


    /* INTRO 02 wide*/

    .title02 {
        position: relative;
        width: 100vw;
        height: auto;
        background-color: rgb(113, 137, 243);
    }

    h1#samusaran {
        position: static;
        text-align: center;
        padding-top: 2.5vh;
        padding-left: 15vw;
        padding-right: 15vw;
        color: rgb(28, 47, 154);
        font-size: 12rem;
        text-transform: uppercase;
        font-weight: 500;
        -webkit-font-smoothing: antialiased;
    }

    .hiddenlevel:hover {
        opacity: 1 !important;
    }

    .info01 {
        position: relative;
        width: 60vw;
        font-size: 1.5rem;
        color: rgb(28, 47, 154);
        margin-top: 3%;
        margin-right: 4%;
        margin-left: 4%;
        line-height: 100%;
        font-weight: 500;
        column-count: 2;
        column-gap: 3vw;
        column-rule: 2.75px solid rgb(28, 47, 154);
    }

    .hide {
        opacity: 0;

    }

    .show {
        opacity: 1;

    }

    h1#level02 {
        position: static;
        text-align: center;
        margin-top: 8%;
        font-size: 12rem;
        text-transform: uppercase;
        z-index: 1000;
        -webkit-text-stroke: 4px rgb(28, 47, 154);
        color: transparent;
        -webkit-font-smoothing: antialiased;
    }

    p#soustitre02 {
        position: static;
        text-align: center;
        padding-top: 2%;
        padding-left: 15vw;
        padding-right: 15vw;
        font-size: 4rem;
        color: rgb(28, 47, 154);

    }

    a#play02 {
        width: 300px;
        height: 300px;
        position: relative;
        margin-top: 5%;
        margin-left: 42%;
        margin-bottom: 5%;
        font-size: 4rem;
        text-align: center;
        background-color: rgb(28, 47, 154);
        border-radius: 50%;
        color: rgb(113, 137, 243);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
    }

    p#game02button {
        padding-top: 28%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
    }

    a#play02:hover {
        background-color: rgb(113, 137, 243);
        color: rgb(28, 47, 154);
        border: solid 4px rgb(28, 47, 154);
    }

    /* Game02 wide */
    .platform16 {
        margin-top: 30%;
        margin-left: 73%;
        width: 450px;
        height: 300px;
        background: rgb(0, 0, 0);
        position: relative;
        animation: horiz16 2s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horiz16 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 35%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    .platform17 {
        margin-top: 5%;
        margin-left: 2%;
        width: 400px;
        height: 200px;
        background: rgb(0, 0, 0);
        position: relative;
        animation: horizontal17 2.2s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal17 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 45%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform171 {
        margin-top: 3%;
        margin-left: 3%;
        width: 350px;
        height: 500px;
        position: relative;
        animation: horizontal171 2s infinite;
        transition-timing-function: ease-in-out;
        background-color: rgb(0, 0, 0);
    }

    @keyframes horizontal171 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 10%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform172 {
        margin-top: -12%;
        margin-left: 75%;
        width: 400px;
        height: 200px;
        position: relative;
        animation: horizontal172 2.25s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal172 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 45%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    .platform173 {
        margin-top: 5%;
        margin-left: 30%;
        width: 1000px;
        height: 150px;
        background: rgb(0, 0, 0);
        position: relative;
        animation: horizontal173 2s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal173 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 12%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    /* Congrats 02 wide*/

    .congrats02 {
        width: 100vw;
        height: 100vh;
        position: relative;
        padding-top: 1%;
        background-image: linear-gradient(to left, rgb(113, 137, 243), rgb(28, 47, 154));
        background-size: 300%;
        animation: animatedtext 3s infinite alternate-reverse;
    }

    #bloc02 {
        position: relative;
        width: 600px;
        height: 600px;
        background-color: black;
        margin-top: -40%;
        margin-left: 2%;
        border-radius: 50%;
        overflow-wrap: break-word;
    }

    #bloc02.animate {
        animation: windownb02 5s;
        animation-fill-mode: forwards;
    }

    @keyframes windownb02 {
        0% {
            left: 0%;
            top: 0%;
        }

        100% {
            left: 25.5%;
            top: 102%;
        }
    }

    .win02 {
        position: relative;
        width: 50%;
        height: 30%;
        background-color: rgb(28, 47, 154);
        margin-top: -20%;
        margin-left: 50%;
        text-transform: uppercase;
        text-align: center;
        z-index: 25;
    }

    .win02.animate {
        animation: windown02 5s, win02 3s;
        animation-fill-mode: forwards;
    }

    @keyframes win02 {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-45deg);
        }
    }

    @keyframes windown02 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 75%;
        }
    }

    a#nextmission02 {
        position: relative;
        width: 600px;
        height: 200px;
        margin-top: -5%;
        margin-left: 2%;
        text-align: center;
        border: none;
        background-color: rgb(28, 47, 154);
        color: rgb(113, 137, 243);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        z-index: 30;
    }

    p#congratsbloc02 {
        padding-bottom: 2%;
        padding-top: 7%;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        font-size: 10rem;
        font-weight: 700;
        color: rgb(113, 137, 243);
    }

    #nextmission02.animate {
        animation: nm02 4s, nmrotation 3s;
        animation-fill-mode: forwards;
    }

    @keyframes nmrotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(30deg);
        }
    }


    @keyframes nm02 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 90%;
        }
    }

    a#nextmission02:hover {
        background-color: rgb(113, 137, 243);
        color: rgb(28, 47, 154);
    }

    p#nextmissionbutton02 {
        padding-top: 10%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
        font-size: 4.5rem;
    }

    /* intro03 wide */

    .title03 {
        position: relative;
        width: 100vw;
        height: auto;
        padding-top: 2%;
        background-color: rgb(252, 221, 109);
    }

    h1#adventure {
        position: static;
        text-align: center;
        padding-top: 0vh;
        padding-left: 15vw;
        padding-right: 15vw;
        color: rgb(249, 62, 0);
        font-size: 12rem;
        text-transform: uppercase;
        font-weight: 500;

    }

    .info02 {
        position: relative;
        width: 60vw;
        font-size: 1.5rem;
        color: rgb(249, 62, 0);
        margin-top: 3%;
        margin-right: 4%;
        margin-left: 4%;
        line-height: 100%;
        font-weight: 500;
        column-count: 2;
        column-gap: 3vw;
        column-rule: 2.75px solid rgb(249, 62, 0);
    }

    h1#level03 {
        position: static;
        text-align: center;
        margin-top: 5%;
        margin-left: 15%;
        margin-right: 15%;
        font-size: 12rem;
        text-transform: uppercase;
        z-index: 1000;
        -webkit-text-stroke: 4px rgb(249, 62, 0);
        /* stroke width and color */
        color: transparent;
        -webkit-font-smoothing: antialiased;
    }

    p#soustitre03 {
        position: static;
        text-align: center;
        padding-top: 2%;
        padding-left: 15vw;
        padding-right: 15vw;
        font-size: 4.5rem;
        color: rgb(249, 62, 0);

    }

    a#play03 {
        width: 300px;
        height: 300px;
        position: relative;
        margin-top: 4%;
        margin-left: 42%;
        margin-bottom: 5%;
        font-size: 4.5rem;
        text-align: center;
        background-color: rgb(249, 62, 0);
        border-radius: 50%;
        color: rgb(252, 221, 109);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
    }

    p#game03button {
        padding-top: 28%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
    }

    a#play03:hover {
        color: rgb(249, 62, 0);
        background-color: rgb(252, 221, 109);
        border: solid 4px rgb(249, 62, 0);
    }

    /* Game03 wide */
    .game03 {
        position: relative;
        width: 100vw;
        height: 610vh;
        z-index: 50;
        background-image: linear-gradient(to bottom, rgb(252, 221, 109), rgb(249, 62, 0));
    }

    .platform18 {
        margin-top: 10%;
        margin-left: 5%;
        width: 400px;
        height: 400px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 2s infinite, horizontal18 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal18 {
        0% {
            left: 5%;
            top: 0px;
        }

        50% {
            left: 60%;
            top: 0px;
        }

        100% {
            left: 5%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(350deg);
        }
    }

    /* rectangle */
    .platform19 {
        margin-top: 5%;
        margin-left: 2%;
        width: 350px;
        height: 100px;
        background: rgb(0, 0, 0);
        position: relative;
        transition-timing-function: ease-in-out;
        animation: vertical19 2s infinite;
    }


    @keyframes vertical19 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 5%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform20 {
        margin-top: 5%;
        margin-left: 80%;
        width: 400px;
        height: 400px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal20 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal20 {
        0% {
            right: 5%;
            top: 0px;
        }

        50% {
            right: 55%;
            top: 0px;
        }

        100% {
            right: 5%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }


    .platform21 {
        margin-top: 5%;
        margin-left: 2%;
        width: 400px;
        height: 400px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal21 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal21 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 45%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(350deg);
        }
    }

    .platform211 {
        margin-top: 5%;
        margin-left: 35%;
        width: 500px;
        height: 500px;
        background: rgb(0, 0, 0);
        border-radius: 50%;
        position: relative;
        animation: diag211 3s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes diag211 {
        0% {
            left: 0%;
            top: 0%;
        }

        50% {
            left: 25%;
            top: 15%;
        }

        100% {
            left: 0%;
            top: 0%;
        }
    }



    .platform2111 {
        margin-top: -25%;
        margin-left: 5%;
        width: 450px;
        height: 150px;
        background: rgb(0, 0, 0);
        position: relative;
        transition-timing-function: ease-in-out;
        animation: vertical2111 2s infinite;
    }

    .platform2111:hover {
        animation-play-state: paused;
        width: 400px;
        height: auto;
    }

    @keyframes vertical2111 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 9%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform22 {
        margin-top: 40%;
        margin-left: 2%;
        width: 400px;
        height: 400px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal22 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal22 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 32%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform23 {
        margin-top: 5%;
        margin-left: 2%;
        width: 500px;
        height: 110px;
        background: rgb(0, 0, 0);
        position: relative;
        transition-timing-function: ease-in-out;
        animation: vertical23 2s infinite;
    }

    @keyframes vertical23 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 35%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform233 {
        margin-top: 5%;
        margin-left: 70%;
        width: 500px;
        height: 110px;
        background: rgb(0, 0, 0);
        position: relative;
        transition-timing-function: ease-in-out;
        animation: vertical233 2s infinite;
    }

    @keyframes vertical233 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 30%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }


    .platform2333 {
        margin-top: 2%;
        margin-left: 32%;
        width: 400px;
        height: 400px;
        background: rgb(0, 0, 0);
        border-radius: 50%;
        position: relative;
        animation: diag2333 2.5s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes diag2333 {
        0% {
            right: 0%;
            top: 0%;
        }

        50% {
            right: 25%;
            top: 10%;
        }

        100% {
            right: 0%;
            top: 0%;
        }
    }

    .platform211:hover {
        animation-play-state: paused;
    }

    .platform24 {
        margin-top: 5%;
        margin-left: 65%;
        width: 400px;
        height: 400px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal24 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal24 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 40%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform25 {
        margin-top: 5%;
        margin-left: 75%;
        width: 400px;
        height: 400px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal25 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal25 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 28%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform26 {
        margin-top: 8%;
        margin-left: 5%;
        width: 400px;
        height: 400px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 2s infinite, horizontal26 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal26 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 40%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform27 {
        margin-top: 3%;
        margin-left: 75%;
        width: 400px;
        height: 400px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 2s infinite, horizontal27 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal27 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 35%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    /* Congrats 03 wide*/

    .congrats03 {
        width: 100vw;
        height: 100vh;
        position: relative;
        padding-top: 1%;
        background-image: linear-gradient(to left, rgb(252, 221, 109), rgb(249, 62, 0));
        background-size: 300%;
        animation: animatedtext 3s infinite alternate-reverse;
    }

    #bloc03 {
        position: relative;
        width: 700px;
        height: 700px;
        margin-top: -40%;
        margin-left: 60%;
        overflow-wrap: break-word;
        fill: rgb(0, 0, 0);
    }

    p#congratsbloc03 {
        padding-bottom: 2%;
        padding-top: 7%;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        font-size: 8rem;
        font-weight: 700;
        color: rgb(252, 221, 109);
    }


    #bloc03.animate {
        animation: windownb03 3s;
        animation-fill-mode: forwards;
    }

    @keyframes windownb03 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 100%;
        }
    }

    .win03 {
        position: relative;
        width: 50%;
        height: 30%;
        background-color: rgb(249, 62, 0);
        margin-top: -22%;
        margin-left: 21.5%;
        text-transform: uppercase;
        text-align: center;
    }

    .win03.animate {
        animation: windown03 5s, win03 3s;
        animation-fill-mode: forwards;
    }

    @keyframes win03 {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-45deg);
        }
    }

    @keyframes windown03 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 83%;
        }
    }

    a#nextmission03 {
        position: relative;
        width: 600px;
        height: 200px;
        margin-top: -32%;
        margin-left: 3.5%;
        text-align: center;
        border: none;
        background-color: rgb(249, 62, 0);
        color: rgb(252, 221, 109);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        z-index: 30;
    }

    #nextmission03.animate {
        animation: nm03 8s, nmrotation03 6s;
        animation-fill-mode: forwards;
    }

    @keyframes nmrotation03 {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-28deg);
        }
    }

    @keyframes nm03 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 73%;
        }
    }

    a#nextmission03:hover {
        background-color: rgb(252, 221, 109);
        color: rgb(249, 62, 0);
    }



    p#nextmissionbutton03 {
        padding-top: 10%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
        font-size: 4.5rem;
    }

    /* Intro04 wide */
    .title04 {
        position: relative;
        width: 100vw;
        height: auto;
        padding-top: 2%;
        background-color: rgb(222, 243, 242);
    }

    h1#final {
        position: static;
        text-align: center;
        padding-top: 0vh;
        padding-left: 15vw;
        padding-right: 15vw;
        color: rgb(114, 192, 241);
        font-size: 12rem;
        text-transform: uppercase;
        font-weight: 500;

    }

    .info03 {
        position: relative;
        width: 60vw;
        font-size: 1.5rem;
        color: rgb(114, 192, 241);
        margin-top: 3%;
        margin-right: 4%;
        margin-left: 4%;
        line-height: 100%;
        font-weight: 500;
        column-count: 2;
        column-gap: 3vw;
        column-rule: 2.75px solid rgb(114, 192, 241);
    }

    h1#level04 {
        position: static;
        text-align: center;
        margin-top: 5%;
        margin-left: 15%;
        margin-right: 15%;
        font-size: 12rem;
        text-transform: uppercase;
        z-index: 1000;
        -webkit-text-stroke: 4px rgb(114, 192, 241);
        /* stroke width and color */
        color: transparent;
        -webkit-font-smoothing: antialiased;

    }

    p#soustitre04 {
        position: static;
        text-align: center;
        padding-top: 2%;
        padding-left: 15vw;
        padding-right: 15vw;
        font-size: 4.5rem;
        color: rgb(114, 192, 241);
    }

    a#play04 {
        width: 300px;
        height: 300px;
        position: relative;
        margin-top: 5%;
        margin-left: 43%;
        margin-bottom: 5%;
        font-size: 4.5rem;
        text-align: center;
        background-color: rgb(114, 192, 241);
        border-radius: 50%;
        color: rgb(222, 243, 242);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
    }

    a#play04:hover {
        color: rgb(114, 192, 241);
        background-color: rgb(222, 243, 242);
        border: solid 4px rgb(114, 192, 241);
    }

    p#game04button {
        padding-top: 25%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
    }

    /* Game04 wide */
    .game04 {
        position: relative;
        width: 100vw;
        height: 600vh;
        padding-top: 5%;
        z-index: 50;
        background-image: linear-gradient(to bottom, rgb(198, 235, 234), rgb(141, 205, 246));
    }

    .platform31 {
        margin-top: 0%;
        margin-left: 40%;
        width: 900px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform32 {
        margin-top: 0%;
        margin-left: 3%;
        width: 450px;
        height: 200px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform33 {
        margin-top: -17%;
        margin-left: 30%;
        width: 100px;
        height: 500px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform34 {
        margin-top: -5%;
        margin-left: 15%;
        width: 250px;
        height: 250px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform35 {
        margin-top: 4%;
        margin-left: 2%;
        width: 950px;
        height: 350px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform36 {
        margin-top: -40%;
        margin-left: 63%;
        width: 300px;
        height: 700px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform37 {
        margin-top: -30%;
        margin-left: 85%;
        width: 200px;
        height: 600px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform38 {
        margin-top: 5%;
        margin-left: 20%;
        width: 900px;
        height: 450px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform39 {
        margin-top: -20%;
        margin-left: 4%;
        width: 250px;
        height: 250px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform40 {
        margin-top: 0%;
        margin-left: 71%;
        width: 500px;
        height: 150px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform41 {
        margin-top: 4%;
        margin-left: 7%;
        width: 800px;
        height: 150px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform42 {
        margin-top: 0%;
        margin-left: 53%;
        width: 800px;
        height: 150px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform43 {
        margin-top: -3%;
        margin-left: 2%;
        width: 800px;
        height: 500px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform44 {
        margin-top: -19%;
        margin-left: 47%;
        width: 300px;
        height: 400px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform45 {
        margin-top: -10%;
        margin-left: 68%;
        width: 550px;
        height: 300px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform29 {
        margin-top: 5%;
        margin-left: 80%;
        width: 300px;
        height: 300px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal29 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal29 {
        0% {
            right: 50%;
            top: 0px;
        }

        50% {
            right: 0px;
            top: 0px;
        }

        100% {
            right: 50%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform30 {
        margin-top: 5%;
        margin-left: 53%;
        width: 300px;
        height: 300px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal30 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal30 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 50%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform48 {
        margin-top: 3%;
        margin-left: 35%;
        width: 900px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform49 {
        margin-top: 4%;
        margin-left: 2%;
        width: 800px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform50 {
        margin-top: -5%;
        margin-left: 48%;
        width: 450px;
        height: 400px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform51 {
        margin-top: -21%;
        margin-left: 75%;
        width: 375px;
        height: 150px;
        background-color: rgb(250, 248, 250);
        position: relative;
    }

    .platform52 {
        position: relative;
        margin-top: 0%;
        margin-left: 2%;
        width: 300px;
        height: 250px;
        animation: platform52 2s infinite;
        background-color: black;

    }

    @keyframes platform52 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 25%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform53 {
        margin-top: 9%;
        margin-left: 80%;
        width: 250px;
        height: 150px;
        animation: platform53 2s infinite;
    }


    @keyframes platform53 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 35%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    .platform54 {
        margin-top: -15%;
        margin-left: 4%;
        width: 300px;
        height: 250px;
        animation: platform54 2s infinite;
    }


    @keyframes platform54 {
        0% {
            right: 0px;
            top: 0%;
        }

        50% {
            right: 0px;
            top: 10%;
        }

        100% {
            right: 0px;
            top: 0%;
        }
    }

    .platform55 {
        margin-top: -10%;
        margin-left: 25%;
        width: 250px;
        height: 600px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform56 {
        margin-top: -25%;
        margin-left: 75%;
        width: 300px;
        height: 300px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal56 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal56 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 27%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform57 {
        margin-top: 19%;
        margin-left: 3%;
        width: 950px;
        height: 500px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform58 {
        margin-top: -41%;
        margin-left: 57%;
        width: 400px;
        height: 600px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform59 {
        margin-top: -14%;
        margin-left: 82%;
        width: 300px;
        height: 500px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }



    /* Congrats 04 */

    .congrats04 {
        width: 100vw;
        height: 100vh;
        position: relative;
        padding-top: 1%;
        background-image: linear-gradient(to left, rgb(198, 235, 234), rgb(141, 205, 246));
        background-size: 300%;
        animation: animatedtext 3s infinite alternate-reverse;
    }

    #bloc04 {
        position: relative;
        width: 1300px;
        height: 500px;
        background-color: rgb(255, 255, 255);
        margin-top: -40%;
        margin-left: 5%;
        overflow-wrap: break-word;
    }

    #bloc04.animate {
        animation: windownb04 3s;
        animation-fill-mode: forwards;
    }

    @keyframes windownb04 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 118%;
        }
    }

    p#congratsbloc04 {
        padding-bottom: 2%;
        padding-top: 7%;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        font-size: 10rem;
        font-weight: 700;
        color: rgb(198, 235, 234);
    }

    .win04 {
        position: relative;
        width: 50%;
        height: 30%;
        background-color: rgb(141, 205, 246);
        margin-top: -25%;
        margin-left: 5%;
    }

    .win04.animate {
        animation: windown04 4s;
        animation-fill-mode: forwards;
    }


    @keyframes windown04 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 86%;
        }
    }

    a#nextmission04 {
        position: relative;
        width: 800px;
        height: 200px;
        margin-top: -40%;
        margin-left: 59.5%;
        font-size: 4rem;
        text-align: center;
        border: none;
        background-color: rgb(141, 205, 246);
        color: rgb(198, 235, 234);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        z-index: 30;
    }

    #nextmission04.animate {
        animation: nm04 5s, nmrotation04 4s;
        animation-fill-mode: forwards;
    }

    @keyframes nmrotation04 {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(70deg);
        }
    }


    @keyframes nm04 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 97%;
        }
    }

    a#nextmission04:hover {
        background-color: rgb(198, 235, 234);
        color: rgb(141, 205, 246);
    }

    p#nextmissionbutton04 {
        padding-top: 8%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
        font-size: 4.5rem;
    }

    /* FINAL wide */
    .goodjob {
        position: relative;
        width: 100vw;
        height: auto;
        padding-top: 2%;
        background-image: linear-gradient(to left, rgb(0, 255, 145), rgb(141, 205, 246));
        animation: animatedgradient 5s infinite alternate-reverse;
        background-size: 300%;
        background-position: -100%;
    }

    h1.level05 {
        position: static;
        text-align: center;
        padding-top: 5vh;
        padding-left: 15vw;
        padding-right: 15vw;
        /* color: #b8b8b8; */
        font-size: 20rem;
        text-transform: uppercase;
        font-weight: 500;
        -webkit-text-stroke: 5px #b8b8b8;
        /* stroke width and color */
        color: transparent;
        -webkit-font-smoothing: antialiased;
    }

    .safe {
        width: 100vw;
        height: auto;
    }

    p.samussafe {
        position: static;
        text-align: center;
        padding-top: 5vh;
        padding-left: 15vw;
        padding-right: 15vw;
        color: #b8b8b8;
        font-size: 5rem;
        text-transform: uppercase;
        font-weight: 500;
    }

    .play05 {

        margin-left: 60%;
        background-color: #000000;
    }

    a#play05 {
        position: relative;
        width: 350px;
        height: 125px;
        font-size: 5rem;
        margin-top: 5%;
        margin-left: 40%;
        margin-bottom: 5%;
        text-align: center;
        color: #ffffff;
        background-color: #b8b8b8;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
    }

    p#game05button {
        padding-top: 6.5%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
    }

    a#play05:hover {
        background-color: #ffffff;
        color: #b8b8b8;

    }

    p#final {
        font-size: 20rem;
        animation: rotate05 5s infinite;
        margin-top: -30%;
        padding-left: 65%;
        padding-bottom: 25%;
    }

    @keyframes rotate05 {
        0% {
            transform: rotate3d(2, -1, -1, -0.2turn);
        }

        50% {
            transform: rotate3d(1, 1, -1, 2turn);
        }

        0% {
            transform: rotate3d(2, -1, -1, -0.2turn);
        }
    }
}


@media only screen and (min-width: 1500px) {
    body {
        width: 100vw;
        height: auto;
        font-family: 'Space Grotesk', sans-serif;
    }

    html {
        cursor: none;
    }

    .cursor {
        position: fixed;
        border-radius: 50%;
        transform: translateX(-50%) translateY(-50%);
        pointer-events: none;
        left: -100px;
        top: 50%;
        background: transparent;
        z-index: 10000;
        border: none;
        height: 50px;
        width: 50px;
        transition: all 0ms ease-out;
        border: solid 5px #b8b8b8;
        /* stroke width and color */
    }
}

/* Media queries */
/* IPHONE */

@media only screen and (max-width: 820px) {
    body {
        width: 100vw;
        height: auto;
        font-family: 'Space Grotesk', sans-serif;
    }

    html {
        cursor: none;
    }

    .cursor {
        position: fixed;
        border-radius: 50%;
        transform: translateX(-50%) translateY(-50%);
        pointer-events: none;
        left: -100px;
        top: 50%;
        background: transparent;
        z-index: 10000;
        border: none;
        height: 25px;
        width: 25px;
        transition: all 0ms ease-out;
        border: solid 3.5px #b8b8b8;
        /* stroke width and color */
    }

    /* welcome */

    div#background-home {
        width: 100vw;
        height: 100vh;
        background-image: linear-gradient(to left, rgb(255, 27, 255), rgb(27, 255, 251));
        animation: animatedgradient 3s infinite alternate-reverse;
        background-size: 300%;
        background-position: -100%;
    }

    @keyframes animatedgradient {
        from {
            background-position: 0%;
        }

        to {
            background-position: 100%;
        }
    }

    .title-S {
        position: static;
        padding-top: 2vh;
        text-align: center;
        font-size: 6rem;
        font-weight: 600;
        margin-left: 38%;
        text-transform: uppercase;
        -webkit-text-stroke: 2.5px #b8b8b8;
        color: transparent;
        -webkit-font-smoothing: antialiased;
    }

    a#enter {
        position: absolute;
        width: 200px;
        height: 100px;
        font-size: 3.5rem;
        font-weight: 500;
        Transform: translateX(-50%);
        margin-top: 30vh;
        margin-left: 50%;
        text-align: center;
        background-color: #b8b8b8;
        border: none;
        color: white;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        transition-duration: 0.4s;
    }

    p#enterbutton {
        margin-top: 22px;
    }



    /* intro01 */

    .title {
        background-color: rgb(0, 255, 145);
        width: 100vw;
        height: 100vh;
    }

    h1.level {
        position: static;
        text-align: center;
        padding-top: 2vh;
        padding-left: 5vw;
        padding-right: 5vw;
        font-size: 5rem;
        text-transform: uppercase;
        color: transparent;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke: 2.5px #337d3e;
    }

    p.soustitre {
        position: static;
        text-align: center;
        padding-top: 5%;
        padding-left: 5vw;
        padding-right: 5vw;
        font-size: 1.5rem;
        color: #337d3e;
    }

    a#play {
        position: relative;
        margin-top: 30%;
        margin-left: 50%;
        font-size: 2.5em;
        width: 250px;
        height: 80px;
        text-align: center;
        background-color: #337d3e;
        border: none;
        color: rgb(0, 255, 145);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        transition-duration: 0.4s;
        animation: platform0 3s infinite;
        transform: translateX(-50%);
    }

    a#play:hover {
        background-color: rgb(0, 255, 145);
        border: solid 4px #337d3e;
        color: #337d3e;

    }

    @keyframes platform0 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 22%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    p#game01button {
        padding-top: 8%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
    }

    /* Game01 */

    .game {
        position: relative;
        width: 100vw;
        height: 260vh;
        padding-top: 3%;
        background-image: linear-gradient(to bottom, rgb(0, 255, 145), #337d3e);
        z-index: 50;
    }

    .ptf {
        background: rgb(0, 0, 0);
        position: relative;
        transition-timing-function: ease-in-out;
    }

    .platform1 {
        margin-top: 0%;
        width: 200px;
        height: 75px;
        margin-left: 5%;
        animation: myfirst 3s infinite;
    }

    @keyframes myfirst {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 38%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform2 {
        margin-left: 5%;
        margin-top: -10%;
        width: 100px;
        height: 100px;
        animation: updown01 5s infinite;
    }

    @keyframes updown01 {
        0% {
            left: 0px;
            top: 5%;
        }

        50% {
            left: 0px;
            top: 20%;
        }

        100% {
            left: 0px;
            top: 5%;
        }
    }


    .platform3 {
        margin-left: 50%;
        margin-top: 6%;
        width: 170px;
        height: 300px;
        animation: updown02 2s infinite;
    }

    @keyframes updown02 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 15%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform4 {
        margin-left: 2%;
        margin-top: 90%;
        width: 150px;
        height: 150px;
        animation: leftright02 4s infinite;
    }

    @keyframes leftright02 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 25%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform5 {
        margin-top: 20%;
        margin-left: 20%;
        width: 200px;
        height: 125px;
        animation: myfirst02 3s infinite;
    }

    @keyframes myfirst02 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 20%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform6 {
        margin-left: 3%;
        margin-top: 12%;
        width: 200px;
        height: 200px;
        animation: updown03 2s infinite;
    }

    @keyframes updown03 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 8%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform7 {

        margin-left: 75%;
        margin-top: -15%;
        width: 75px;
        height: 100px;
        animation: updown04 3s infinite;
    }


    @keyframes updown04 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 8%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform71 {
        display: none;

    }

    .platform72 {
        display: none;

    }

    .platform73 {
        display: none;

    }

    /* Congrats 01 */

    .congrats {
        width: 100vw;
        height: 100vh;
        position: relative;
        padding-top: 1%;
        background-image: linear-gradient(to left, rgb(0, 255, 145), #337d3e);
        background-size: 300%;
        animation: animatedtext 3s infinite alternate-reverse;
    }

    @keyframes animatedtext {
        from {
            background-position: 0%;
        }

        to {
            background-position: 100%;
        }
    }

    #bloc01 {
        position: relative;
        width: 150px;
        height: 200px;
        background-color: black;
        margin-top: -63%;
        margin-left: 5%;
        overflow-wrap: break-word;
    }

    #bloc01.animate {
        animation: windownb 3s;
        animation-fill-mode: forwards;
    }

    @keyframes windownb {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 102%;
        }
    }

    .win {
        position: relative;
        width: 350px;
        height: 100px;
        background-color: #337d3e;
        margin-top: -30%;
        margin-left: 5%;
        text-transform: uppercase;
        text-align: center;
    }

    .win.animate {
        animation: windown 5s, win01 3s;
        animation-fill-mode: forwards;
    }

    @keyframes win01 {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(70deg);
        }
    }

    @keyframes windown {
        0% {
            left: 0%;
            top: 0%;
        }

        100% {
            left: 10%;
            top: 84%;
        }
    }

    p#congratsbloc {
        padding-bottom: 2%;
        padding-top: 5%;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        font-size: 4rem;
        font-weight: 700;
        color: rgb(0, 255, 145);
    }

    a#nextmission {
        position: relative;
        width: 260px;
        height: 80px;
        margin-top: -50%;
        margin-left: 5%;
        text-align: center;
        border: none;
        background-color: #337d3e;
        color: rgb(0, 255, 145);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        z-index: 30;
        transform: translateX(-50);
    }

    #nextmission.animate {
        animation: nm01 8s, win011 3s;
        animation-fill-mode: forwards;
    }

    @keyframes win011 {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-20deg);
        }
    }

    @keyframes nm01 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 46.8%;
        }
    }

    p#nextmissionbutton {
        padding-top: 10%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
        font-size: 2rem;
    }

    a#nextmission:hover {
        background-color: rgb(0, 255, 145);
        color: #337d3e;
    }

    /* Intro02 iphone */
    .title02 {
        position: relative;
        width: 100vw;
        height: auto;
        background-color: rgb(113, 137, 243);
    }

    h1#samusaran {
        position: static;
        text-align: center;
        padding-top: 2.5vh;
        font-size: 3.5rem;
        color: rgb(28, 47, 154);
        text-transform: uppercase;
        font-weight: 500;
    }

    .hiddenlevel:hover {
        opacity: 1 !important;
    }

    .info01 {
        position: relative;
        font-size: 1rem;
        color: rgb(28, 47, 154);
        width: 90vw;
        margin-top: 3%;
        margin-left: 5%;
        column-count: 1;
        line-height: 100%;
        font-weight: 500;
    }

    .hide {
        opacity: 0;

    }

    .show {
        opacity: 1;

    }

    h1#level02 {
        position: static;
        text-align: center;
        font-size: 5rem;
        margin-top: 5%;
        text-transform: uppercase;
        z-index: 1000;
        -webkit-text-stroke: 2.5px rgb(28, 47, 154);
        color: transparent;
        -webkit-font-smoothing: antialiased;
    }

    p#soustitre02 {
        position: static;
        text-align: center;
        padding-top: 5%;
        padding-left: 5vw;
        padding-right: 5vw;
        font-size: 1.5rem;
        color: rgb(28, 47, 154);
    }

    a#play02 {
        position: relative;
        text-align: center;
        width: 200px;
        height: 200px;
        margin-top: 15%;
        margin-bottom: 15%;
        margin-left: 25%;
        font-size: 2.5rem;
        background-color: rgb(28, 47, 154);
        border-radius: 50%;
        color: rgb(113, 137, 243);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
    }

    p#game02button {
        padding-top: 28%;
    }

    a#play02:active {
        background-color: rgb(113, 137, 243);
        color: rgb(28, 47, 154);
        border: solid 4px rgb(28, 47, 154);
    }


    /* Game02 iphone */

    .game02 {
        position: relative;
        width: 100vw;
        height: 480vh;
        padding-top: 5%;
        z-index: 50;
        background-image: linear-gradient(to bottom, rgb(113, 137, 243), rgb(28, 47, 154));
    }


    .platform8 {
        position: relative;
        width: 150px;
        height: 150px;
        margin-left: 3%;
        animation: horizontal8 2s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal8 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 50%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform9 {
        position: relative;
        margin-top: 5%;
        margin-left: 3%;
        width: 200px;
        height: 300px;
        animation: vertical9 2s infinite;
        transition-timing-function: ease-in-out;
    }


    @keyframes vertical9 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 10%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform10 {
        position: relative;
        margin-top: -10%;
        margin-left: 75%;
        width: 60px;
        height: 100px;
        animation: vert9 2.5s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes vert9 {
        0% {
            right: -5%;
            top: 0px;
        }

        50% {
            right: 8%;
            top: 0%;
        }

        100% {
            right: -5%;
            top: 0px;
        }
    }

    .platform11 {
        position: relative;
        background-color: black;
        margin-top: 80%;
        margin-left: 5%;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        animation: diag11 3s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes diag11 {
        0% {
            left: 0%;
            top: 0%;
        }

        50% {
            left: 35%;
            top: 8%;
        }

        100% {
            left: 0%;
            top: 0%;
        }
    }

    .platform11:hover {
        animation-play-state: paused;
    }


    .platform12 {
        position: relative;
        margin-top: 90%;
        margin-left: 5%;
        width: 200px;
        height: 200px;
        animation: horizontal12 2s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal12 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 15%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform13 {
        position: relative;
        margin-left: 80%;
        margin-top: 5%;
        width: 80px;
        height: 125px;
        animation: vertical13 2s infinite;
        transition-timing-function: ease-in-out;
        transform: translateX(-50%);
    }

    @keyframes vertical13 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 25%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    .platform14 {
        position: relative;
        margin-top: -25%;
        margin-left: 5%;
        width: 125px;
        height: 300px;
        animation: horizontal14 3s infinite;
        transition-timing-function: ease-in-out;

    }

    @keyframes horizontal14 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 7%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform15 {
        position: relative;
        margin-top: 14%;
        margin-left: 47%;
        width: 150px;
        height: 150px;
        background-color: black;
        border-radius: 50%;
        animation: diag15 2.5s infinite;
        transition-timing-function: ease-in-out;
    }


    @keyframes diag15 {
        0% {
            left: 0%;
            top: 0%;
        }

        50% {
            left: 10%;
            top: 8%;
        }

        100% {
            left: 0%;
            top: 0%;
        }
    }

    .platform15:hover {
        animation-play-state: paused;
    }

    .platform16 {
        margin-top: 50%;
        margin-left: 5%;
        width: 100px;
        height: 200px;
        position: relative;
        animation: horiz16 2s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horiz16 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 15%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform17 {
        position: relative;
        margin-top: 5%;
        margin-right: -40%;
        margin-left: 25%;
        width: 150px;
        height: 150px;
        animation: horizontal17 3s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal17 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: -30%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    .platform171 {
        margin-top: -20%;
        margin-left: 3%;
        width: 35px;
        height: 200px;
        position: relative;
        animation: horizontal171 3s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal171 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 10%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform172 {
        margin-top: -12%;
        margin-left: 20%;
        width: 225px;
        height: 150px;
        position: relative;
        animation: horizontal172 2.5s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal172 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 15%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform173 {
        margin-top: 5%;
        margin-left: 20%;
        width: 200px;
        height: 150px;
        background: rgb(0, 0, 0);
        position: relative;
        animation: horizontal173 2s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal173 {
        0% {
            left: 0px;
            top: 0%;
        }

        50% {
            left: 0px;
            top: 3%;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    /* Congrats 02 iphone */

    .congrats02 {
        width: 100vw;
        height: 100vh;
        position: relative;
        padding-top: 1%;
        background-image: linear-gradient(to left, rgb(113, 137, 243), rgb(28, 47, 154));
        background-size: 300%;
        animation: animatedtext 3s infinite alternate-reverse;
    }

    @keyframes animatedtext {
        from {
            background-position: 0%;
        }

        to {
            background-position: 100%;
        }
    }

    #bloc02 {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: black;
        margin-top: -40%;
        margin-left: 35%;
        border-radius: 50%;
    }

    #bloc02.animate {
        animation: windownb02 5s;
        animation-fill-mode: forwards;
    }

    @keyframes windownb02 {
        0% {
            right: 0%;
            top: 0%;
        }

        100% {
            right: 30%;
            top: 67.5%;
        }
    }

    .win02 {
        position: relative;
        width: 300px;
        height: 100px;
        background-color: rgb(28, 47, 154);
        margin-top: -53%;
        margin-left: 17%;
        text-transform: uppercase;
        text-align: center;
        z-index: 25;
    }

    .win02.animate {
        animation: windown02 5s, win02 3s;
        animation-fill-mode: forwards;
    }

    @keyframes win02 {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-60deg);
        }
    }

    @keyframes windown02 {
        0% {
            left: 0%;
            top: 0%;
        }

        100% {
            left: 7%;
            top: 81%;
        }
    }

    a#nextmission02 {
        position: relative;
        width: 260px;
        height: 80px;
        margin-top: -50%;
        margin-left: 4%;
        text-align: center;
        border: none;
        background-color: rgb(28, 47, 154);
        color: rgb(113, 137, 243);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        z-index: 30;
    }

    p#congratsbloc02 {
        padding-bottom: 2%;
        padding-top: 5%;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        font-size: 4rem;
        font-weight: 700;
        color: rgb(113, 137, 243);
    }

    #nextmission02.animate {
        animation: nm02 4s, nmrotation 3s;
        animation-fill-mode: forwards;
    }

    @keyframes nmrotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(30deg);
        }
    }


    @keyframes nm02 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 90%;
        }
    }

    p#nextmissionbutton02 {
        padding-top: 10%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
        font-size: 2rem;
    }

    a#nextmission02:hover {
        background-color: rgb(113, 137, 243);
        color: rgb(28, 47, 154);
    }

    /* Intro03 */

    .title03 {
        position: relative;
        width: 100vw;
        height: auto;
        padding-top: 2%;
        background-color: rgb(252, 221, 109);
    }

    h1#adventure {
        position: static;
        text-align: center;
        padding-top: 2.5vh;
        margin-left: -10%;
        color: rgb(249, 62, 0);
        font-size: 3.5rem;
        text-transform: uppercase;
        font-weight: 500;
    }

    .hiddenlevel:hover {
        opacity: 1 !important;
    }

    .info02 {
        position: relative;
        font-size: 1rem;
        color: rgb(249, 62, 0);
        width: 90vw;
        margin-top: 3%;
        margin-left: 5%;
        line-height: 100%;
        font-weight: 500;
        column-count: 1;
    }

    .hide {
        opacity: 0;

    }

    .show {
        opacity: 1;

    }

    h1#level03 {
        position: static;
        text-align: center;
        margin-top: 15%;
        margin-left: 5vw;
        margin-right: 5vw;
        font-size: 5rem;
        text-transform: uppercase;
        z-index: 1000;
        -webkit-text-stroke: 2.5px rgb(249, 62, 0);
        /* stroke width and color */
        color: transparent;
        -webkit-font-smoothing: antialiased;
    }

    p#soustitre03 {
        position: static;
        text-align: center;
        padding-top: 2%;
        padding-left: 5vw;
        padding-right: 5vw;
        font-size: 1.5rem;
        color: rgb(249, 62, 0);

    }

    a#play03 {
        width: 200px;
        height: 200px;
        position: relative;
        text-align: center;
        margin-top: 15%;
        margin-left: 25%;
        margin-bottom: 15%;
        font-size: 2.5rem;
        background-color: rgb(249, 62, 0);
        border-radius: 50%;
        color: rgb(252, 221, 109);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
    }

    p#game03button {
        padding-top: 28%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
    }

    a#play03:active {
        color: rgb(249, 62, 0);
        background-color: rgb(252, 221, 109);
        border: solid 4px rgb(249, 62, 0);
    }


    /* Game 03 Iphone */

    .game03 {
        position: relative;
        width: 100vw;
        height: 525vh;
        z-index: 50;
        background-image: linear-gradient(to bottom, rgb(252, 221, 109), rgb(249, 62, 0));
    }

    .platform18 {
        margin-top: 15%;
        margin-left: 5%;
        width: 175px;
        height: 175px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 2s infinite, horizontal18 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal18 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 40%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(350deg);
        }
    }

    /* rectangle */
    .platform19 {
        margin-top: 10%;
        margin-left: 5%;
        width: 150px;
        height: 75px;
        background: rgb(0, 0, 0);
        position: relative;
        transition-timing-function: ease-in-out;
        animation: vertical19 2s infinite;
    }

    @keyframes vertical19 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 50%;
            top: 0px;
        }

        100% {
            left: 0px;
            top: 0%;
        }
    }

    .platform20 {
        margin-top: 10%;
        margin-left: 45%;
        width: 175px;
        height: 175px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal20 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal20 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 35%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }


    .platform21 {
        margin-top: 10%;
        margin-left: 5%;
        width: 175px;
        height: 175px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal21 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal21 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 40%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(350deg);
        }
    }

    .platform211 {
        margin-top: 10%;
        margin-left: 5%;
        width: 200px;
        height: 200px;
        background: rgb(0, 0, 0);
        border-radius: 50%;
        position: relative;
        animation: diag211 3s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes diag211 {
        0% {
            left: 0%;
            top: 0%;
        }

        50% {
            left: 25%;
            top: 8%;
        }

        100% {
            left: 0%;
            top: 0%;
        }
    }

    .platform211:hover {
        animation-play-state: paused;
    }

    .platform2111 {
        margin-top: 95%;
        margin-left: 5%;
        width: 200px;
        height: 75px;
        background: rgb(0, 0, 0);
        position: relative;
        transition-timing-function: ease-in-out;
        animation: vertical2111 2s infinite;
    }


    @keyframes vertical2111 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 38%;
            top: 0%;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform22 {
        margin-top: 15%;
        margin-left: 2%;
        width: 175px;
        height: 175px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal22 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal22 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 40%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform23 {
        margin-top: 15%;
        margin-left: 2%;
        width: 200px;
        height: 50px;
        background: rgb(0, 0, 0);
        position: relative;
        transition-timing-function: ease-in-out;
        animation: vertical23 2s infinite;
    }

    @keyframes vertical23 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 35%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform233 {
        margin-top: 10%;
        margin-left: 38%;
        width: 200px;
        height: 50px;
        background: rgb(0, 0, 0);
        position: relative;
        transition-timing-function: ease-in-out;
        animation: vertical233 2s infinite;
    }

    @keyframes vertical233 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 32%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }


    .platform2333 {
        margin-top: 10%;
        margin-left: 20%;
        width: 200px;
        height: 200px;
        background: rgb(0, 0, 0);
        border-radius: 50%;
        position: relative;
        animation: diag2333 2.5s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes diag2333 {
        0% {
            right: 0%;
            top: 0%;
        }

        50% {
            right: 17%;
            top: 10%;
        }

        100% {
            right: 0%;
            top: 0%;
        }
    }

    .platform211:hover {
        animation-play-state: paused;
    }

    .platform24 {
        margin-top: 15%;
        margin-left: 48%;
        width: 175px;
        height: 175px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal24 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal24 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 40%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform25 {
        margin-top: 108%;
        margin-left: 45%;
        width: 175px;
        height: 175px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal25 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal25 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 30%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform26 {
        margin-top: 15%;
        margin-left: 5%;
        width: 175px;
        height: 175px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 2s infinite, horizontal26 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal26 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 40%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform27 {
        margin-top: 15%;
        margin-left: 45%;
        width: 175px;
        height: 175px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 2s infinite, horizontal27 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal27 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 40%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    /* Congrats 03 Iphone */

    .congrats03 {
        width: 100vw;
        height: 100vh;
        position: relative;
        padding-top: 1%;
        background-image: linear-gradient(to left, rgb(252, 221, 109), rgb(249, 62, 0));
        background-size: 300%;
        animation: animatedtext 3s infinite alternate-reverse;
    }

    #bloc03 {
        position: relative;
        width: 200px;
        height: 200px;
        margin-top: -53%;
        margin-left: 40%;
        fill: rgb(0, 0, 0);
    }

    #bloc03.animate {
        animation: windownb03 3s, rotation 3s;
        animation-fill-mode: forwards;
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    @keyframes windownb03 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 96%;
        }
    }

    p#congratsbloc03 {
        padding-bottom: 2%;
        padding-top: 5%;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        font-size: 4rem;
        font-weight: 700;
        color: rgb(252, 221, 109);
    }

    .win03 {
        position: relative;
        width: 350px;
        height: 100px;
        background-color: rgb(249, 62, 0);
        margin-top: -55%;
        margin-left: 5%;
        text-transform: uppercase;
        text-align: center;
    }

    .win03.animate {
        animation: windown03 5s, win03 3s;
        animation-fill-mode: forwards;
    }

    @keyframes win03 {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-45deg);
        }
    }

    @keyframes windown03 {
        0% {
            left: 0%;
            top: 0%;
        }

        100% {
            left: 0%;
            top: 80%;
        }
    }

    a#nextmission03 {
        position: relative;
        width: 260px;
        height: 80px;
        margin-top: -32%;
        margin-left: 6%;
        text-align: center;
        border: none;
        background-color: rgb(249, 62, 0);
        color: rgb(252, 221, 109);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        z-index: 30;
    }

    #nextmission03.animate {
        animation: nm03 8s, nmrotation03 6s;
        animation-fill-mode: forwards;
    }

    @keyframes nmrotation03 {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-28deg);
        }
    }

    @keyframes nm03 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 52%;
        }
    }

    a#nextmission03:hover {
        background-color: rgb(252, 221, 109);
        color: rgb(249, 62, 0);
    }



    p#nextmissionbutton03 {
        padding-top: 10%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
        font-size: 2rem;
    }

    /* Intro04 Iphone*/

    .title04 {
        position: relative;
        width: 100vw;
        height: auto;
        padding-top: 2%;
        background-color: rgb(222, 243, 242);
    }

    h1#final {
        position: static;
        text-align: center;
        padding-top: 2.5vh;
        color: rgb(114, 192, 241);
        font-size: 3.5rem;
        text-transform: uppercase;
        font-weight: 500;

    }

    .hiddenlevel:hover {
        opacity: 1 !important;
    }

    .info03 {
        position: relative;
        font-size: 1rem;
        color: rgb(114, 192, 241);
        margin-top: 3%;
        width: 90vw;
        margin-left: 5%;
        line-height: 100%;
        font-weight: 500;
        column-count: 1;
    }

    .hide {
        opacity: 0;

    }

    .show {
        opacity: 1;

    }


    h1#level04 {
        position: static;
        text-align: center;
        margin-top: 15%;
        margin-left: 5vw;
        margin-right: 5vw;
        font-size: 5rem;
        text-transform: uppercase;
        z-index: 1000;
        -webkit-text-stroke: 2.5px rgb(114, 192, 241);
        color: transparent;
        -webkit-font-smoothing: antialiased;

    }

    p#soustitre04 {
        position: static;
        text-align: center;
        padding-top: 2%;
        padding-left: 5vw;
        padding-right: 5vw;
        font-size: 1.5rem;
        color: rgb(114, 192, 241);
    }

    a#play04 {
        width: 200px;
        height: 200px;
        position: relative;
        margin-top: 15%;
        margin-left: 25%;
        margin-bottom: 15%;
        font-size: 2.5rem;
        text-align: center;
        background-color: rgb(114, 192, 241);
        border-radius: 50%;
        color: rgb(222, 243, 242);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
    }

    a#play04:active {
        color: rgb(114, 192, 241);
        background-color: rgb(222, 243, 242);
        border: solid 4px rgb(114, 192, 241);
    }

    p#game04button {
        padding-top: 28%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
    }


    /* Game04 Iphone */

    .game04 {
        position: relative;
        width: 100vw;
        height: 785vh;
        padding-top: 5%;
        z-index: 50;
        background-image: linear-gradient(to bottom, rgb(198, 235, 234), rgb(141, 205, 246));
    }

    .platform31 {
        margin-top: 0%;
        margin-left: 35%;
        width: 225px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform32 {
        margin-top: 10%;
        margin-left: 3%;
        width: 300px;
        height: 200px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform33 {
        margin-top: 10%;
        margin-left: 25%;
        width: 50px;
        height: 300px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform34 {
        margin-top: -40%;
        margin-left: 50%;
        width: 150px;
        height: 250px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform35 {
        margin-top: 10%;
        margin-left: 2%;
        width: 250px;
        height: 250px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform36 {
        margin-top: -35%;
        margin-left: 75%;
        width: 50px;
        height: 200px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform37 {
        margin-top: -10%;
        margin-left: 55%;
        width: 50px;
        height: 250px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform38 {
        margin-top: 10%;
        margin-left: 15%;
        width: 300px;
        height: 200px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform39 {
        margin-top: 10%;
        margin-left: 4%;
        width: 150px;
        height: 150px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform40 {
        margin-top: -20%;
        margin-left: 50%;
        width: 100px;
        height: 150px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform41 {
        margin-top: 10%;
        margin-left: 12%;
        width: 325px;
        height: 50px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform42 {
        margin-top: 10%;
        margin-left: 3%;
        width: 250px;
        height: 150px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform43 {
        margin-top: -40%;
        margin-left: 78%;
        width: 50px;
        height: 250px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform44 {
        margin-top: -20%;
        margin-left: 23%;
        width: 200px;
        height: 300px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform45 {
        margin-top: 10%;
        margin-left: 5%;
        width: 200px;
        height: 150px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform46 {
        margin-top: -40%;
        margin-left: 67%;
        width: 100px;
        height: 150px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform47 {
        margin-top: 10%;
        margin-left: 10%;
        width: 300px;
        height: 50px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform29 {
        margin-top: 5%;
        margin-left: 45%;
        width: 150px;
        height: 150px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal29 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal29 {
        0% {
            right: 40%;
            top: 0px;
        }

        50% {
            right: 0px;
            top: 0px;
        }

        100% {
            right: 40%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform30 {
        margin-top: 5%;
        margin-left: 55%;
        width: 150px;
        height: 150px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal30 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal30 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 40%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform48 {
        margin-top: 10%;
        margin-left: 5%;
        width: 300px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform49 {
        margin-top: 10%;
        margin-left: 15%;
        width: 300px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform50 {
        margin-top: 10%;
        margin-left: 5%;
        width: 150px;
        height: 300px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform51 {
        margin-top: -40%;
        margin-left: 55%;
        width: 150px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform52 {
        position: relative;
        transition-timing-function: ease-in-out;
        margin-top: 20%;
        margin-left: 5%;
        width: 200px;
        height: 100px;
        animation: platform52 2s infinite;
        background-color: rgb(0, 0, 0);

    }


    @keyframes platform52 {
        0% {
            left: 0%;
            top: 0px;
        }

        50% {
            left: 35%;
            top: 0px;
        }

        100% {
            left: 0%;
            top: 0px;
        }
    }

    .platform53 {
        position: relative;
        transition-timing-function: ease-in-out;
        margin-top: 10%;
        margin-left: 40%;
        width: 200px;
        height: 100px;
        animation: platform53 2s infinite;
        background-color: rgb(0, 0, 0);

    }


    @keyframes platform53 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 35%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    .platform54 {
        position: relative;
        transition-timing-function: ease-in-out;
        margin-top: 5%;
        margin-left: 10%;
        width: 150px;
        height: 250px;
        animation: platform54 2s infinite;
        background-color: rgb(0, 0, 0);

    }


    @keyframes platform54 {
        0% {
            right: 0px;
            top: 0%;
        }

        50% {
            right: 0px;
            top: 3%;
        }

        100% {
            right: 0px;
            top: 0%;
        }
    }

    .platform55 {
        margin-top: 30%;
        margin-left: 55%;
        width: 150px;
        height: 250px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform56 {
        margin-top: 10%;
        margin-left: 30%;
        width: 150px;
        height: 150px;
        fill: rgb(0, 0, 0);
        position: relative;
        animation: rotation 1.75s infinite, horizontal56 1.75s infinite;
        transition-timing-function: ease-in-out;
    }

    @keyframes horizontal56 {
        0% {
            right: 0%;
            top: 0px;
        }

        50% {
            right: 27%;
            top: 0px;
        }

        100% {
            right: 0%;
            top: 0px;
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-350deg);
        }
    }

    .platform57 {
        margin-top: 5%;
        margin-left: 5%;
        width: 250px;
        height: 150px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform58 {
        margin-top: 10%;
        margin-left: 55%;
        width: 150px;
        height: 200px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    .platform59 {
        margin-top: -40%;
        margin-left: 5%;
        width: 150px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        position: relative;
    }

    /* Congrats 04 Iphone */

    .congrats04 {
        width: 100vw;
        height: 100vh;
        position: relative;
        padding-top: 1%;
        background-image: linear-gradient(to left, rgb(198, 235, 234), rgb(141, 205, 246));
        background-size: 300%;
        animation: animatedtext 3s infinite alternate-reverse;
    }

    #bloc04 {
        position: relative;
        width: 150px;
        height: 250px;
        background-color: rgb(255, 255, 255);
        margin-top: -68%;
        margin-left: 5%;
    }

    #bloc04.animatetouch {
        animation: windownb04 3s;
        animation-fill-mode: forwards;
    }

    @keyframes windownb04 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 97%;
        }
    }

    p#congratsbloc04 {
        padding-bottom: 2%;
        padding-top: 7%;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        font-size: 4rem;
        font-weight: 700;
        color: rgb(198, 235, 234);
    }

    .win04 {
        position: relative;
        width: 325px;
        height: 100px;
        background-color: rgb(141, 205, 246);
        margin-top: -40%;
        margin-left: 5%;
        text-transform: uppercase;
        text-align: center;
    }

    .win04.animatetouch {
        animation: windown04 4s;
        animation-fill-mode: forwards;
    }


    @keyframes windown04 {
        0% {
            left: 0px;
            top: 0%;
        }

        100% {
            left: 0px;
            top: 67.5%;
        }
    }

    a#nextmission04 {
        position: relative;
        width: 260px;
        height: 80px;
        margin-top: -60%;
        margin-left: 15%;
        font-size: 2rem;
        text-align: center;
        border: none;
        background-color: rgb(141, 205, 246);
        color: rgb(198, 235, 234);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        z-index: 30;
    }

    #nextmission04.animatetouch {
        animation: nm04 5s, nmrotation04 4s;
        animation-fill-mode: forwards;
    }

    @keyframes nmrotation04 {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(70deg);
        }
    }


    @keyframes nm04 {
        0% {
            left: 0%;
            top: 0%;
        }

        100% {
            left: -25%;
            top: 32%;
        }
    }

    a#nextmission04:hover {
        background-color: rgb(198, 235, 234);
        color: rgb(141, 205, 246);
    }

    p#nextmissionbutton04 {
        padding-top: 10%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
        font-size: 2rem;
    }

    /* FINAL IPHONE*/
    .goodjob {
        position: relative;
        width: 100vw;
        height: 100vh;
        padding-top: 2%;
        background-image: linear-gradient(to left, rgb(0, 255, 145), rgb(141, 205, 246));
        animation: animatedgradient 5s infinite alternate-reverse;
        background-size: 300%;
        background-position: -100%;
    }

    h1.level05 {
        position: static;
        text-align: center;
        padding-top: 5vh;
        padding-left: 15vw;
        padding-right: 15vw;
        font-size: 6.5rem;
        text-transform: uppercase;
        font-weight: 500;
        -webkit-text-stroke: 2.5px #b8b8b8;
        color: transparent;
        -webkit-font-smoothing: antialiased;
    }

    .safe {
        width: 100vw;
        height: auto;
    }

    p.samussafe {
        position: static;
        text-align: center;
        padding-top: 3vh;
        padding-left: 2vw;
        padding-right: 2vw;
        color: #b8b8b8;
        font-size: 2.5rem;
        text-transform: uppercase;
        font-weight: 500;
    }

    .play05 {

        margin-left: 60%;
        background-color: #000000;
    }

    a#play05 {
        position: relative;
        width: 250px;
        height: 80px;
        margin-left: 17%;
        font-size: 2.5rem;
        margin-top: 9vh;
        margin-bottom: 5%;
        text-align: center;
        color: #ffffff;
        background-color: #b8b8b8;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
    }

    p#game05button {
        padding-top: 6.5%;
        padding-right: 3%;
        padding-left: 3%;
        padding-bottom: 2%;
    }

    a#play05:hover {
        background-color: #ffffff;
        color: #b8b8b8;

    }

    p#final {
        font-size: 20rem;
        animation: rotate05 5s infinite;
        margin-top: -30%;
        padding-left: 65%;
        padding-bottom: 25%;
    }

    @keyframes rotate05 {
        0% {
            transform: rotate3d(2, -1, -1, -0.2turn);
        }

        50% {
            transform: rotate3d(1, 1, -1, 2turn);
        }

        0% {
            transform: rotate3d(2, -1, -1, -0.2turn);
        }
    }

}