body{
  background-image:url(fond2.jpg);
  overflow-y: hidden ;
  overflow-x: auto ;
  height: 100%;
}

.pkmn {
  position: relative;
  top: 30px ;
  left: 550px ;
  width:750px;        /* Largeur du conteneur */
  height:115px; 
  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: 230px ;
  left: 140px ;
  width:550px;        /* Largeur du conteneur */
  height:70px; 
  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)
}	



	
	
  .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: -1018px ;
        left: -1400px ;
        border : solid black 5px ; 
    }

.container7{
    transition: transform 0.7s 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: 343px;
    top: -105px;
    transform: scale(0.7) ;  
}

.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.708); /* 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! */
}
	

.tel {
  position:relative ;
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 303px;
    top: -470px;

}

.tel{
    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;
        transform: scale(1.8)
       
}

.tel:hover{
    transform: scale(1.85) rotate(2deg) ;
 
}

.tel{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.tel 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);
}
.tel:hover span, .farhan:focus span {
  opacity: 1;
}
.tel: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! */
}