html, body {
    width: 100vw;   /* 100% de la largeur de la fenêtre */
    height: 100vh;  /* 100% de la hauteur de la fenêtre */
    margin: 0;
    padding: 0;
    overflow : hidden ;
}

body{
  background-image:url(fond2.jpg);
}

/* ------------------------------------------------------------------------------------------------------------*/

/* Fond d'ecran */


/* Fin de fond d'ecran */

/* ------------------------------------------------------------------------------------------------------------*/

/* Définition des polices */

@font-face {
    src: url('font/BitcountGridDouble_Cursive-SemiBold.ttf');
    font-family:BitcountGridDouble;
}

@font-face {
    src: url('font/evangelion.otf');
    font-family:evangelion ;
}

/* Fin de définition des polices */

/* ------------------------------------------------------------------------------------------------------------*/

/* Forme de texte (titre etc.)*/

h1 {
    font-family: "evangelion", "courier new", "arial";
}

h2 {
    font-size: 30px;
    text-align: center;
}

p {
    font-size: 20px;
    text-align: center;
}

dl {
    font-size: 25px;
    text-align: center;
}

dd {
    font-size: 20px;
}

dt {
    font-size: 22px;
}
  
/* Fin de forme de texte (titre etc.)*/



/* Gestion des images */

.container9, .container12, .container50, .container15, .container16, .container17, .container18, .container19, .container20, .container22, .container23{
    position: relative;  /* Positionnement absolu */
}

/* ------------------------------------------------------------------------------------------------------------*/

/* Image à l'intérieur des conteneurs */

.container9, .container12, .container50, .container15, .container16, .container17, .container18, .container19, .container20, .container22, .container23{
    width: 100%; /* Prend toute la largeur du conteneur */
    height: 100%; /* Prend toute la hauteur du conteneur */
}

/* ------------------------------------------------------------------------------------------------------------*/

/* Position des conteneurs */

.container16 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 1340px;
    top: 20px;
    transform: scale(1.4) ; 
    filter: drop-shadow(30px 10px 4px #777777);
}

.trophe5 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 1100px;
    top: -121px;
    transform: scale(0.26) ;
    position : fixed
}

.mons {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 130px;
    top: 451px;
    transform: scale(0.13) ;
    position : fixed
}

.rak {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 17px;
    top: 448px;
    transform: scale(0.12) ;
    position : fixed
}

.hous{
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 17px;
    top: 310px;
    transform: scale(0.74) ;
    position : fixed ;
}

.container9 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 1260px;
    top: -1vw;
    transform: scale(0.26) ;
}

.container12 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 450px;
    top: -1000px;
    transform: scale(0.9);
}

.container50 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 775px;
    top: -1435px;
    transform: scale(0.75) ;
    filter: drop-shadow(30px 0px 4px #898989);
}

.container15 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: -180px;
    top: -650px;
    transform: scale(0.4) ;  
}

.container17 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 1150px;
    top: -1810px;
    transform: scale(0.35) ;  
}

.container18 {
    width:500px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 880px;
    top: -2223px;
    transform: scale(0.25) ;  
}

.container19 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 80px;
    top: -1570px;
    transform: scale(1.05) ;
    filter: drop-shadow(30px 0px 4px #898989);
}

.container20 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: -670px;
    top: -1864px;
    transform: scale(0.25);
}

.container22 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: -1190px;
    top:-2092px;
    transform: scale(0.5);
}

.container92 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 558px;
    top: 242px;
    transform: scale(0.48);
    position:absolute ;
}

.container45 {
    position : absolute ;
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 1008px;
    top: -82px;
    transform: scale(0.55);
}

.container46 {
    position : absolute ;
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 1108px;
    top: -70px;
    transform: scale(0.1);
}

.container48 {
    position : absolute ;
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 1145px;
    top: -47px;
    transform: scale(0.45);
}

.trophe {
  position : relative ;
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 1260px;
    top: 100px;
    transform: scale(0.26) ;
}
.regle {
  position : relative ;
  top : 100px ;
  transform : scale(0.8)
}
/* ------------------------------------------------------------------------------------------------------------*/

.container50{
    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;
}

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

.container50{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.container50 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);
}
.container50:hover span, .container50:focus span {
  opacity: 1;
}
.container50:hover img{
  /* add hover effects like transform or filter to your images here! */
}

.container24 {
    position:absolute ;
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 925px;
    top:-2660px;
    transform: scale(0.1);
}

.container24{
    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;
}

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

.container24{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.container24 span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 10rem;
  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);
}
.container24:hover span, .container24:focus span {
  opacity: 1;
}
.container24:hover img{
  /* add hover effects like transform or filter to your images here! */
}

.container15{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.container15 span {
  opacity: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 7rem;
  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);
}
.container15:hover span, .container15:focus span {
  opacity: 1;
}


.container15{
    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;
}

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


.container18{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.container18 span {
  opacity: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 10rem;
  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);
}
.container18:hover span, .container18:focus span {
  opacity: 1;
}


.container18{
    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;
}

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

.container20{
    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;
}

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

.container20{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.container20 span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 11rem;
  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);
}
.container20:hover span, .container20:focus span {
  opacity: 1;
}
.container20:hover img{
  /* add hover effects like transform or filter to your images here! */
}

.container22{
    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;
}

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

.container22{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.container22 span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 60%;
  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);
}
.container22:hover span, .container22:focus span {
  opacity: 1;
}
.container22:hover img{
  /* add hover effects like transform or filter to your images here! */
}


/* Fin de gestion des images */


 /* Gestion des ombres */


    
 /* Fin de Gestion des ombres */
      
/* ------------------------------------------------------------------------------------------------------------*/