body{
  background-image:url(EVA.png);
  background-size: cover;
  overflow:hidden ;
}

.journal2 {
  position: absolute;
  top: -100px ;
  left: 267px;
  width:71.5%;/* Largeur du conteneur */
  height:46%;
  transform:scale(0.4) ;
  border: 8px solid white
}	


.book {
  border-radius: 15px;
  width: 500px; /* adjust size */
  max-width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
}
.pageL,	.pageR {
  height: 80%;
  width: 41%;
  display: inline-block;
  position: relative;
  border-radius: 10px;
}
.pageL {
  font-size : 12px ;
  left: 21px ;
  top: -2px ;
}
.pageR { 
   font-size : 12px ;
   left: 53px ;
   top: -2px ;
}

.book {     
  position : absolute ;
    left : 720px ;
    top: 400px;
    transform: scale(1.7);
}
	
.container1 {     
  position : absolute ;
    left : 1065px ;
    top: 575px;
    transform: scale(0.075);
    filter: drop-shadow(30px 0px 4px #898989);
}	
	
.container3 {  
  position : absolute;
    left : 320px ;
    top: 575px;
    transform: scale(0.075);
    filter: drop-shadow(30px 0px 4px #898989);
}		

.journal {
  -webkit-text-stroke: 0.6px black; /* width and color */
  position:absolute ;
    width:200px;        /* Largeur du conteneur */
    height:160px;       /* Hauteur du conteneur */
    left: 990px;
    top: 163px;
    transform: scale(2.9) ;  
    border-radius: 4px ;
    font-family: 'evangelion' ;
    color : white ;
}

.book4 {
  position:absolute ;
    width:200px;        /* Largeur du conteneur */
    height:160px;       /* Hauteur du conteneur */
    left: 380px;
    top: 155px;
    transform: scale(0.31) ;
    border-radius: 4px ;
    font-family: 'evangelion' ;

}

.cbox {
  position: absolute ;
  left : 120px ;
  top : 325px ;
  transform: scale(1.2) ;
}

 .container7 {
        position: absolute ;
        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: -130px ;
        left: -128px ;
        border-radius: 8px;
    }

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