#canvas{
    position:absolute;
    z-index: 0;	
}

#canvas2{
    position:absolute;
    z-index: 2;	
}

#canvas3{
    position:absolute;
    z-index: 1;	
}

#canvas4{
    position:absolute;
    z-index: 2;	
}

#canvas15{
    position:absolute;
    z-index: 2;	
}

#ligne{
    position:absolute;
    z-index: 2;	
}

#canvas6{
    position:absolute;
    z-index: 2;	
    background-color:#c54c10 ;
    left: 790px;
    top: 80px;
    height: 60px;
    width: 198px;
    border-radius: 30px;
}

#canvas7{
    position:absolute;
    z-index: 7;	
}

#boutonaide{
    position:absolute;
    z-index: 3;	
    left: 810px;
    top: 170px;
    width: 150px;
    font-size: 110%;     
}

#viser{
    position:absolute;
    z-index: 3;	
    left: 810px;
    top: 100px;
    width: 100px;
    font-size: 110%;     
}

#canvas8{
    position:absolute;
    z-index: 2;	
    background-color:#c54c10 ;
    left: 790px;
    top: 150px;
    height: 60px;
    width: 198px;
    border-radius: 30px;
}

#canvas9{
    position:absolute;
    z-index: 8;	 
}
  
#canvas10{
    position:absolute;
    z-index: 7;	   
}

#canvas11{
    position:absolute;
    z-index: 2;	
    background-color:#c54c10 ;
    left: 790px;
    top: 220px;
    height: 60px;
    width: 198px;
    border-radius: 30px;
}

#texte{
    position:absolute;
    z-index: 4;	  
    left: 790px;
    top: 150px;
    font-size: 110%;   
}

#lamusique{
    position:absolute;
    z-index: 4;	  
    left: 810px;
    top: 240px;
    font-size: 110%;   
}

#contenu.animerregles {
    visibility: visible;
    animation-name: defilement;
    animation-duration: 200s;
    position: absolute;
}
    
#lesregles {
    position:relative;
    font:AppleGothic;   
    transform: perspective(300px) rotateX(25deg);  
    transform-origin: 50% 100%;
    font-weight: 900;
    overflow: hidden; 
    visibility: hidden;
    font-size: 350%;
    height: 5000px;
    width: 600px;
    top: -4319px;
    left: 150px;
    z-index: 9;
}
      
#titre, #soustitre {
    text-align: center;
    color: #d6e772;
}

#paragraphe {
    text-align: center;  
    font-size: 70%;
    color: #d6e772;
}
  
@keyframes defilement {
   
    0% {
      top:4935px;
    }

    100% {
      top: -70em;
    }
}
  
#canvas12{
    position:absolute;
    z-index: 10;	
}
  
#canvas13{
    position:absolute;
    z-index: 10;	
}

#canvas14{
    position:absolute;
    z-index: 10;	
}