* {
    margin: 0;
    padding: 0;
    text-shadow: 1px 1px #3f21149d;
}
body, html {
height:100vh;
}

body{
    font-family: 'Noto Sans', sans-serif;
    overflow: hidden;
    color: rgb(255, 230, 0);
}
svg{position: absolute;
scale: 200%;
bottom: 0;}

svg:nth-of-type(1){
    animation: mouvement 80s linear infinite;
    animation-play-state: running;
}

svg+svg{opacity: 0.6;
    animation: mouvement1 43s linear infinite;}
svg+svg+svg{opacity: 0.4;
    animation: mouvement2 19s linear infinite;}

@keyframes mouvement {
    0% {left: -50%;
    opacity: 0;}
    2%{opacity: 1;}
    50% {left: 0;}
    90%{opacity: 1;}
    100% {left: 50%;
        opacity: 0;}}

@keyframes mouvement1 {
            0% {left: -50%;
            opacity: 0;}
            6%{opacity: 0.6;}
            50% {left: 0;}
            80%{opacity: 0.6;}
            100% {left: 50%;
                opacity: 0;}}

@keyframes mouvement2 {
            0% {left: -50%;
            opacity: 0;}
            10%{opacity: 0.4;}
            50% {left: 0;}
            90%{opacity: 0.4;}
            100% {left: 50%;
            opacity: 0;}}
    
#wave1, #wave2, #wave3 {transition: ease 100ms;}
#cassetteVide, #rRight, #rLeft {transition: ease 10ms;}

/* page1 */
#acceuil {position: absolute;
    top: 0%;
    left: 0%;
    
    width: 100%;
    height: 100vh;
}

#acceuil>h1,
#acceuil>p {
    position: relative;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#click {
    opacity: 0;
    animation: clignote 5s linear infinite;
    animation-delay: 1.5s;
}

@keyframes clignote {
    50% {
        opacity: 1;
    }
}


/* page2 */
#choix {
    display: none;
}

#texte>h1 {
    padding-left: 50%;
    width: 100%;
}

#texte {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: decaler 3s linear;
    animation-fill-mode: forwards;
}

@keyframes decaler {
    100% {
        left: 0%;
        transform: translate(0%, -50%);
    }
}

#rangement {
    opacity: 0;
    ;
    position: absolute;
    top: 10%;
    left: 60%;
    border-radius: 10%;
    background-color: burlywood;
    height: 80vh;
    width: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: 2px solid brown;

    animation: apparition 1.5s linear;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}
@keyframes tourner{
    100%{transform: rotate(360deg)}
}

@keyframes apparition {
    100% {
        opacity: 1;
    }
}

#rangement>div {
    color: white;
    width: 70%;
}

.cassetteSide>p
{
    line-height: 3em;
    max-height: 100%;
    overflow: hidden;
    font-size: 15px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    color: rgb(255, 255, 255);
    text-shadow: none;
}


/* 3D des cassettes et positionnement */

#cassette1,
#cassette2,
#cassette3,
#cassette4 {
    left: 10%;
    --width: 28vh;
    --height: 6vh;
    --depth: 20vh;
    height: var(--height);
    width: var(--width);
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(3deg) rotateY(-2deg) rotateZ(0.5deg);

}

#cassette1>.cassetteSide {
    background-color: rgba(36, 202, 133, 1);
    border: 1px solid hsl(0, 0%, 10%);
    position: absolute;
}

#cassette2>.cassetteSide {
    background-color: rgba(42, 40, 44, 1);
    border: 1px solid hsl(0, 0%, 10%);
    position: absolute;
}

#cassette3>.cassetteSide {
    background-color: rgba(202, 41, 36, 1);
    border: 1px solid hsl(0, 0%, 10%);
    position: absolute;
}

#cassette4>.cassetteSide {
    background-color: rgba(86, 36, 202, 1);
    border: 1px solid hsl(0, 0%, 10%);
    position: absolute;
}


.cassetteSide:nth-of-type(1),
.cassetteSide:nth-of-type(2) {
    height: var(--height);
    width: var(--width);
    --coeff: -0.5;
    transform: translate3d(0, 0, calc(var(--depth)*var(--coeff)));
}

.cassetteSide:nth-of-type(2) {
    --coeff: 0.5;
}

.cassetteSide:nth-of-type(3),
.cassetteSide:nth-of-type(4) {
    height: var(--height);
    width: var(--depth);
    --rotation: 90deg;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateY(var(--rotation)) translate3d(0, 0, calc(var(--width)*-0.5));

}

.cassetteSide:nth-of-type(4) {
    --rotation: -90deg;
}

.cassetteSide:nth-of-type(5),
.cassetteSide:nth-of-type(6) {
    --rotation: -90deg;
    height: var(--depth);
    width: var(--width);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(var(--rotation)) translate3d(0, 0, calc(var(--height)*-0.5));
}

.cassetteSide:nth-of-type(6) {
    --rotation: 90deg;
}

/* hover sortie de la cassette */
#cassette1:hover,
#cassette2:hover,
#cassette3:hover,
#cassette4:hover {
    transform: rotateX(15deg) rotateY(-10deg) rotateZ(2.5deg);
    left: 7.5%;
    top: -2.5%;

}

/* Page 3  */
#pagePlayer {
    display: none
}

#boxLecteur {
    box-shadow: 1px 1px 2px #3f2114;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 8vh;
    background-color: #572c18;
    border: 3px solid #3f2114;
    border-radius: 3px;
    width: 50vh;
    height: 70vh;
    border-bottom: none;
}

#timeTracker{position: absolute;
    z-index: 2;
    border-radius: 15%;
    background-color: black;
    width: 45vh;
    height: 7vh;
    bottom: 59vh;
    left: 8vh;
    margin-left: 2.5vh;
}
#timeTracker>input{position: relative;
    top: 20%;
left: 5%;
}

#timeTracker>p{position: relative;
    
    color: white;
    font-family: 'VT323', monospace;
    left: 70%;
    bottom : 10%;
}
#progressBar {
    appearance: none;
    height: 5px;
    background: white;
    width: 57.5%;
    outline: none;
    border-radius: 0px;
  }

button {
    box-shadow: 1px 1px 3px #3f2114;
    position: absolute;
    z-index: 1;
    border-radius: 3px;
    background-color: #647687;
    width: 7.5vh;
    height: 2.5vh;
    bottom: 70vh;
    border: rgb(107, 107, 107);
}

button:active {
    
    bottom: 69.5vh;}

#prevSong {
    left: 15vh;
}

#nextSong {
    left: 25vh;
}

#playPause {
    left: 40vh;
    width: 13vh;
}

#cassetteVide {
    z-index: 1;
    position: absolute;
    background-color: lightgray;
    width: 30vh;
    height: 42vh;
    bottom: 11vh;
    left: 21vh;

}

#vitre {
    z-index: 1;
    position: absolute;
    transform-style: preserve-3d;

    width: 25vh;
    height: 37vh;
    bottom: 13.5vh;
    left: 25.5vh;
    box-shadow: 0 0 0 5vh rgba(87, 44, 24, 1), 0 0 0 5.1vh rgb(0, 0, 0);
}

.roues {
    position: relative;
    border-radius: 100%;
    border: black dashed 2px;
    
    background-color: black;
    width: 10vh;
    height: 10vh;
    left: 40%;
}


#rLeft {
    top: 20%;
}

#rRight {
    top: 35%;
}

#toile {
    z-index: 0;
    --width: 375px;
    --height: 525px;
    --depth: 100px;
    height: var(--height);
    width: var(--width);
    position: absolute;
    left: 40%;
    top: 10%;
    transform: rotateX(2deg) rotateY(5deg);
    transform-style: preserve-3d;
}
canvas{
    margin-left:2px;
    
}
#toileSide {
    background-color: whitesmoke;
    border: 1px solid hsl(0, 0%, 10%);
    position: absolute;
}

#toileSide:nth-child(1),
#toileSide:nth-child(2) {
    height: var(--height);
    width: var(--width);
    --coeff: -0.5;
    transform: translate3d(0, 0, calc(var(--depth)*var(--coeff)));
}

#toileSide:nth-child(2) {
    --coeff: 0.5;
}

#toileSide:nth-child(3),
#toileSide:nth-child(4) {
    height: var(--height);
    width: var(--depth);
    --rotation: 90deg;

    transform: translate(-50%, -50%) rotateY(var(--rotation)) translate3d(0, 0, calc(var(--width)*-0.5));
    left: 50%;
    top: 50%;
}

#toileSide:nth-child(4) {
    --rotation: -90deg;
}

#toileSide:nth-child(5),
#toileSide:nth-child(6) {
    --rotation: -90deg;
    height: var(--depth);
    width: var(--width);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(var(--rotation)) translate3d(0, 0, calc(var(--height)*-0.5));
}

#toileSide:nth-child(6) {
    --rotation: 90deg;
}
img{
    height: 120px;}

img:hover{cursor: url(brush1.png) 1000 0, crosshair;
    
    
}

img:nth-of-type(odd){
    position: absolute;
    left: 70%;
    filter: hue-rotate(40deg);
}

img:nth-of-type(even){
    position: absolute;
    left: 80%;
}

img:nth-of-type(2){
    top: 10%;
    filter:hue-rotate(180deg);}
img:nth-of-type(3){
    top: 20%;
    filter: hue-rotate(-10deg);
}
img:nth-of-type(4){
    top: 30%;
    filter: hue-rotate(240deg) brightness(150%);
}
img:nth-of-type(5){
    top: 40%;
    filter: hue-rotate(200deg) brightness(150%);
}
img:nth-of-type(6){
    top: 50%;
    filter: hue-rotate(40deg) brightness(50%);
}
img:nth-of-type(7){
    top: 60%;
    filter: hue-rotate(90deg);
}
img:nth-of-type(8){
    top: 70%;
    filter: hue-rotate(140deg);
}

#couleurs>.gomme>#gomme {
    animation: none;
    scale: 100%;
    top: 80%;
    left: 70%;
    position: absolute;
}

#can{background-color: white;}