body{
margin:0;
padding: 0;
}
h1{
position: absolute;
width: 330px;
height: 330px;
z-index: 80;
left: 58%;
top: 5%;
font-size: 300%;
font-style: italic;
font-family: Georgia, 'Times New Roman', Times, serif;
color: #d84176c9;
}

h2{
position: absolute;
width: 300px;
height: 300px;
z-index: 80;
left: 17%;
top: 20%;
font-size: 175%;
font-family: Arial, Helvetica, sans-serif;
color: #f8311fb6;
}

h3{
position: absolute;
width: 300px;
height: 300px;
z-index: 80;
left: 53%;
top: 20%;
font-size: 175%;
font-family: Arial, Helvetica, sans-serif;
color: #f8311fb6;
}

h4{
position: absolute;
width: 300px;
height: 300px;
z-index: 80;
left: 81%;
top: 55%;
font-size: 175%;
font-family: Arial, Helvetica, sans-serif;
color: #f8311fb6;
}

h5{
position: absolute;
width: 300px;
height: 300px;
z-index: 80;
left: 33%;
top: 42%;
font-size: 175%;
font-family: Arial, Helvetica, sans-serif;
color: #f8311fb6;
}

h6{
position: absolute;
width: 300px;
height: 300px;
z-index: 80;
left: 57%;
top: 72%;
font-size: 175%;
font-family: Arial, Helvetica, sans-serif;
color: #f8311fb6;
}
/* la mer (font blanc) */
#full{
position: absolute;
width: 100%;
height: 140%;
z-index: 1;
background-color: #1fa3ff;
}
/* grande ile*/
#land2{
position: absolute;
width: 770px;
height: 570px;
z-index: 50;
background-color: #339933;
left: 10%;
top: 20%;
border-radius: 300px;
        
        display: grid;
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: repeat(20, 1fr);
      }
      

      #house1{
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: 80;
        background-color: #33993300;
        left: 50%;
        top: 30%;
        border-radius: 300px;
        display: grid;
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: repeat(20, 1fr);
      }
      #house2{
       position: absolute;
       width: 100px;
       height: 100px;
       z-index: 80;
       background-color: #33993300;
       left: 52%;
       top: 40%;
       border-radius: 300px;
       display: grid;
       grid-template-columns: repeat(20,1fr);
       grid-template-rows: repeat(20, 1fr);
        }
          #house3{
            position: absolute;
            width: 100px;
            height: 100px;
            z-index: 80;
            background-color: #33993300;
            left: 59%;
            top: 40%;
            border-radius: 300px;
            display: grid;
            grid-template-columns: repeat(20,1fr);
            grid-template-rows: repeat(20, 1fr);
          }
            #house4{
              position: absolute;
              width: 100px;
              height: 100px;
              z-index: 80;
              background-color: #33993300;
              left: 56%;
              top: 30%;
              border-radius: 300px;
              display: grid;
              grid-template-columns: repeat(20,1fr);
              grid-template-rows: repeat(20, 1fr);
            }
              #MF{
                position: absolute;
                width: 100px;
                height: 100px;
                z-index: 80;
                background-color: #33993300;
                left: 35%;
                top: 55%;
                border-radius: 300px;
                display: grid;
                grid-template-columns: repeat(20,1fr);
                grid-template-rows: repeat(20, 1fr);
                transform: rotate(-13deg);
              }
#PI{
 position: absolute;
 width: 250px;
 height: 220px;
 z-index: 60;
 background-color: #33993300;
  left: 78%;
 top: 67%;
 display: grid;
 transform: rotate(90deg);
      }
      #train1{
        position: absolute;
        width: 120px;
        height: 120px;
        z-index: 51;
        background-color: #33993300;
         left: 30%;
        top: 32%;
        display: grid;
        transform: rotate(90deg);}

        #train2{
          position: absolute;
          width: 120px;
          height: 120px;
          z-index: 51;
          background-color: #33993300;
           left: 37%;
          top: 32%;
          display: grid;
          transform: rotate(90deg);}

          #train3{
            position: absolute;
            width: 120px;
            height: 120px;
            z-index: 51;
            background-color: #33993300;
             left: 45%;
            top: 32%;
            display: grid;
            transform: rotate(90deg);}
            
            #train4{
              position: absolute;
              width: 120px;
              height: 120px;
              z-index: 51;
              background-color: #33993300;
               left: 50%;
              top: 50%;
              display: grid;
              transform: rotate(-20deg);}

              #train5{
                position: absolute;
                width: 120px;
                height: 120px;
                z-index: 51;
                background-color: #33993300;
                 left: 56%;
                top: 83%;
                display: grid;
                transform: rotate(-20deg);
              }
        
                #train6{
                  position: absolute;
                  width: 120px;
                  height: 120px;
                  z-index: 50;
                  background-color: #33993300;
                   left: 53%;
                  top: 65%;
                  display: grid;
                  transform: rotate(-20deg);}
        
            
                    #train7{
                      position: absolute;
                      width: 120px;
                      height: 120px;
                      z-index: 55;
                      background-color: #33993300;
                       left: 45%;
                      top: 50%;
                      display: grid;
                      transform: rotate(40deg);}

                      #C111
                      {
                        position: absolute;
                        width: 30px;
                        height: 30px;
                        z-index: 99;
                        background-color: #33993300;
                        left: 38%;
                        top: 54%;
                        display: grid;
                        transform: rotate(-10deg);
                      }
                      #prout
                      {
                        position: absolute;
                        width: 250px;
                        height: 250px;
                        z-index: 99;
                        background-color: #33993300;
                        left: -50%;
                        top: -50%;
                        display: grid;
                        animation-iteration-count: initial;
                        animation-duration:
                        5s;
                        animation-delay: 10s;
                        animation-name:ant87 ;
                      }
                      @keyframes ant87 {
                        from{
                          left: 60%;
                          top: -10%;
                        }to{
                          left: 48%;
                          top: 130%;
                      }}
                        
                      #prout1
                      {
                          position: absolute;
                          width: 250px;
                          height: 250px;
                          z-index: 99;
                          background-color: #33993300;
                          left: -50%;
                          top: -50%;
                          display: grid;
                          animation-iteration-count: initial;
                          animation-duration:
                          5s;
                          animation-delay: 17s;
                          animation-name:ant88 ;
                        }
                        @keyframes ant88 {
                          from{
                            left: 30%;
                            top: -10%;
                          }to{
                            left: 20%;
                            top: 130%;
                        }}
                      #prout2{
                            position: absolute;
                            width: 250px;
                            height: 250px;
                            z-index: 99;
                            background-color: #33993300;
                            left: -50%;
                            top: -50%;
                            display: grid;
                            animation-iteration-count: initial;
                            animation-duration:
                            5s;
                            animation-delay: 25s;
                            animation-name:ant89 ;
                            }
                            @keyframes ant89 {
                            from{
                              left: 15%;
                              top: -10%;
                            }to{
                              left: 5%;
                              top: 130%;
                            }
                        }
                                  
                          
      #A4{
        left: 40%;
        top: 30%;
      }
      /* position de deuxieme formi + animation */
      #A5{
        left: 50%;
        top: 25%;
        animation: ant2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
     @keyframes ant2 {
        from{
          left: 37%;
          top: 17%;
        }to{
          left: 37%;
          top: 31%;
        }
      }
      /* position de troisieme formi + animation */
      #A6{
        left: 10%;
        top: 10%;
        animation-name: ant33;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
       }
       @keyframes ant33 {
        from{
          left: 20%;
          top: 80%;
        }to{
          left: 60%;
          top: 75%;
        }}

      #A7{
        left: 40%;
        top: 30%;
      }
      /* position de deuxieme formi + animation */
      #A8{
        left: 37%;
        top: 50%;
        animation: ant2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
     @keyframes ant2 {
        from{
          left: 37%;
          top: 17%;
        }to{
          left: 37%;
          top: 31%;
        }
      }
      /* position de troisieme formi + animation */
      #A9{
        left: 40%;
        top: 40%;
        animation-name: ant27;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        z-index: 90;
       }
       @keyframes ant27 {
        from{
          left: 50%;
          top: 20%;
        }to{
          left: 65%;
          top: 70%;
        }}

       #A10{
        left: 37%;
        top: 35%;
      }
      /* position de deuxieme formi + animation */
      #A11{
        left: 65%;
        top: 25%;
        animation: ant2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
     @keyframes ant2 {
        from{
          left: 37%;
          top: 17%;
        }to{
          left: 37%;
          top: 31%;
        }
      }
      /* position de troisieme formi + animation */
      #A12{
        left: 55%;
        top: 14%;
        animation-name: ant21;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
       }
       @keyframes ant21 {
        from{
          left: 60%;
          top: 70%;
        }to{
          left: 20%;
          top: 31%;
        }}
       #A13{
        left: 30%;
        top: 70%;
      }
      /* position de deuxieme formi + animation */
      #A14{
        left: 70%;
        top: 70%;
        animation: ant2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
     @keyframes ant2 {
        from{
          left: 10%;
          top: 17%;
        }to{
          left: 90%;
          top: 31%;
        }
      }
      /* position de troisieme formi + animation */
      #A15{
        left: 65%;
        top: 65%;
        animation-name: ant23;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
       }
       @keyframes ant23 {
        from{
          left: 20%;
          top: 80%;
        }to{
          left: 65%;
          top: 75%;
        }
      }

      #A16{
        left: 65%;
        top: 75%;
      }
      /* position de deuxieme formi + animation */
      #A17{
        left: 65%;
        top: 80%;
        animation: ant2;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
     @keyframes ant2 {
        from{
          left: 50%;
          top: 17%;
        }to{
          left: 37%;
          top: 31%;
        }
      }
      /* position de troisieme formi + animation */
      #A18{
        left: 30%;
        top: 80%;
        animation-name: ant25;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
       }
       @keyframes ant25 {
        from{
          left: 25%;
          top: 25%;
        }to{
          left: 65%;
          top: 80%;
        }
      }

       #A19{
        left: 40%;
        top: 90%;
      }
      /* position de deuxieme formi + animation */
      #A20{
        left: 37%;
        top: 75%;
        animation: ant2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
     @keyframes ant2 {
        from{
          left: 30%;
          top: 12%;
        }to{
          left: 60%;
          top: 31%;
        }
      }
      /* position de troisieme formi + animation */
      #A21{
        left: 80%;
        top: 80%;
        animation-name: ant22;
        animation-duration: 7s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        z-index: 99;
       }
       #A22{
        left: 80%;
        top: 60%;
        animation-name: ant22;
        animation-duration: 9s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        z-index:99;
       }
       @keyframes ant22 {
        from{
          left: 10%;
          top: 50%;
        }to{
          left: 60%;
          top: 31%;
        }}
        #A23{
          left: 70%;
          top: 70%;
          animation: ant92;
          animation-duration: 2s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
        }
       @keyframes ant92 {
          from{
            left: 90%;
            top: 80%;
          }to{
            left: 80%;
            top: 85%;
          }
        }
        /* position de troisieme formi + animation */
        #A24{
          left: 65%;
          top: 65%;
          animation-name: ant91;
          animation-duration: 3s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
         }
         @keyframes ant91 {
          from{
            left: 80%;
            top: 80%;
          }to{
            left: 85%;
            top: 75%;
          }
        }
  
        #A25{
          left: 65%;
          top: 75%;
        }
      
        /* position de troisieme formi + animation */
        #A26{
          left: 30%;
          top: 80%;
          animation-name: ant55;
          animation-duration: 10s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
         }
         @keyframes ant55 {
          from{
            left: 25%;
            top: 25%;
          }to{
            left: 25%;
            top: 80%;
          }
        }
  
         #A27{
          left: 80%;
          top: 85%;
        }
        /* position de deuxieme formi + animation */
        #A28{
          left: 37%;
          top: 75%;
          animation: ant36;
          animation-duration: 1s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
        }
       @keyframes ant36 {
          from{
            left: 80%;
            top: 80%;
          }to{
            left: 90%;
            top: 80%;
          }
        }
        /* position de troisieme formi + animation */
        #A29{
          left: 80%;
          top: 80%;
          animation-name: ant44;
          animation-duration: 7s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
          z-index: 99;
         }

         @keyframes ant44 {
          from{
            left: 85%;
            top: 70%;
          }to{
            left: 90%;
            top: 90%;
          }}
  

      /* petite ile */
      #land{
        position: absolute;
        width: 200px;
        height: 200px;
        z-index: 50;
        background-color: #339933;
        left: 80%;
        top: 70%;
        border-radius: 300px;
      }
      /* body of a boat + animation */
      #boat1{
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: 55;
        left: 75%;
        top: 80%;
        animation-name: boat;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      /* animation de bateau ( aller retour )*/
        @keyframes boat {
        from{
          left: 75%;
          top: 80%;
        }to{
          left: 68%;
          top: 70%;
        }
      }
      /* un carre !invisible!, c'eat juste pour creer le grid pour positionner les mmaisons */
      .ville{
        position: absolute;
        width: 210px;
        height: 210px;
        z-index: 60;
        left: 20%;
        top: 25%;
        display: grid;
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: repeat(20, 1fr);
      }
      /* la forme de maison,
      pour cree un cube 3D */
      .mainDiv{
  position: absolute;
  width: 51px;
  height: 47px;
  margin: 0px auto;
  margin-top:50px;
}
.square{
  width:25px;
  height:25px;
  background:#A8A8A8;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 10px;
}
.square2{
  width:25px;
  height:25px;
  background:#C8C8C8;
  transform: skew(180deg,150deg);
  position: absolute;
  left:25px;
  top: 10px;
}
.square3{
  width:29px;
  height:25px;
  background:	#FFFFFF;
 

transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
  position: absolute;
  left: -32px;
  top: -3px;
}  
    /* ici jai cree 5 cube (maisons) qui sont fait a partir de la forme des maisons */
    
      #H1{
        position: absolute;
        left: 30%;
        top: 20%;
        z-index: 63;
      }
      #H2{
          position: absolute;
          left: 35%;
          top: -10%;
          z-index: 61;
      }
      #H3{
          position: absolute;
          left: 14%;
          top: -25%;
          z-index: 61;
          }
       #H4{
           position: absolute;
           left: -23%;
           z-index: 63;
           top: 10%;
           } 
       #H5{
           position: absolute;
           grid-column-start: 7;
           grid-column-end: 10;
           grid-row-start: 7;
           grid-row-end: 10;
           z-index: 63;
           }
           /* image de compass */
          img{
            height: 150px;
            width: 150px;
            position: fixed;
            z-index: 99;
            left: 80%;
            top: 10%;
          }
          #M1{ /* mountains sans naige, juste la forme triangulaire */
            width: 0;
            height: 0;
            border-left: 80px solid transparent;
            border-right: 80px solid transparent;
            border-bottom: 100px solid #85665c;
            margin: 2rem;
            position: absolute;
            z-index: 62;
            left: 35%;
            top: 35%;

          }
          #M2{
            width: 0;
            height: 0;
            border-left: 60px solid transparent;
            border-right: 60px solid transparent;
            border-bottom: 70px solid #85665c;
            margin: 2rem;
            position: absolute;
            z-index: 62;
            left: 46%;
            top: 40%;
          }
          #M3{
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid #85665c;
            margin: 2rem;
            position: absolute;
            z-index: 62;
            left: 30%;
            top: 44%;
          }

          #S1{  /*la naige sur les montaignes ! pour cree la naige j'ai utilise la surposition des formes; 1 grand triangle + 3 petites 
          qui son a l'invert 
          ici c'est que le grand triangle pour la grande montaigne au milleux*/
            width: 0;
            height: 0;
            border-left: 28px solid transparent;
            border-right: 29px solid transparent;
            border-bottom: 35px solid #fff;
            margin: 2rem;
            position: absolute;
            z-index: 63;
            left: 321px;
            top: 200px;

          }
          #shade{              /* l'ombre sous la ville 
                                  aussi superposition des formes */
            width: 200px;
            height: 130px;
            background: #c9b842;
            border-radius: 100px;
            position: absolute;
            z-index: 60;
            left: -55px;
            top: 20px;
          }
          #shade1{
            width: 140px;
            height: 100px;
            background: #c9b842;
            border-radius: 100px;
            position: absolute;
            z-index: 59;
            left: -2px;
          }
          /*petites triangles de la grande montagne, ici j'ai mis la forme principale des triangles*/
          .snow{
            width: 0;
	          height: 0;
	          border-left: 9px solid transparent;
	          border-right: 9px solid transparent;
	          border-top: 14px solid #fff;
            z-index: 63;
            position: absolute;
          }
          /* la position des triangles  */
           #S2{
            left: 390px;
            top: 265px;
           }
           #S3{
            left: 372px;
            top: 265px;
           }
           #S4{
            left: 355px;
            top: 265px;
           } 
           /* grand triangle de la naige montagne a droite*/ 
           #S{
            width: 0;
            height: 0;
            border-left: 23px solid transparent;
            border-right: 24px solid transparent;
            border-bottom: 28px solid #fff;
            margin: 2rem;
            position: absolute;
            z-index: 63;
            left: 391px;
            top: 228px;
           } /* la forme des petites triangles de la montagne a droite */
           .snow1{
            width: 0;
	          height: 0;
	          border-left: 5px solid transparent;
	          border-right: 5px solid transparent;
	          border-top: 10px solid #fff;
            z-index: 63;
            position: absolute;
            }
            /* la position des triangles */
            #S5{
              left: 428px;
              top: 288px
            }
            #S6{
              left: 442px;
              top: 288px;
            }
            #S7{
              left: 456px;
              top: 288px;
            }
            /* le grand triangle sur la montagne a gauche */
            #SS{
              width: 0;
              height: 0;
              border-left: 19px solid transparent;
              border-right: 20px solid transparent;
              border-bottom: 22px solid #fff;
              margin: 2rem;
              position: absolute;
              z-index: 63;
              left: 261px;
              top: 250px;
            }
            /* la forme des petites triangles sur la montagne a gauche */
            .snow2{
              width: 0;
	          height: 0;
	          border-left: 5px solid transparent;
	          border-right: 5px solid transparent;
	          border-top: 10px solid #fff;
            z-index: 63;
            position: absolute;
            }
            /* la position des petites triangles a gauche */
            #S8{
              left: 298px;
              top: 303px;
            }
            #S9{
              left: 313px;
              top: 303px;
            }
            /* les formis, la forme */
          .Ants{
            width: 30px;
            height: 30px;
            position: absolute;
            z-index: 62;
          }
          /* position d'un formi */
          #A1{
            left: 30%;
            top: 30%;
          }
          /* position de deuxieme formi + animation */
          #A2{
            left: 37%;
            top: 17%;
            animation: ant2;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
          }
         @keyframes ant2 {
            from{
              left: 37%;
              top: 17%;
            }to{
              left: 37%;
              top: 31%;
            }
          }
          /* position de troisieme formi + animation */
          #A3{
            left: 15%;
            top: 2%;
            animation-name: ant3;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes ant3 {
            from{
              left: 15%;
              top: 2%;
            }to{
              left: -15%;
              top: 24%;
            }
           }
           /* le phare, utitlisation de superpostion des formes por cree le phare
           3 parties la base ...*/
           #lighthouse{
            border-bottom: 18px solid #555;
	          border-left: 5px solid transparent;
	          border-right: 5px solid transparent;
           	height: 0;
          	width: 3%;
            position: absolute;
            z-index: 54;
            left: 790px;
            top: 580px;
            border-radius: 10%;

           }/* le millieu */
           #top{
            position: absolute;
            border-bottom: 50px solid #555;
	          border-left: 10px solid transparent;
	          border-right: 10px solid transparent;
	          height: 0;
	          width: 15px;
            left: 4px;
            top: -46px;
            z-index: 54;
           }
           /* la partie top */
           #top2{
            position: absolute;
            height: 20px;
            width: 20px;
            left: 11px;
            z-index: 54;
            top: -60px;
            background-color: #555;
            border-radius: 10%;
           }
           /* la lumiere forme + animation */
           #light{
            border-bottom: 1000px solid rgba(255, 242, 0, 30%);
	          border-left: 130px solid transparent;
          	border-right: 130px solid transparent;
          	height: 0;
          	width: 3px;
            position: absolute;
            z-index: 99;
            left: -110px;
            top: -50px;
            animation-name: light;
            animation-duration: 12s;
            animation-iteration-count: infinite;
            transform-origin: 131px 0px;
           }
           @keyframes light{
            from{
              transform: rotate(0deg);
              
              left: -110px ;
              top: -50px;
            }to{
             transform: rotate(360deg);

            }
           }
           /* l'ombre sous la village 1*/
           .village1{
            position: absolute;
            left: 6%;
            top: -30%;
           }
           .shadeV{
            height: 100px;
            width: 150px;
            border-radius: 50%;
            z-index: 65;
            background-color: #c9b842;
            left: 500px;
            top: 400px;
           }
           #sa1{
            position: absolute;
            top: 370px;
            left: 550px;
           }
           #sa2{
            position: absolute;
            top: 400px;
            left: 600px;
           }

           /* le debut du background des vagues qui bougent */
           /* la forme des lignes !invisible! */
           .line{
            width: 100%;
            height: 150px;
            position: absolute;
            z-index: 1;
            display: inline-flex;
           }
           /* la disposition des lignes !invisible! */
           #wave1{
            top: -10px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave1;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave1{
            from{
              left: 0%;
            }to{
              left: 5%;
            }
           }
           #wave2{
            top: 35px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave2;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave2{
            from{
              left: 0%;
            }to{
              left: -2%;
            }
           }
           #wave3{
            top: 80px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave3;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave3{
            from{
              left: 0%;
            }to{
              left: 2%;
            }
           }
           #wave4{
            top: 125px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave4;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave4{
            from{
              left: 0%;
            }to{
              left: -5%;
            }
           }
           #wave5{
            top: 170px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave5;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave5{
            from{
              left: 0%;
            }to{
              left: 2%;
            }
           }
           #wave6{
            top: 215px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave6;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave6{
            from{
              left: 0%;
            }to{
              left: -5%;
            }
           }

           #wave7{
            top: 260px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave7;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave7{
            from{
              left: 0%;
            }to{
              left: 5%;
            }
           }
           
           #wave8{
            top: 305px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave8;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave8{
            from{
              left: 0%;
            }to{
              left: -4%;
            }
           }
           #wave9{
            top: 350px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave9;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave9{
            from{
              left: 0%;
            }to{
              left: 2%;
            }
           }
           #wave10{
            top: 395px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave10;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave10{
            from{
              left: 0%;
            }to{
              left: -5%;
            }
           }
           #wave11{
            top: 440px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave11;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave11{
            from{
              left: 0%;
            }to{
              left: 5%;
            }
           }

           #wave12{
            top: 485px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave12;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave12{
            from{
              left: 0%;
            }to{
              left: -5%;
            }
           }
           #wave13{
            top: 530px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave13;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave13{
            from{
              left: 0%;
            }to{
              left: -2%;
            }
           }
           #wave14{
            top: 575px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave14;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave14{
            from{
              left: 0%;
            }to{
              left: 3%;
            }
           }

           #wave15{
            top: 620px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave15;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave15{
            from{
              left: 0%;
            }to{
              left: -5%;
            }
           }
           #wave16{
            top: 665px;
            left: 0%;
            position: absolute;
            z-index: 1;
            animation-name: wave16;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           }
           @keyframes wave16{
            from{
              left: 0%;
            }to{
              left: 2%;
            }
           }

           /* la forme generale des boules (pour la mer)*/
           .water{
            height: 150px;
            width: 150px;
            background-color: rgba(15, 100, 212, 25%);
            z-index: 2;
            border-radius: 50%;
            margin-left: -30px;
           }

           .water1{
            height: 150px;
            width: 150px;
            background-color: rgba(5, 68, 157, 0.25);
            z-index: 2;
            border-radius: 50%;
            margin-left: -30px;
           }

           .water2{
            height: 150px;
            width: 150px;
            background-color: rgba(115, 185, 232, 0.25);
            z-index: 2;
            border-radius: 50%;
            margin-left: -30px;
           }
           /* start of a wave1 */
      
           #Q1{
            left: 70%;
           }
           #Q2{
            left: 150%;
           }
           #Q3{
            left: 230%;
           }
           #Q4{
            left: 310%;
           }
           #Q5{
            left: 390%;
           }
           #Q6{
            left: 470%;
           }
           #Q7{
            left: 550%;
          }
           #Q8{
            left: 630%;
          }
           #Q9{
            left: 710%;
           }
           #Q10{
            left: 790%;
           }
           #Q11{
            left: 870%;
           }
           #Q12{
            left: 940%;
           }
           
/*start of a wave 2*/

           #W1{
            left: 70%;
           }
           #W2{
            left: 150%;
           }
           #W3{
            left: 230%;
           }
           #W4{
            left: 310%;
           }
           #W5{
            left: 390%;
           }
           #W6{
            left: 470%;
           }
           #W7{
            left: 550%;
           }

           #W8{
            left: 630%;
           }
           #W9{
            left: 710%;
           }
           #W10{
            left: 790%;
           }
           #W11{
            left: 870%;
           }
           #W12{
            left: 940%; 
           }

           /* start of a wave 3 */
           #E1{
            left: 70%;
           }
           #E2{
            left: 150%;
           }
           #E3{
            left: 230%;
           }
           #E4{
            left: 310%;
           }
           #E5{
            left: 390%;
           }
           #E6{
            left: 470%;
           }
           #E7{
            left: 550%;
          }
           #E8{
            left: 630%;
          }
           #E9{
            left: 710%;
           }
           #E10{
            left: 790%;
           }
           #E11{
            left: 870%;
           }
           #E12{
            left: 940%;
           }
           /*  start of a wave 3 */

           #R1{
            left: 70%;
           }
           #R2{
            left: 150%;
           }
           #R3{
            left: 230%;
           }
           #R4{
            left: 310%;
           }
           #R5{
            left: 390%;
           }
           #R6{
            left: 470%;
           }
           #R7{
            left: 550%;
           }

           #R8{
            left: 630%;
           }
           #R9{
            left: 710%;
           }
           #R10{
            left: 790%;
           }
           #R11{
            left: 870%;
           }
           #R12{
            left: 940%;
           }

           /* start of a wave 5*/
           #T1{
            left: 70%;
           }
           #T2{
            left: 150%;
           }
           #T3{
            left: 230%;
           }
           #T4{
            left: 310%;
           }
           #T5{
            left: 390%;
           }
           #T6{
            left: 470%;
           }
           #T7{
            left: 550%;
           }

           #T8{
            left: 630%;
           }
           #T9{
            left: 710%;
           }
           #T10{
            left: 790%;
           }
           #T11{
            left: 870%;
           }
           #T12{
            left: 940%;
           }
           
/*start of a wave 6*/
#Y1{
  left: 70%;
 }
 #Y2{
  left: 150%;
 }
 #Y3{
  left: 230%;
 }
 #Y4{
  left: 310%;
 }
 #Y5{
  left: 390%;
 }
 #Y6{
  left: 470%;
 }
 #Y7{
  left: 550%;
 }

 #Y8{
  left: 630%;
 }
 #Y9{
  left: 710%;
 }
 #Y10{
  left: 790%;
 }
 #Y11{
  left: 870%;
 }
 #Y12{
  left: 940%;
 }

                /* start of a wave 7*/
       
               
                  #U1{
                    left: 70%;
                   }
                   #U2{
                    left: 150%;
                   }
                   #U3{
                    left: 230%;
                   }
                   #U4{
                    left: 310%;
                   }
                   #U5{
                    left: 390%;
                   }
                   #U6{
                    left: 470%;
                   }
                   #U7{
                    left: 550%;
                   }
        
                   #U8{
                    left: 630%;
                   }
                   #U9{
                    left: 710%;
                   }
                   #U10{
                    left: 790%;
                   }
                   #U11{
                    left: 870%;
                   }
                   #U12{
                    left: 940%;
                   }

                     /* strat of  wave 8*/
                   #I1{
                    left: 70%;
                   }
                   #I2{
                    left: 150%;
                   }
                   #I3{
                    left: 230%;
                   }
                   #I4{
                    left: 310%;
                   }
                   #I5{
                    left: 390%;
                   }
                   #I6{
                    left: 470%;
                   }
                   #I7{
                    left: 550%;
                   }
        
                   #I8{
                    left: 630%;
                   }
                   #I9{
                    left: 710%;
                   }
                   #I10{
                    left: 790%;
                   }
                   #I11{
                    left: 870%;
                   }
                   #I12{
                    left: 940%;
                   }


                     /* strat of  wave 9*/
                     #O1{
                      left: 70%;
                     }
                     #O2{
                      left: 150%;
                     }
                     #O3{
                      left: 230%;
                     }
                     #O4{
                      left: 310%;
                     }
                     #O5{
                      left: 390%;
                     }
                     #O6{
                      left: 470%;
                     }
                     #O7{
                      left: 550%;
                     }
          
                     #O8{
                      left: 630%;
                     }
                     #O9{
                      left: 710%;
                     }
                     #O10{
                      left: 790%;
                     }
                     #O11{
                      left: 870%;
                     }
                     #O12{
                      left: 940%;
                     }


                     /* strat of  wave 10*/
                   #P1{
                    left: 70%;
                   }
                   #P2{
                    left: 150%;
                   }
                   #P3{
                    left: 230%;
                   }
                   #P4{
                    left: 310%;
                   }
                   #P5{
                    left: 390%;
                   }
                   #P6{
                    left: 470%;
                   }
                   #P7{
                    left: 550%;
                   }
        
                   #P8{
                    left: 630%;
                   }
                   #P9{
                    left: 710%;
                   }
                   #P10{
                    left: 790%;
                   }
                   #P11{
                    left: 870%;
                   }
                   #P12{
                    left: 940%;
                   }


                     /* strat of  wave 11*/
                     #D1{
                      left: 70%;
                     }
                     #D2{
                      left: 150%;
                     }
                     #D3{
                      left: 230%;
                     }
                     #D4{
                      left: 310%;
                     }
                     #D5{
                      left: 390%;
                     }
                     #D6{
                      left: 470%;
                     }
                     #D7{
                      left: 550%;
                     }
          
                     #D8{
                      left: 630%;
                     }
                     #D9{
                      left: 710%;
                     }
                     #D10{
                      left: 790%;
                     }
                     #D11{
                      left: 870%;
                     }
                     #D12{
                      left: 940%;
                     }


                     /* strat of  wave 12*/
                     #F1{
                      left: 70%;
                     }
                     #F2{
                      left: 150%;
                     }
                     #F3{
                      left: 230%;
                     }
                     #F4{
                      left: 310%;
                     }
                     #F5{
                      left: 390%;
                     }
                     #F6{
                      left: 470%;
                     }
                     #F7{
                      left: 550%;
                     }
          
                     #F8{
                      left: 630%;
                     }
                     #F9{
                      left: 710%;
                     }
                     #F10{
                      left: 790%;
                     }
                     #F11{
                      left: 870%;
                     }
                     #F12{
                      left: 940%;
                     }

                     /* strat of  wave 13*/
                     #G1{
                      left: 70%;
                     }
                     #G2{
                      left: 150%;
                     }
                     #G3{
                      left: 230%;
                     }
                     #G4{
                      left: 310%;
                     }
                     #G5{
                      left: 390%;
                     }
                     #G6{
                      left: 470%;
                     }
                     #G7{
                      left: 550%;
                     }
          
                     #G8{
                      left: 630%;
                     }
                     #G9{
                      left: 710%;
                     }
                     #G10{
                      left: 790%;
                     }
                     #G11{
                      left: 870%;
                     }
                     #G12{
                      left: 940%;
                     }


                     /* strat of  wave 14*/
                     #J1{
                      left: 70%;
                     }
                     #J2{
                      left: 150%;
                     }
                     #J3{
                      left: 230%;
                     }
                     #J4{
                      left: 310%;
                     }
                     #J5{
                      left: 390%;
                     }
                     #J6{
                      left: 470%;
                     }
                     #J7{
                      left: 550%;
                     }
          
                     #J8{
                      left: 630%;
                     }
                     #J9{
                      left: 710%;
                     }
                     #J10{
                      left: 790%;
                     }
                     #J11{
                      left: 870%;
                     }
                     #J12{
                      left: 940%;
                     }

                     /* strat of  wave 15*/
                     #K1{
                      left: 70%;
                     }
                     #K2{
                      left: 150%;
                     }
                     #K3{
                      left: 230%;
                     }
                     #K4{
                      left: 310%;
                     }
                     #K5{
                      left: 390%;
                     }
                     #K6{
                      left: 470%;
                     }
                     #K7{
                      left: 550%;
                     }
          
                     #K8{
                      left: 630%;
                     }
                     #K9{
                      left: 710%;
                     }
                     #K10{
                      left: 790%;
                     }
                     #K11{
                      left: 870%;
                     }
                     #K12{
                      left: 940%;
                     }


                     /* strat of  wave 16*/
                     #L1{
                      left: 70%;
                     }
                     #L2{
                      left: 150%;
                     }
                     #L3{
                      left: 230%;
                     }
                     #L4{
                      left: 310%;
                     }
                     #L5{
                      left: 390%;
                     }
                     #L6{
                      left: 470%;
                     }
                     #L7{
                      left: 550%;
                     }
          
                     #L8{
                      left: 630%;
                     }
                     #L9{
                      left: 710%;
                     }
                     #L10{
                      left: 790%;
                     }
                     #L11{
                      left: 870%;
                     }
                     #L12{
                      left: 940%;
                     }
  

.M1{
left:130px;
top }