*{
    margin: 0;
    padding: 0;
}


/*  ADD A PAGE  */
.outer-wrapper {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
}
.wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 800vw; /* +100 pour chaque nouvelle page */
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
}
::-webkit-scrollbar{
    display: none;
}
.flex{
    display: flex;
}
.slide{
    width: 100vw;
    height: 100vh;
    background-image: url('image/fond.gif');
    background-repeat: no-repeat;
    background-size: 100vw 100vh ;
}
.center{
    justify-content: center;
    align-items: center;
}
/* PAGE 2 */
.buttonMac{
    background:url("image/petitlogo.png") no-repeat;
    cursor:pointer;
    width:400px;
    height:400px;
    border: none;
    transition: all 1s ease;
}
.buttonMac:hover{
    background:url("image/petitlogohover.png") no-repeat;
    transform:scale(4);
    animation: loupiotte 0.4s infinite;
}
.buttonMac:focus{
    outline: none;
}
.divboutonWindows{
    justify-content: flex-end;
}
.buttonWindows{
    background:url("image/logowindows.png") no-repeat;
    justify-content: flex-end;
    cursor:pointer;
    width:400px;
    height:400px;
    border: none;
    transition: all 1s ease;
    position: relative;
    top: -50px;
}
.buttonWindows:hover{
    background:url("image/logowindowshover.png") no-repeat;
    transform:scale(4);
    animation: loupiotte 0.4s infinite;
}
.buttonWindows:focus{
    outline: none;

}

/* Page 3 */
.divmeme{
    width: 25%;
    justify-content: flex-end;
}
.divcentralmeme{
    height: 100%;
    width: 100%;
}

/* Page 5 */
.grandCube{
    width: 50%
}
.petitCube{

    height: 50%;
    flex-wrap: nowrap;

}
.texteP5t1{
    justify-content: center;
    font-size: 50px;
}
.texteP5t1:hover{
    transform: scale(4);
    cursor: pointer;
}
.illuminati1{
    background-image: url('video/illuminati.gif');
    background-repeat: no-repeat;
}
.illuminati2{
    background-image: url('video/illuminati2.gif');
    background-repeat: no-repeat;
}

/* Page 6 */
.donate{
    display: flex;
    height: 50%;
    width: 50%;
    cursor: pointer;
}

/*  Page 7  */
.monChat1{
    background-image: url('image/monChat1.jpg');
    background-repeat: no-repeat;
    background-size: cover;

}
.monChat2{
    background-image: url('image/monChat2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.monChat3{
    background-image: url('image/monChat3.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.monChat4{
    background-image: url('image/monChat4.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.tresGrandCube{
    width: 100%;
    height: 90%;
}
.grandCube7{
    width: 100%;
    height: 100%;
}
.titrechat{
    width: 100%;
    height: 10%;
    font-size: 50px;
    justify-content: center;
}

/* Page 8 */
.petitCubeTransformer{
    height: 50%;
    width: 50%;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.covid1{
    height: 100%;
    width: 100%;
    background-image: url('video/chatmasque2.gif');
    background-repeat: no-repeat;
    background-size: cover;
}
.covid3{
    height: 100%;
    width: 50%;
    background-image: url('video/covid.gif');
    background-repeat: no-repeat;
    background-size: cover;
}
.covid4{
    height: 100%;
    width: 100%;
    background-image: url('video/attention.gif');
    background-repeat: no-repeat;
    background-size: cover;

}

/* EasterEgg */
.easterEgg{
    background-image: url('image/easterEgg.jpg');
    background-repeat: no-repeat;
}






/* Page seteup */
.one{
    font-size: 250px;
    text-decoration: underline wavy red;
}
.two{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: 50px;
    flex-direction: center;
    color: red;
    margin-bottom: 20px;

}
.three{
    background-image: url("image/pseudocolor.gif");
    flex-direction: column;

}
.four{
    background-image: url('video/fondYeux.gif');
    background-repeat: no-repeat;
}
.five{
    background-image: url('video/giphy.gif');
    background-repeat: no-repeat;

}
.six{
    background-image: url('video/tenor.gif');
    background-repeat: no-repeat;
}
.seven{
    background-image: url('video/titreChat.gif');
    background-repeat: no-repeat;
}
.eight{
    background-image: url('video/masque.gif');
    background-repeat: no-repeat;
}

/*  Appelle D'animation */
.clignoter{
    animation: clignoter 0.4s infinite;
}
.loupiotte{
    animation: loupiotte 0.4s infinite;
}
.loupiotteColor{
    animation: loupiotteColor 0.4s infinite;
}
.fall{
    animation: fall 0.2s infinite;
}
.fall2{
    animation: fall 0.3s infinite;
}
.fall3{
    animation: fall 0.6s infinite;
}
.wind1{
    animation: wind 5s infinite linear;
}
.spin{
    animation: spin 0.5s infinite linear;
}
.spin2{
    animation: spin 1s infinite linear;
}
.spinXY{
    animation: spinXY 5s infinite linear;
}
.spinXY2{
    animation: spinXY 5s infinite linear;
}
.spinDuble{
    animation: spinDuble 1.5s infinite linear;
}
.animationPaypal{
    animation: paypal 5s infinite linear;
}
.borderChat{
    animation: borderChat 0.3s infinite linear;
}
.smallBig{
    animation: smallBig 0.3s infinite linear;
}
.smallBig2{
    animation: smallBig 1s infinite linear;
}
.smallBig3{
    animation: smallBig 2s infinite linear;
}
/* Animation  */
@keyframes clignoter {
    0%   { opacity:1; }
    40%   {opacity:0; }
    100% { opacity:1; }
}

@keyframes loupiotte {
    0%   {background-color: red; }
    10%  {background-color: orange; }
    20%  {background-color: yellow; }
    30%  {background-color: green; }
    40%  {background-color: cyan; }
    50%  {background-color: blue; }
    60%  {background-color: purple; }
    70%  {background-color: pink; }
    80%  {background-color: DeepPink; }
    90%  {background-color: brown; }
    100%  {background-color: yellow; }
}

@keyframes loupiotteColor {

    0%   {color: red; }
    10%  {color: orange; }
    20%  {color: yellow; }
    30%  {color: green; }
    40%  {color: cyan; }
    50%  {color: blue; }
    60%  {color: purple; }
    70%  {color: pink; }
    80%  {color: DeepPink; }
    90%  {color: brown; }
    100%  {color: yellow; }
}

@keyframes fall{
    0% {transform: translateY(-1000px);}
    50% {transform: translateY(1000px);}
}

@keyframes wind{
    0% {transform: translateX(-15000px);}
}

@keyframes spin {
    from{ transform: rotate(0deg);}
    to { transform: rotate(360deg);}
}

@keyframes spinXY {
    0% {transform: translatex(-500px);}
    20% {transform: translateY(500px);}
    60% {transform: translatex(500px);}
    80% {transform: translateY(-500px);}
    100% {transform: translateX(-500px);}
}

@keyframes paypal {
    0% {transform: translateX(500px);}
    14% {transform: translateY(500px);}
    28% {transform: translateX(-500px);}
    42% {transform: translateY(-500px);}
    56% {transform: translateX(-500px);}
    70% {transform: translateY(-500px);}
    84% {transform: translateX(500px);}
    90% {transform: translateY(500px);}
    100% {transform: translateX(500px);}
}

@keyframes spinDuble {
    0% {transform: translatex(-500px);}
    14% {transform: translateY(500px);}
    28% {transform: translatex(500px);}
    42% {transform: translateY(-500px);}
    56% {transform: translateX(-500px);}
    70%{ transform: rotate(0deg);}
    90% { transform: rotate(360deg);}
    100% {transform: translatex(-500px);}
}

@keyframes borderChat {
    0% { border: 0px ridge red;}
    10% { border: 2px ridge blue;}
    30% { border: 4px ridge purple;}
    40% { border: 6px ridge green;}
    50% { border: 8px ridge yellow;}
    60% { border: 10px ridge black;}
    70% { border: 8px ridge white;}
    80% { border: 6px ridge DeepPink;}
    90% { border: 4px ridge pink;}
    95% { border: 2px ridge cyan;}
    100% { border: 0px ridge brown;}
}
@keyframes smallBig {
    0% { transform: scale(0);}
    100% { transform: scale(3);}
}