body{
  background-image:url(nature.png);
  background-repeat: no-repeat;
  overflow-y: hidden ;
  overflow-x: auto ;
  height: 100%;
}

.pkmn {
  position: relative;
  top: 90px ;
  left: 50px ;
  width:750px;        /* Largeur du conteneur */
  height:85px; 
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
  filter: drop-shadow(10px 0px 2px #172d26)
}
	
	
.skibi {
  position: relative;
  top: 130px ;
  left: 70px ;
  width:450px;        /* Largeur du conteneur */
  height:310px; 
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
  filter: drop-shadow(10px 0px 2px #172d26)
}	
	
	
.fondement {     
  position : relative ;
    left : 470px ;
    top: -331px;
    transform: scale(0.54);
      filter: drop-shadow(20px 0px 2px #172d26)
}

.skibi2 {
  position: relative;
  top: -430px ;
  left: 70px ;
  width:450px;        /* Largeur du conteneur */
  height:310px; 
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
  filter: drop-shadow(10px 0px 2px #172d26)
}	
	
.pkmn2 {
  position: relative;
  top: -1772px ;
  left: 1030px ;
  width:750px;        /* Largeur du conteneur */
  height:85px; 
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
  filter: drop-shadow(10px 0px 2px #172d26)
}	

.farhan3 {
  position: relative;
  top: -2357px ;
  left: 918px ;
  width:260px;        /* Largeur du conteneur */
  height:65px; 
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
  filter: drop-shadow(10px 0px 2px #172d26)
}

.ibnbaz2 {
  position: relative;
  top: -3661px ;
  left: 917px ;
  width:260px;        /* Largeur du conteneur */
  height:65px; 
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
  filter: drop-shadow(10px 0px 2px #172d26)
}	


.ilyes2 {
  position: relative;
  top: -4900px ;
  left: 1254px ;
  width:260px;        /* Largeur du conteneur */
  height:65px; 
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
  filter: drop-shadow(10px 0px 2px #172d26)
}	

.raza2 {
  position: relative;
  top: -2900px ;
  left: 1602px ;
  width:260px;        /* Largeur du conteneur */
  height:65px; 
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
  filter: drop-shadow(10px 0px 2px #172d26)
}	

.daf2 {
  position: relative;
  top: -3230px ;
  left: 1605px ;
  width:260px;        /* Largeur du conteneur */
  height:65px; 
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
  filter: drop-shadow(10px 0px 2px #172d26)
}	

.fondement2 {     
  position : relative ;
    left : 430px ;
    top: -845px;
    transform: scale(0.63);
    filter: drop-shadow(20px 0px 2px #172d26)
}
	
	
 .container7 {
        position: relative ;
        display: inline-block; /* Assure que le conteneur se comporte comme un élément en ligne */
        transform: scale(0.2); /* Réduit la taille de 50% */
        transform-origin: center; /* Ajuste l'origine de la transformation pour qu'elle soit centrée */
        top: -5710px ;
        left: -125px ;
        border : solid black 5px ; 
    }

.container7{
    transition: transform 0.5s ease; /* Ajout de l'animation de zoom */
    display: inline-block; /* Nécessaire pour la mise en place d'une zone réduite */
    padding: 3px;
}

.container7:hover{
   transform: scale(0.21); /* Agrandissement de 20% au survol */
}

.container7{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.container7 span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 3.5rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.container7:hover span, .container7:focus span {
  opacity: 1;
}
.container7:hover img{
  /* add hover effects like transform or filter to your images here! */
}	
	

.farhan {
  position:relative ;
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 653px;
    top: -2010px;
    transform: scale(0.32) ;  
    border-radius: 4px ;
    border: 10px solid #ffffff;
}

.ibnbaz {
  position:relative ;
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 878px;
    top: -3567px;
    transform: scale(0.75) ;  
    border-radius: 4px ;
    border: 8px solid #ffffff;
}

.ilyes {
  position:relative ;
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 929px;
    top: -4529px;
    transform: scale(0.27) ;  
    border-radius: 4px ;
    border: 10px solid #ffffff;
}


.raza {
  position:relative ;
    width:200px;        /* Largeur du conteneur */
    height:160px;       /* Hauteur du conteneur */
    left: 1546px;
    top: -2760px;
    transform: scale(0.64) ;  
    border-radius: 4px ;
    border: 8px solid #ffffff;
}

.daf {
  position:relative ;
    width:200px;        /* Largeur du conteneur */
    height:160px;       /* Hauteur du conteneur */
    left: 1465px;
    top: -2996px;
    transform: scale(0.47) ;  
    border-radius: 4px ;
    border: 8px solid #ffffff;
}


























.farhan{
    transition: transform 0.9s ease; /* Ajout de l'animation de zoom */
    display: inline-block; /* Nécessaire pour la mise en place d'une zone réduite */
    padding: 3px;
}

.farhan:hover{
   transform: scale(0.35); /* Agrandissement de 20% au survol */
}

.farhan{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.farhan span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 4rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.farhan:hover span, .farhan:focus span {
  opacity: 1;
}
.farhan:hover img{
  /* add hover effects like transform or filter to your images here! */
}
	
	
	
	
	
	
	
.ibnbaz{
    transition: transform 0.9s ease; /* Ajout de l'animation de zoom */
    display: inline-block; /* Nécessaire pour la mise en place d'une zone réduite */
    padding: 3px;
}

.ibnbaz:hover{
   transform: scale(0.8); /* Agrandissement de 20% au survol */
}

.ibnbaz{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.ibnbaz span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 4rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.ibnbaz:hover span, .ibnbaz:focus span {
  opacity: 1;
}
.ibnbaz:hover img{
  /* add hover effects like transform or filter to your images here! */
  
  
  
  
  
  
  
  
  
  
  
  
  
  

}.ilyes{
    transition: transform 0.9s ease; /* Ajout de l'animation de zoom */
    display: inline-block; /* Nécessaire pour la mise en place d'une zone réduite */
    padding: 3px;
}

.ilyes:hover{
   transform: scale(0.3); /* Agrandissement de 20% au survol */
}

.ilyes{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.ilyes span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 4rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.ilyes:hover span, .ilyes:focus span {
  opacity: 1;
}
.ilyes:hover img{
  /* add hover effects like transform or filter to your images here! */
}
	
	






.raza{
    transition: transform 0.9s ease; /* Ajout de l'animation de zoom */
    display: inline-block; /* Nécessaire pour la mise en place d'une zone réduite */
    padding: 3px;
}

.raza:hover{
   transform: scale(0.69); /* Agrandissement de 20% au survol */
}

.raza{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.raza span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 4rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.raza:hover span, .raza:focus span {
  opacity: 1;
}
.raza:hover img{
  /* add hover effects like transform or filter to your images here! */
}


.daf{
    transition: transform 0.9s ease; /* Ajout de l'animation de zoom */
    display: inline-block; /* Nécessaire pour la mise en place d'une zone réduite */
    padding: 3px;
}

.daf:hover{
   transform: scale(0.51); /* Agrandissement de 20% au survol */
}

.daf{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.daf span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 4rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.daf:hover span, .daf:focus span {
  opacity: 1;
}
.daf:hover img{
  /* add hover effects like transform or filter to your images here! */
}













.fondement{
    transition: transform 0.9s ease; /* Ajout de l'animation de zoom */
    display: inline-block; /* Nécessaire pour la mise en place d'une zone réduite */
    padding: 3px;
}

.fondement:hover{
   transform: scale(0.58); /* Agrandissement de 20% au survol */
}

.fondement{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.fondement span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 4rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.fondement:hover span, .fondement:focus span {
  opacity: 1;
}
.fondement:hover img{
  /* add hover effects like transform or filter to your images here! */
}










.fondement2{
    transition: transform 0.9s ease; /* Ajout de l'animation de zoom */
    display: inline-block; /* Nécessaire pour la mise en place d'une zone réduite */
    padding: 3px;
}

.fondement2:hover{
   transform: scale(0.67); /* Agrandissement de 20% au survol */
}

.fondement2{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.fondement2 span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 4rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.fondement2:hover span, .fondement2:focus span {
  opacity: 1;
}
.fondement2:hover img{
  /* add hover effects like transform or filter to your images here! */
}