:root{
 --couleur: linear-gradient(90deg,lightblue,white, lightblue);
--taille:100px;
--vertical:0px;
--hauteur:-100px;

}

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.fond{
    position:fixed;
    z-index:1;
    width: 100%;
    height: 100%;
    background-color:lightblue;
    display:grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(10,1fr);
    justify-items:center;
align-items:center;
/* overflow-y: scroll;
overflow-x: hidden;
overflow:auto;
-ms-overflow-style:none;
scrollbar-width:none; */
}

h1{
    z-index:15;
    color:lightblue;
    font-family: 'MuseoModerno', cursive;
     font-size:80px;
    /* text-align:justify; */
    justify-content: fill;
    transition:10s;
   
    grid-row: 9 / span 1;
    grid-column: 1/ span 4;

}

h1:hover{
    cursor:grab;
    filter:hue-rotate(400deg);
    transform:scale(0.99);
}
p{
    margin:10%;
    z-index:16;
    font-family: 'MuseoModerno', cursive;

}
.p1{  position:absolute;
    color:lightblue;
     font-size:30px;
    /* text-align:justify; */
    justify-content: fill;
    transition:2s;

    grid-row: 8 / span 1;
    grid-column: 3/ span 4;

}


.p2{  position:absolute;
    color:lightblue;
     font-size:20px;
    /* text-align:justify; */
    justify-content: fill;
    transition:2s;
    grid-row: 10 / span 1;
    grid-column: 1/ span 4;

}

.p3{  position:absolute;
    color:lightblue;
     font-size:20px;
    /* text-align:justify; */
    justify-content: fill;
    transition:2s;
    grid-row: 1 / span 1;
    grid-column: 1/ span 4;

}

.p4{  position:absolute;
    color:grey;
     font-size:20px;
    /* text-align:justify; */
    justify-content: fill;
    transform: translateX(-30vw);
    transition:0.5s;
    grid-row: 3/ span 1;
    grid-column: 1/ span 1;

}

a{
    color:darkgrey;
    text-decoration: none;
}
.p5{  position:absolute;
    color:grey;
     font-size:15px;
    /* text-align:justify; */
    justify-content: fill;
    transform: translateX(-30vw);
    transition:0.5s;
    grid-row: 6/ span 1;
    grid-column: 1/ span 1;

}



.p1:hover{ cursor: pointer;
    transform:translateX(-30px);
    color:white;
}

.p2:hover{
    cursor: pointer;
    transform:translateX(200px);
color:grey;
}

.p3:hover{
    cursor: pointer;
    transform:translateX(-100px);
color:grey;
}

.p4:hover{
    cursor: pointer;
color:white;
}

.hover{
    color:white;
    font-size:80px;
    transition:3s;


}
.hover:hover{
    cursor:pointer;
    font-size:90px;
    color:grey;
}

input{
    display: none;
}


input + label {
    z-index:20;
    /* position:absolute; */
    color:lightblue;
    font-family: 'MuseoModerno', cursive;
    background:linear-gradient(lightblue,white);
    width: 100px;
    font-size:20px;
    /* padding:30px; */
    height: 60px;
    margin-left:40%;
    display:grid;
    justify-items:center;
    align-items: center;
    text-align:center;
    border-radius:50px;
    transition:0.5s;
    grid-row: 3 / span 2;
    grid-column: 4/ span 2;
   
}

#button-2 + label {
    position:relative;
    top:50%;
}


input:checked + label{
    color:white;
    background:linear-gradient(lightblue);
    border-radius: 70px;
    width: 80px;
    height: 80px;
}

input + label:hover{
    background:linear-gradient(white,lightblue);
    cursor:help;  
    color:white;
    width: 110px;
    height: 60px;
    font-weight: 2px;

  }


.O-1{
    border:1px solid white;
    cursor:pointer;
    z-index:50;
    width: var(--taille);
    height:var(--taille);
border-radius:50%;
background:var(--couleur);
grid-column: 3 / span 1;
grid-row: 6 / span 2;
transform-origin:top;
transform: scale(1) rotate(0deg) ;
transition: 10s cubic-bezier(0, 0, 0.26,-0.16);
}

.O-1:hover{
    transform: scale(1) rotate(180deg) ;
}



.O-2{
    border:2px solid white;
    cursor:grab;
    z-index:49;
    width: var(--taille);
    height:var(--taille);
border-radius:50%;
background:var(--couleur);
grid-column: 3 / span 1;
grid-row: 6 / span 2;
transform-origin:50% 80%;
transform: translateX(0px) scale(1) rotate(0deg) ;
transition: 5s cubic-bezier(0, 0, 0.26,-0.16);
}

.O-2:hover{
    transform: translateX(10px) scale(1.4) rotate(360deg) ;
}


.O-3{
    border:3px solid white;
    cursor:pointer;
    z-index:48;
    width: var(--taille);
    height:var(--taille);
border-radius:50%;
background:var(--couleur);
grid-column: 3 / span 1;
grid-row: 6 / span 2;
transform-origin:left;
transform: scale(1) rotate(0deg) ;
transition: 2s cubic-bezier(0.26, 1.27, 1, 1);
}

.O-3:hover{
    transform: scale(0.5) rotate(180deg) ;
}

.O-4{
    border:4px solid white;
    cursor:grab;
    z-index:47;
    width: var(--taille);
    height:var(--taille);
border-radius:50%;
background:var(--couleur);
grid-column: 3 / span 1;
grid-row: 6 / span 2;
transform-origin:bottom;
transform: scale(1) rotate(0deg) ;
transition: 1s cubic-bezier(0.26, 1.27, 1, 1);
}

.O-4:hover{
    transform: scale(0.5) rotate(360deg) ;}

.O-5{
    border:5px solid white;
    cursor:pointer;
    z-index:46;
    width: var(--taille);
    height:var(--taille);
border-radius:50%;
background:var(--couleur);
grid-column: 3 / span 1;
grid-row: 6 / span 2;
transform-origin:bottom;
transform: scale(1) rotate(0deg) ;
transition: 0.5s cubic-bezier(0.26, 1.27, 1, 1);
}

.O-5:hover{
    transform: scale(1)  rotate(360deg) ;
}



.O-6{
    border:6px solid white;
    cursor:grab;
    z-index:45;
    width: var(--taille);
    height:var(--taille);
border-radius:50%;
background:var(--couleur);
grid-column: 3 / span 1;
grid-row: 6 / span 2;
transform-origin:right;
transform: scale(1) rotate(0deg) ;
transition: 0.5s cubic-bezier(0.26, 1.27, 1, 1);
}

.O-6:hover{
    transform: scale(1)  rotate(90deg) ;
}

.O-7{ cursor:pointer;
    z-index:44;
    width: var(--taille);
    height:var(--taille);
border-radius:50%;
background:var(--couleur);
grid-column: 3 / span 1;
grid-row: 6 / span 2;
}

.O-8{  cursor:pointer;
    z-index:43;
    width: var(--taille);
    height:var(--taille);
border-radius:50%;
background:var(--couleur);
grid-column: 3 / span 1;
grid-row: 6 / span 2;
}
.O-9{  cursor:pointer;
    z-index:42;
    width: var(--taille);
    height:var(--taille);
border-radius:50%;
background:var(--couleur);
grid-column: 3 / span 1;
grid-row: 6 / span 2;
}

.rectangle0{ cursor:pointer;
    position:absolute;
    z-index:0;
    width: 100%;
    height:100%;
    grid-column: 1 / span 5;
    grid-row: 1 / span 5;
    background:var(--couleur);
    transform-origin:center;
    border-radius:0px;
}

.rectangle0-2{ cursor:pointer;
    position:absolute;
    z-index:0;
    width: 100%;
    height:100%;
    grid-column: 1 / span 5;
    grid-row: 6 / span 5;
    background:var(--couleur);
    transform-origin:center;
    border-radius:0px;
}


.rectangle{
    position:absolute;
    z-index:1;
    width: 90%;
    height:90%;
    /* margin-right:auto; */
    grid-column: 1 / span 5;
    grid-row: 1 / span 5;
    background:var(--couleur);
    transform-origin:center;
    transform: scale(1) rotate(0deg) ;
    border-radius:0px;
    transition: 10s cubic-bezier(0.26, 1.27, 1, 1);
}

.rectangle:hover{ cursor:crosshair;
    border-radius:100px;
    transform: scale(0.8) rotate(180deg) ;
}

.rectangle-2{
    position:absolute;
    z-index:1;
    width: 90%;
    height:90%;
    margin-left:auto;
    grid-column: 1 / span 5;
    grid-row: 6 / span 5;
    background:var(--couleur);
    transform-origin:center;
    transform: scale(1) rotate(0deg) ;
    border-radius:0px;
    transition: 10s cubic-bezier(0.26, 1.27, 1, 1);
}

.rectangle-2:hover{ cursor:crosshair;
    border-radius:100px;
    transform: scale(0.8) rotate(180deg) ;
}


#button-2:checked ~ .p5{
    transform: translateX(0vw);
    }


#button-1:checked ~ .p4{
    transform: translateX(0vw);
    }

#button-1:checked ~ .O-1{
animation-name: rebondir;
animation: 0.5s infinite linear rebondir;
}

#button-1:checked ~ .O-2{
    animation-name: boucle-1;
    animation: 0.75s infinite linear boucle-1;
    animation-delay:1s;
    }
    
#button-1:checked ~ .O-3{   
    animation-name: boucle-2;
        animation: 1s infinite linear boucle-2;
        animation-delay:1.5s;
        }

#button-1:checked ~ .O-4{
    animation-name: boucle-3;
 animation: 0.25s infinite linear boucle-3;
            animation-delay:2s;
            }
#button-1:checked ~ .O-5{
animation-name: boucle-4;
animation: 0.75s infinite linear boucle-4;
animation-delay:2.5s;
 }

 #button-1:checked ~ .O-6{
 animation-name: boucle-5;
 animation: 1.25s infinite linear boucle-5;
 animation-delay:0s;
 }
      
 #button-1:checked ~ .O-7{
    animation-name: boucle-6;
    animation: 1.5s infinite linear boucle-6;
    animation-delay:0.5s;
    }
#button-1:checked ~ .O-8{
        animation-name: boucle-7;
        animation: 3s infinite linear boucle-7;
        }
#button-1:checked ~ .O-9{
    animation-name: boucle-8;
    animation: 1.60s infinite linear boucle-8;
            }


            
    



@keyframes rebondir{
0%{
    transform-origin:bottom;
transform:scale(1);
}
5%{
    transform:scale(1,0.3)translate(0px,10px);
    }
70%{

    transform:scale(0.9,1.3)translate(0px,var(--hauteur));
    }
    
75%{
    transform:scale(1,1.3)translate(0px,var(--hauteur));
 }
        
100%{
  transform:scale(1) translate(0px, 0px);

}
}


@keyframes boucle-1{
    0%{
        transform-origin:center;
    transform:scale(1);
    }
    5%{
        transform:scale(1,0.3)translate(0px,10px);
        }
    70%{
    
        transform:scale(0.8,1.4)translate(0px,var(--hauteur));
        }
        
    75%{
        transform:scale(1,1.6)translate(0px,var(--hauteur));
     }
            
    100%{
      transform:scale(1) translate(0px, 0px);
    
    }
    }

    
@keyframes boucle-2{
    0%{
        transform-origin:center;
    transform:scale(1);
    }
    5%{
        transform:scale(1,0.3)translate(0px,10px);
        }
    25%{
    
        transform:scale(0.5,1)translate(0px,calc(var(--hauteur)-150px)) rotate(30deg);
        }
        
    55%{
        transform:scale(0.7,1)translate(0px,calc(var(--hauteur)-150px)) rotate(60deg);
     }
            
    100%{
      transform:scale(1) translate(0px, 0px) rotate(0deg);
    
    }
    }

@keyframes boucle-3{
        0%{
            transform-origin:center;
        transform:scale(1);
        }
        5%{
            transform:scale(1,0.3)translate(0px,10px);
            }
        85%{
        
            transform:scale(0.4,1)translate(0px,calc(var(--hauteur)-100px));
            }
            
        90%{
            transform:scale(0.5,1)translate(0px,calc(var(--hauteur)-100px));
         }
                
        100%{
          transform:scale(1) translate(0px, 0px);
        
        }
        }



 @keyframes boucle-4{
                0%{
                    transform-origin:center;
                transform:scale(1);
                }
                50%{
                    transform:scale(1,0.3)translate(0px,10px) rotate(-10deg);
                    }
                70%{
                
                    transform:scale(0.4,1)translate(0PX,calc(var(--hauteur)-100px)) rotate(180deg);
                    }
                    
                75%{
                    transform:scale(0.5,1)translate(0px,calc(var(--hauteur)-100px))  rotate(180deg);
                 }
                        
                100%{
                  transform:scale(1) translate(0px, 0px)  rotate(0deg);
                
                }
                }

 @keyframes boucle-5{
                    0%{
                        transform-origin:center;
                    transform:scale(1);
                    }
                    5%{
                        transform:scale(1,0.3)translate(0px,10px);
                        }
                    70%{
                    
                        transform:scale(0.4,1) translate(100px,calc(var(--hauteur)/2));
                        }
                        
                    75%{
                        transform:scale(0.5,1) translate(200px, calc(var(--hauteur)/2));
                     }
                     90%{
                        transform:scale(1.3,1.5) translate(200px, calc(var(--hauteur)/6));
                     }
                            
                    100%{
                      transform:scale(1) translate(0px, 0px);
                    
                    }
                    }

                    @keyframes boucle-6{
                        0%{
                            transform-origin:center;
                        transform:scale(1);
                        }
                        5%{
                            transform:scale(1,0.3)translate(0px,10px);
                            }
                        15%{
                        
                            transform:scale(0.4,1) translate(100px,calc(var(--hauteur)/2));
                            }
                            
                        20%{
                            transform:scale(0.5,1) translate(100px, calc(var(--hauteur)/2));
                         }
                         25%{
                            transform:scale(1.3,1.5) translate(100px, calc(var(--hauteur)/6));
                         }
                                
                        100%{
                          transform:scale(1) translate(0px, 0px);
                        
                        }
                        }


@keyframes boucle-7{
                            0%{
                                transform-origin:center;
                            transform:scale(1);
                            }
                            5%{
                                transform:scale(1,0.3)translate(0px,10px);
                                }
                            40%{
                            
                                transform:scale(0.4,1) translate3D(-300px,calc(var(--hauteur)-400px)),0px;
                                }
                                
                            75%{
                                transform:scale(0.5,1) translate3D(-300px, calc(var(--hauteur)-100px),0px);
                             }
                                    
                            100%{
                              transform:scale(1) translate(0px, 0px);
                            
                            }
 }
    @keyframes boucle-8{
                                0%{
                                    transform-origin:center;
                                transform:scale(1);
                                }
                                5%{
                                    transform:scale(1,0.3)translate(0px,10px);
                                    }
                                70%{
                                
                                    transform:scale(1.4,1) translate3D(-300px,-300px),0px;
                                    }
                                    
                                75%{
                                    transform:scale(1.2,1) translate3D(-200px, -300px),0px;
                                 }
                                        
                                100%{
                                  transform:scale(1) translate(0px, 0px);
                                
                                }
                                }