*{
    margin: 0;
    padding: 0;
}
   
body{
   
    background-color: white;
   
    width: 100vw;
    height: 50vw; 
    box-sizing: border-box;
    --blue-green: linear-gradient(#004366, rgb(1, 32, 1));
    
}

    


.conteneur{
   
    position: fixed;
    top:0;
    right: 0;
    width: 100vw;
    
}




#masjid{

    position: absolute;
    top:12vw;
    right:62.5vw;
    width:24vw;
    height: 26.5vw;
    


}
/*****************************************************PRINTEMPS********************************************/
.div_printemps
{
    float: right;
    right: 1vw;
    top: 0;
    width:24vw;
    height: 50vw;
   
 
}

.div_printemps:hover
{
    box-shadow: -0.5vw 0.5vw 0.5vw rgba(168, 23, 144, 0.692);
    background: linear-gradient(skyblue, rgb(168, 23, 144) ,rgb(78, 201, 78) );
    
}

#oiseau_nid
{position:absolute;
    top:24.19vw;
    right:9.75vw;
    width:5.69vw;
    height:3.218vw;


}

/*******************************************************ETE***********************************************/

.div_ete
{
    float: right;
    right: 26vw;
    top: 0;
    width:24vw;
    height: 50vw;
    
    
}

.div_ete:hover
{
    box-shadow: -0.5vw 0.5vw 0.5vw  rgba(1, 89, 136, 0.678);
    background: linear-gradient(rgb(0, 67, 102, 0.3), rgb(1, 32, 1, 0.3))  ;
    
}

#div_haql_sanabil img{
    position:absolute;
    top:22.875vw;
    right:28.2vw;
    width: 24vw;
    height: 8.5vw;

}
 /************************************************************************************************************/
.div_kharif
{
    float: right;
    right: 51vw;
    top: 0;
    width:24vw;
    height: 50vw;
}

.div_kharif:hover
{
    box-shadow: -0.5vw 0.5vw 0.5vw  rgb(230, 125, 6);
    background: linear-gradient(rgb(255, 136, 0, 0.3), rgb(216, 168, 10, 0.3))  ;
    
}

.div_chita
{
    float: right;
    right: 76vw;
    top: 0;
    width:24vw;
    height: 50vw;
}

.div_chita:hover
{
    box-shadow: -0.5vw 0.5vw 0.5vw  rgba(110, 60, 68, 0.425);
    background: linear-gradient(to top, rgba(27, 81, 161, 0.562), rgba(82, 81, 78, 0.5))  ;
    
}
.div_ciel_terre, .div_chams, .div_nuage_printemps, .div_chajra {
    position: absolute;
    right:1;
    top:0;    
    height:50vw;
    width:24vw;
} 

.div_printemps svg
{   position: absolute;
    top:0;
    right:1vw;
    width:24vw;
    height: 50vw;
    
}

.div_ciel_terre_ete .etoile_lune .fawakih, .div_chajar_ete{
    position: absolute;
    right:26vw;
    top:0;
    width:24vw;
    height: 50vw;    
  
}
.div_ete svg

{   position: absolute;
    top:0;
    right:26vw;
    width:24vw;
    height: 50vw;  
}

.div_ete img{
    position:absolute;
    top:42vw;
    right:45vw;
    width:4vw;
    height:6vw;
    
}


.div_ciel_terre_kharif, .marhaba_kharif, .div_jabal_sahl, .div_mix_feuille_kharif, .groupe_choujaira_kharif, .groupes_feuille_kharif, .div_chajra_kharif
{
    position: absolute;
    right:51vw;
    top:0;
    width:24vw;
    height: 50vw;  
    

}


.div_kharif svg
{   
    position: absolute;
    top:0;
    right:0;
    width:24vw;
    height: 50vw;  
}

.div_ciel_terre_hiver, .groupe_nuage_eclair, .groupe_jabal_neige, .div_plantes_hiver_neige
{
   
    position: absolute;
    right:76vw;
    top:0;
    width:24vw;
    height: 50vw;    
}
.div_chita svg
{   position: absolute;
    top:0;
    right:0;
    width:24vw;
    height: 50vw;  
    color: #f3ddb7;
}


a{
    cursor:pointer; 
}



#SINAN_kharif_1 svg {

    position: absolute;
    top: 34vw;
    right: 48.5vw;    

    width:10vw;
    height: 13w;       
}

.div_feuille_volante svg {

    position: absolute;
    top: 34vw;
    right: 48.5vw;    
    width:10vw;
    height: 13vw;    
}

.div_feuille_volante_1 svg {
    position: absolute;
    top: 33.5vw;
    right: 54vw;  
    width:10vw;
    height: 13vw;   
}

#SINAN, #groupe_feuille_jeu{
    position: absolute;
    top: 34.5vw;
    right: 54vw; 
      
    width:7vw;
    height: 7vw;   
}

#groupe_feuille_jeu{
    position: absolute;
    top: 44vw;
    right: 60vw;       
    width:10vw;
    height:10vw;   
}


@keyframes lancer_4{
    0%{
        transform: translate(-5px, -20px);

    }
25%{
    transform: translate(-5px, -30px);
}
50%{
    transform:  translate(-9px, -5px);
}
75%{
    transform:  translate(-5px, -40px);
}
100%{
    transform:  translate(-9px, -5px);
}

}


@keyframes lancer_1{
    0%{
        transform: translate(-5px, -20px);

    }
25%{
    transform: translate(-10px, -30px);
}
50%{
    transform:  translate(-15px, -40px);
}
75%{
    transform:  translate(-20px, -45px);
}
100%{
    transform:  translate(-25px, -50px);
}

}

@keyframes lancer_2{
    0%{
        transform: translate(5px, -20px);

    }
25%{
    transform: translate(10px, -30px);
}
50%{
    transform:  translate(15px, -40px);
}
75%{
    transform:  translate(20px, -45px);
}
100%{
    transform:  translate(25px, -50px);
}

}

@keyframes lancer_3_1{
    0%{
        transform: translate(5px, -10px);

    }
25%{
    transform: translate(7px, -20px);
}
50%{
    transform:  translate(9px, -30px);
}
75%{
    transform:  translate(12px, -35px);
}
100%{
    transform:  translate(15px, -40px);
}

}

@keyframes lancer_3_2{
    0%{
        transform: translate(-5px, -10px);

    }
25%{
    transform: translate(-7px, -20px);
}
50%{
    transform:  translate(-9px, -30px);
}
75%{
    transform:  translate(-12px, -35px);
}
100%{
    transform:  translate(-15px, -40px);
}

}

@keyframes lancer_5{
    0%{
        transform: translate(0px, -10px);

    }
25%{
    transform: translate(0px, -20px);
}
50%{
    transform:  translate(0px, -30px);
}
75%{
    transform:  translate(0px, -35px);
}
100%{
    transform:  translate(0px, -40px);
}

}




#SINAN{
    animation: lancer_4 3s linear infinite;
}

#groupe_feuille_volante_1, #groupe_feuille_volante_1_1{

    animation: lancer_3_1 1.5s linear infinite;
}

#groupe_feuille_volante_3, #groupe_feuille_volante_3_1{

    animation: lancer_5 1.5s linear infinite;
}

#groupe_feuille_volante_5, #groupe_feuille_volante_5_1{

    animation: lancer_3_2 1.5s linear infinite;
}

#groupe_feuille_volante_4, #groupe_feuille_volante_4_1{

    animation: lancer_5 1.5s linear infinite;
}



#groupe_feuille_volante_yassar, #groupe_feuille_volante_yassar_1{

    animation: lancer_1 1.5s linear infinite;
}

#groupe_feuille_volante_yamin, #groupe_feuille_volante_yamin_1{

    animation: lancer_2 1.5s linear infinite;
}


#pageSinan{
  position:absolute;
  top:40vw;
  right:92vw;
  width: 6vw;
}