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;
}

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

/* Fond d'ecran */

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

/* 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{
    position: absolute;  /* Positionnement absolu */
}

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

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

.container9, .container12, .container50, .container15, .container16{
    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: 1320px;
    top: 70px;
    transform: scale(1.2) ; 
    filter: drop-shadow(30px 10px 4px #777777);
}


.container9 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 1300px;
    top: 340px;
    transform: scale(0.2) ;
    filter: drop-shadow(30px 10px 4px #898989);
}

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

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

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

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

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


/* Fin de gestion des images */


 /* Gestion des ombres */


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

 /* Gestion des animaux */

   
 #scroll {
    position: absolute;  /* Positionnement absolu pour pouvoir la déplacer */
    bottom: 120px;  /* Placer l'image en bas de l'écran */
    left: -400px; /* Position initiale à gauche (avant qu'elle ne commence à défiler) */
    height: 100px; /* Ajuste la taille de l'image si nécessaire */
    width: 20vw;
    transform: scale(2); /* Réduit la taille de l'image à 50% */
    animation: scrollLeftToRight2 25s linear infinite; /* Applique l'animation */
    filter: drop-shadow(30px 10px 4px #777777);
}

@keyframes scrollLeftToRight1 {
    0% {
        left: -600px; /* Début : l'image commence hors de l'écran à gauche */
    }
    100% {
        left: 100%; /* Fin : l'image se déplace complètement à droite (100% du viewport) */
    }
}

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




















































/* Ecran superieur a 1920x1080*/

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

@media screen and (min-width: 1920px) {

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

    h1 {
        font-size: 80px;
        margin-top: 50px;
    }

    h2 {
        font-size: 40px;
        margin-top: 20px;
    }

    p {
        font-size: 25px;
    }

/* Fin de forme de texte (titre etc.)*/

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

/* bouton de la page*/


 #username {
        font-size: 15px;
        margin-top: 30px;
        border-radius: 5px;
    }
    
#animal {
        font-size: 15px;
        margin-top: 5px;
        border-radius: 5px;

    }
    
    
#submit {
        font-size: 17px;
        margin-top: -3px;
        border-radius: 5px;
    }
    
#reset {
        font-size: 17px;
        margin-top: 0px;
        border-radius: 5px;
    }
    


  /* Fin bouton de la page*/
  
/* ------------------------------------------------------------------------------------------------------------*/
  
  /* Gestion des images */


    .container1 {
        width: 200px;        /* Largeur du conteneur */
        height:400px;       /* Hauteur du conteneur */
        left: 64.1vw;
        top: 20vh;
    }
    
    .container12 {
        width: 400px;        /* Largeur du conteneur */
        height:400px;       /* Hauteur du conteneur */
        left: 1px;
        top: 20px;
    }
    
    .container13 {
        width: 400px;        /* Largeur du conteneur */
        height:400px;       /* Hauteur du conteneur */
        left: 1vw;
        top: 20vh;
    }
    
}

 /* Fin de Gestion des images */
 
/* ------------------------------------------------------------------------------------------------------------*/

 /* Gestion des ombres */

 #tenma {
    box-shadow: 40px 40px 80px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
}
    
 /* Fin de Gestion des ombres */
      
/* ------------------------------------------------------------------------------------------------------------*/      
      
 /* Gestion des animaux */
 
    #scroll {
    position: absolute;  /* Positionnement absolu pour pouvoir la déplacer */
    bottom: 50px;  /* Placer l'image en bas de l'écran */
    left: -200px; /* Position initiale à gauche (avant qu'elle ne commence à défiler) */
    height: 100px; /* Ajuste la taille de l'image si nécessaire */
    width: 20vw;
    transform: scale(0.4); /* Réduit la taille de l'image à 50% */
    animation: scrollLeftToRight1 20s linear infinite; /* Applique l'animation */
}

@keyframes scrollLeftToRight1 {
    0% {
        left: -400px; /* Début : l'image commence hors de l'écran à gauche */
    }
    100% {
        left: 100%; /* Fin : l'image se déplace complètement à droite (100% du viewport) */
    }
}
 

  /* Fin de le petit chat */