/*code de l'ocean avec le background-image qui correspond a la la texture de l'ocean*/
body{



background-color: rgb(156, 156, 247);




}

h1{position: fixed;
  bottom: 10%;
  left:45%;
  color: beige;


}
/* pont sur lequel le bateau s'arrete*/

/*les categorie iles correspondent aux iles central qui assembler forme
un semblant d'oreille humaine*/
.ile{
  position: absolute;
  top: 150px;
  left: 450px;
  width: 300px;
  height:300px;
  background: green;
  border-radius:500px;
  
  background-image: url("../img/sltccool.png");
  }
  .ile2{
    position: absolute;
    top:200px;
    left: 700px;
    width: 225px;
    height:225px;
    background: green;
    border-radius:50%;
    
    background-image: url("../img/sltccool.png");
  }
  .ile3{
    position: absolute;
    top:180px;
    left: 500px;
    width:375px;
    height: 100px;
    background:green;
    border-radius: 60%;
    
    background-image: url("../img/sltccool.png");

 }
 .ile4{
   position: absolute;
   top: 158px;
   left: 467px;
   width: 290px;
   height: 290px;
   background: green;
   border-radius: 500px;
   background-image: url("../img/sltccool.png");
 }

 #montagne
/*le categorie mont2 et rocher correspondent a la couleur la plus foncer avec
le pierre sur le dessus de la montagne*/
 .mont2{
   height: 50px;
   width: 130px;
   background: grey;
   position:absolute;
   left:740px;
   top:280px;
   border-radius:50%;
   background-image: url("../img/rock2.png");
 }
 #rochet{
position: absolute;
height: 30px;
width:30px;
left: 50px;
top:10px;
 }
/*les .mont et mont3 correspond au deux autre couleur plus
clair de la montagne*/
 .mont{
   height: 140px;
   width: 220px;
   background: grey;
   position:absolute;
   left:690px;
   top:240px;
   border-radius:50%;
   background-image: url("../img/rock3.png");

 }

.mont3{
   height:90px;
   width: 150px;
   background: red;
   position: absolute;
   left: 729px;
   top: 260px;
   border-radius:50%;
   background-image: url("../img/rock.png");
 }
/* l'img correspond au placement de l'un des arbres sans lui l'arbre se retrouve sur le cote de l'ecran et en géant*/
img{
position: absolute;
top: 20px;
left: 80px;
width: 70px;
height:70px;
 }
 /* l'arbre2 et 3 correspondent au 2 arbres au centre de l'ile principale*/
#arbre2{
position: absolute;
top:80px;
left: 150px;
width: 70px;
height: 70px;
 }
 #arbre3{
position: absolute;
top: 130px;
left: 50px;
width: 70px;
height: 70px;
 }
 /*la categorie ter fait en sorte de placer l'ensemble des lac des iles secondaire
 aux centre de celle-ci*/
  .ter{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* le cm (cache misere) fait en sorte de camoufler les border de l'iles principale*/
  .cm{
    position: absolute;
    top:200px;
    left: 700px;
    width:225px;
    height:225px;
    background:green;
    border-radius:50%;
    background-image: url("../img/sltccool.png");
  }

  #titre{
    position: absolute;
    left:1700px;
    animation-name:titre;
    animation-duration:5s;}


    @keyframes titre{
        0%{
        left:550px}
       50%{
        left:550px}
        100%{
        left:1700px}
       }
/*l'essemble des ter correspondent aux petite iles peripherique*/
  #ter1{
    position: absolute;
    top: 50px;
    left:400px;
    width: 90px;
    height:70px;
    background: green;
    border-radius: 100%;
    
    background-image: url("../img/grass2.png");


  }

  #ter2{
    position: absolute;;
    top:420px;
    left: 650px;
    width: 160px;
    height:110px;
    background: darkgreen;
    border-radius: 100%;
   
    background-image: url("../img/sltccool2.png");
  }
  #ter3{
    position: absolute;
    top:50px;
    left: 800px;
    width: 112px;
    height: 145px;
    background:green;
    border-radius: 100%;
    
    background-image: url("../img/grass.png");
  }
  #ter4{
    position: absolute;
    top: 300px;
    left: 200px;
    width: 120px;
    height: 80px;
    background: forestgreen;
    border-radius: 100%;
    opacity: 70%;

    background-image: url("../img/grass2.png");
  }
  #ter5{
    position: absolute;
    top:250px;
    left: 1250px;
    width: 79px;
    height: 70px;
    background: limegreen;
    border-radius: 100%;
    opacity: 50%;
    background-image: url("../img/grass3.png");
  }
  #ter6{
    position: absolute;
    top: 25px;
    left:100px;
    width: 44px;
    height: 56px;
    background: chartreuse;
    border-radius: 100%;
    opacity: 50%;
   
    background-image: url("../img/grass4.png");
  }
  #ter7{
    position: absolute;
    top:475px;
    left: 1050px;
    width: 90px;
    height: 120px;
    background: green;
    border-radius: 100%;
    opacity: 75%;
  
    background-image: url("../img/grass2.png");
}

#ter9{
  position: absolute;
  top: 450px;
  left: 400px;
  width: 178px;
  height:143px;
  background:green;
  border-radius: 100%;
  
  background-image: url("../img/sltccool2.png");
}
/* La ter8 correspond a l'ile en mouvement avec le @keyframes ilenmvt qui fait en sorte de donner
le mouvement et aussi le changement de couleur aux fur et a mesure du mouvement*/

  #ter8{
    width: 75px;
    height: 70px;
    background-color: green;
    border-radius: 100%;
 
    transition: all 5s ease-out;
    background-image: url("../img/grass.png");
  }


  /* lac correspond aux lac aux centre de l'ile en mouvement*/
  .lac{
    top:30px;
    left: 57px;
    width: 25px;
    height: 25px;
    background-color: blue;
    border-radius: 100%;
}
/* #bateau correspond aux petit bateau en mouvement avec ses propriete ainsi
que son déplacement en légére diagonal*/

#bateau{
  display: grid;
  grid-template-columns: repeat(5,10px);
  grid-template-rows: repeat(8,10px);
position: absolute;
left:960px;
width:15px;
height:40px;
animation-name:bateau;
animation-duration: 20s;
animation-iteration-count: infinite;
border-radius:50%;
}
@keyframes bateau{
  0%{
    top:-50px}
  25%{
    top:300px};
  40%{
    top:650px}
  50%{
    top:650px}
  60%{
    top:650px}
  70%{
    top:650px}
  100%{
    top:700px};}

    #bat1{grid-column:1/2;
    grid-row:2/7;
     background-color: rgb(235, 165, 27) ;}

     #bat11{grid-column:2/4;
      grid-row:1/8;
       background-color: rgb(235, 165, 27) ;}

       #bat111{grid-column:4/5;
        grid-row:2/7;
         background-color: rgb(235, 165, 27) ;}

         #bat1111{grid-column:2/4;
          grid-row:2/7;
           background-color: rgb(103, 71, 6) ;}

           #bat11111{grid-column:2/4;
            grid-row:3/4;
             background-color:rgb(235, 165, 27)  ;}

             #bat111111{grid-column:2/4;
              grid-row:5/6;
               background-color:rgb(235, 165, 27)  ;}










.letter1{ display: grid;
grid-template-columns:repeat(6,10px);
grid-template-rows: repeat(6,10px); }

.letter1{position:absolute;

bottom: 11%;
left: 10%;
z-index: 100;
;}

#letter11{ 
grid-column:1/6 ;
grid-row:1/2;
background-color: antiquewhite}

#letter111{ 
  grid-column:3/4 ;
  grid-row:1/6;
  background-color: antiquewhite}

  #letter1111{ 
    grid-column:1/6 ;
    grid-row:5/6;
    background-color: antiquewhite}




    .letter2{ display: grid;
      grid-template-columns:repeat(6,10px);
      grid-template-rows: repeat(6,10px); }
      
      .letter2{position:absolute;
      
      top: 10%;
      left: 15%;
      z-index: 100;
      ;}
      
      #letter22{ 
      grid-column:1/6 ;
      grid-row:1/2;
      background-color: antiquewhite}
      
      #letter222{ 
        grid-column:1/6 ;
        grid-row:3/4;
        background-color: antiquewhite}
      
        #letter2222{ 
          grid-column:1/2 ;
          grid-row:1/4;
          background-color: antiquewhite}

          #letter22222{ 
            grid-column:5/6 ;
            grid-row:3/6;
            background-color: antiquewhite}
          
            #letter222222{ 
              grid-column:1/6 ;
              grid-row:5/6;
              background-color: antiquewhite}
      

              .letter3{ display: grid;
                grid-template-columns:repeat(6,10px);
                grid-template-rows: repeat(6,10px); }
                
                .letter3{position:absolute;
                
                bottom: 11%;
                left: 20%;
                z-index: 100;
                ;}
                
                #letter33{ 
                grid-column:1/2 ;
                grid-row:1/6;
                background-color: antiquewhite}
                
                #letter333{ 
                  grid-column:1/6 ;
                  grid-row:5/6;
                  background-color: antiquewhite}
    



                  .letter4{ display: grid;
                    grid-template-columns:repeat(6,15px);
                    grid-template-rows: repeat(8,15px); }
                    
                    .letter4{position:absolute;
                    
                    bottom: 10%;
                    left: 5%;
                    z-index: 100;
                    ;}
                    
                    #letter44{ 
                      grid-column:1/6 ;
                      grid-row:1/7;
                      background-color: peachpuff}
                      
                      #letter444{ 
                        grid-column:1/5 ;
                        grid-row:7/8;
                        background-color: peachpuff}
                      
                        #letter4444{ 
                          grid-column:2/5 ;
                          grid-row:2/6;
                          background-color: rgb(154, 98, 25)}
                
                          #letter44444{ 
                            grid-column:2/3 ;
                            grid-row:3/6;
                            background-color: rgb(68, 56, 16)}
                          
                            #letter444444{ 
                              grid-column:3/4 ;
                              grid-row:3/4;
                              background-color: rgb(68, 56, 16) }

                              #letter4444444{ 
                                grid-column:3/4 ;
                                grid-row:5/6;
                                background-color: rgb(68, 56, 16) }


                          
                                .letter41{ display: grid;
                                  grid-template-columns:repeat(6,15px);
                                  grid-template-rows: repeat(8,15px); }


                                  
                                  .letter41{position:absolute;
                                  
                                  bottom: 10%;
                                  right: 5%;
                                  z-index: 100;
                                  ;}
                                  
                                  #letter441{ 
                                    grid-column:1/6 ;
                                    grid-row:1/7;
                                    background-color: peachpuff}
                                    
                                    #letter4441{ 
                                      grid-column:1/5 ;
                                      grid-row:7/8;
                                      background-color: peachpuff}
                                    
                                      #letter44441{ 
                                        grid-column:2/5 ;
                                        grid-row:2/6;
                                        background-color: rgb(154, 98, 25)}
                              
                                        #letter444441{ 
                                          grid-column:2/3 ;
                                          grid-row:3/6;
                                          background-color: rgb(68, 56, 16)}
                                        
                                          #letter4444441{ 
                                            grid-column:3/4 ;
                                            grid-row:3/4;
                                            background-color: rgb(68, 56, 16) }
              
                                            #letter44444441{ 
                                              grid-column:3/4 ;
                                              grid-row:5/6;
                                              background-color: rgb(68, 56, 16) }
                                        
                                              .letter4:hover{background-color: rgb(232, 84, 30,0.5);}

                                              .letter41:hover{background-color: rgb(232, 84, 30,0.5);}

                                              .tumer{ display: grid;
                                                grid-template-columns:repeat(7,20px);
                                                grid-template-rows: repeat(7,20px); }
              
              
                                                
                                                .tumer{position:fixed;
                                                
                                                top: 5%;
                                                left: 5%;
                                                z-index: 100;
                                                ;}
                                                
                                                #tumer1{ 
                                                  grid-column:3/6 ;
                                                  grid-row:1/2;
                                                  background-color: palevioletred}

                                                  #tumer11{ 
                                                    grid-column:5/6 ;
                                                    grid-row:1/5;
                                                    background-color: palevioletred}

                                                    #tumer111{ 
                                                      grid-column:2/3 ;
                                                      grid-row:2/3;
                                                      background-color: palevioletred}

                                                      #tumer1111{ 
                                                        grid-column:3/5 ;
                                                        grid-row:2/3;
                                                  
                                                        background-color: white}

                                                        #tumer11111{ 
                                                          grid-column:2/5 ;
                                                          grid-row:3/5;
                                                          background-color: red}

                                                          #tumer111111{ 
                                                            grid-column:1/2 ;
                                                            grid-row:3/5;
                                                            background-color: brown}

                                                            #tumer1111111{ 
                                                              grid-column:2/6 ;
                                                              grid-row:5/6;
                                                              background-color: brown}

                                                              #tumer11111111{ 
                                                                grid-column:5/6 ;
                                                                grid-row:5/6;
                                                                background-color: red}

                                                                #tumer111111111{ 
                                                                  grid-column:5/6 ;
                                                                  grid-row:6/7;
                                                                  background-color: brown}

                                                                  #tumer1111111111{ 
                                                                    grid-column:6/7 ;
                                                                    grid-row:5/6;
                                                                    background-color: brown}

                                                                    #tumer11111111111{ 
                                                                      grid-column:6/7 ;
                                                                      grid-row:4/5;
                                                                      background-color: rgb(219, 92, 92)}

                                                                      #tumer111111111111{ 
                                                                        grid-column:4/5 ;
                                                                        grid-row:2/3;
                                                                        background-color: rgb(245, 216, 216)}
      
                                                                        .tumer:hover{background-color: rgb(232, 84, 30,0.5);}


                                                                        .tumer2{ display: grid;
                                                                          grid-template-columns:repeat(7,20px);
                                                                          grid-template-rows: repeat(7,20px); }
                                        
                                        
                                                                          
                                                                          .tumer2{position:fixed;
                                                                          
                                                                          top: 5%;
                                                                          right: 5%;
                                                                          z-index: 100;
                                                                          ;}
                                                                          
                                                                          #tumer21{ 
                                                                            grid-column:3/6 ;
                                                                            grid-row:1/2;
                                                                            background-color: palevioletred}
                          
                                                                            #tumer211{ 
                                                                              grid-column:5/6 ;
                                                                              grid-row:1/5;
                                                                              background-color: palevioletred}
                          
                                                                              #tumer2111{ 
                                                                                grid-column:2/3 ;
                                                                                grid-row:2/3;
                                                                                background-color: palevioletred}
                          
                                                                                #tumer21111{ 
                                                                                  grid-column:3/5 ;
                                                                                  grid-row:2/3;
                                                                            
                                                                                  background-color: white}
                          
                                                                                  #tumer211111{ 
                                                                                    grid-column:2/5 ;
                                                                                    grid-row:3/5;
                                                                                    background-color: red}
                          
                                                                                    #tumer2111111{ 
                                                                                      grid-column:1/2 ;
                                                                                      grid-row:3/5;
                                                                                      background-color: brown}
                          
                                                                                      #tumer21111111{ 
                                                                                        grid-column:2/6 ;
                                                                                        grid-row:5/6;
                                                                                        background-color: brown}
                          
                                                                                        #tumer211111111{ 
                                                                                          grid-column:5/6 ;
                                                                                          grid-row:5/6;
                                                                                          background-color: red}
                          
                                                                                          #tumer2111111111{ 
                                                                                            grid-column:5/6 ;
                                                                                            grid-row:6/7;
                                                                                            background-color: brown}
                          
                                                                                            #tumer21111111111{ 
                                                                                              grid-column:6/7 ;
                                                                                              grid-row:5/6;
                                                                                              background-color: brown}
                          
                                                                                              #tumer211111111111{ 
                                                                                                grid-column:6/7 ;
                                                                                                grid-row:4/5;
                                                                                                background-color: rgb(219, 92, 92)}
                          
                                                                                                #tumer2111111111111{ 
                                                                                                  grid-column:4/5 ;
                                                                                                  grid-row:2/3;
                                                                                                  background-color: rgb(245, 216, 216)}
                                
                                                                                                  .tumer:hover{background-color: rgb(232, 84, 30,0.5);}
                          
                                                                                                  .hosu{position: fixed;
                                                                                                    top:44%;
                                                                                                     left:17%;
                                                                                                      z-index:300;}
                                                                                                              
                                                                                               .hosu{ display:grid;
                                                                                                 grid-template-columns:repeat(6,10px);
                                                                                                   grid-template-rows:repeat(6,10px);}
                                                                                                              
                                                                                                              #hs1{grid-column:3/4;
                                                                                                              grid-row:1/2;
                                                                                                              background-color: darkblue;}
                                                                                                              
                                                                                                              #hs2{grid-column:2/5;
                                                                                                                grid-row:2/3;
                                                                                                                background-color: darkblue;}
                                                                                                              
                                                                                                                #hs3{grid-column:1/6 ;
                                                                                                                  grid-row:3/4;
                                                                                                                  background-color: darkblue;}
                                                                                                              
                                                                                                                  #hs4{grid-column: 2/5;
                                                                                                                    grid-row:4/5;
                                                                                                                    background-color: darkblue;}
                                                                                                                    #hs5{grid-column: 3/4;
                                                                                                                      grid-row:5/6;
                                                                                                                      background-color: darkblue;}
                                                                                                                      #hs6{grid-column: 3/4;
                                                                                                                        grid-row:3/4;
                                                                                                                        background-color:rgb(87, 87, 179);
                                                                                                                      
                                                                                                                      z-index:90;}


                                                                                                                      .hosu1{position: fixed;
                                                                                                                        top:36.5%;
                                                                                                                         right:4.5%;
                                                                                                                          z-index:300;}
                                                                                                                                  
                                                                                                                   .hosu1{ display:grid;
                                                                                                                     grid-template-columns:repeat(6,10px);
                                                                                                                       grid-template-rows:repeat(6,10px);}
                                                                                                                                  
                                                                                                                                  #hs11{grid-column:3/4;
                                                                                                                                  grid-row:1/2;
                                                                                                                                  background-color: darkblue;}
                                                                                                                                  
                                                                                                                                  #hs21{grid-column:2/5;
                                                                                                                                    grid-row:2/3;
                                                                                                                                    background-color: darkblue;}
                                                                                                                                  
                                                                                                                                    #hs31{grid-column:1/6 ;
                                                                                                                                      grid-row:3/4;
                                                                                                                                      background-color: darkblue;}
                                                                                                                                  
                                                                                                                                      #hs41{grid-column: 2/5;
                                                                                                                                        grid-row:4/5;
                                                                                                                                        background-color: darkblue;}
                                                                                                                                        #hs51{grid-column: 3/4;
                                                                                                                                          grid-row:5/6;
                                                                                                                                          background-color: darkblue;}
                                                                                                                                          #hs61{grid-column: 3/4;
                                                                                                                                            grid-row:3/4;
                                                                                                                                            background-color:rgb(87, 87, 179);
                                                                                                                                          
                                                                                                                                          z-index:90;}

                                                                                                                                          .hosu11{position:relative;                                                                                                                                            top:72%;
                                                                                                                                             right:18.5%;
                                                                                                                                              z-index:300;}
                                                                                                                                                      
                                                                                                                                       .hosu11{ display:grid;
                                                                                                                                         grid-template-columns:repeat(6,10px);
                                                                                                                                           grid-template-rows:repeat(6,10px);}
                                                                                                                                                      
                                                                                                                                                      #hs111{grid-column:3/4;
                                                                                                                                                      grid-row:1/2;
                                                                                                                                                      background-color: darkblue;}
                                                                                                                                                      
                                                                                                                                                      #hs211{grid-column:2/5;
                                                                                                                                                        grid-row:2/3;
                                                                                                                                                        background-color: darkblue;}
                                                                                                                                                      
                                                                                                                                                        #hs311{grid-column:1/6 ;
                                                                                                                                                          grid-row:3/4;
                                                                                                                                                          background-color: darkblue;}
                                                                                                                                                      
                                                                                                                                                          #hs411{grid-column: 2/5;
                                                                                                                                                            grid-row:4/5;
                                                                                                                                                            background-color: darkblue;}
                                                                                                                                                            #hs511{grid-column: 3/4;
                                                                                                                                                              grid-row:5/6;
                                                                                                                                                              background-color: darkblue;}
                                                                                                                                                              #hs611{grid-column: 3/4;
                                                                                                                                                                grid-row:3/4;
                                                                                                                                                                background-color:rgb(87, 87, 179);
                                                                                                                                                              
                                                                                                                                                              z-index:90;}





body{
overflow: hidden;
}