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";
    font-size: 60px;
    text-align: center;
    margin: 20px;
}

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 */

.container1, .container2, .container3, .container4, .container5, .container6, .container7, .container9, .container10, .container11, .container12, .container13,.container14{
    position: absolute;  /* Positionnement absolu */
}

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

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

.container1, .container2 img, .container3 img, .container4, .container5, .container6, .container7, .container9, .container10, .container11, .container12, .container13, .container14{
    width: 100%; /* Prend toute la largeur du conteneur */
    height: 100%; /* Prend toute la hauteur du conteneur */
}

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

/* Position des conteneurs */


.container1 {
    width: 300px;        /* Largeur du conteneur */
    height: 300px;       /* Hauteur du conteneur */
    left: 70vw;
    top: 7.5vh;
    transform: scale(0.8)
}

.container2 {
    width: 700px;        /* Largeur du conteneur */
    height:700px;       /* Hauteur du conteneur */
    left: -100px;
    top: 310px;
  }
    
.container3 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 170px;
    top: 510px;
    transform: scale(0.5)
}

.container4 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 190px;
    top: 320px;
    transform: scale(0.3)
}

.container6 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 110px;
    top: 390px;
    transform: scale(0.2)
}

.container9 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 1300px;
    top: 340px;
    transform: scale(0.2)
}

.container10 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 480px;
    top: 350px;
    transform: scale(0.2)
}

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

.container12 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 718px;
    top: 390px;
    transform: scale(0.12)
}

.container13 {
    width:180px;        /* Largeur du conteneur */
    height:180px;       /* Hauteur du conteneur */
    left: 795px;
    top: 340px;
    transform: scale(0.4)
}

.container14 {
  position:absolute;
    width:150px;        /* Largeur du conteneur */
    height:200px;
    left: 810px;
    top: 350px;
    transform: scale(0.32);
    
}
  

/* Fin de gestion des images */

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

/* bouton de la page*/

 #username {
        font-size: 17px;
        margin-top: 10px;
        border-radius: 5px;
    }
    
#animal {
        font-size: 17px;
        margin-top: -5px;
        border-radius: 5px;
    }
    
    
#submit {
        font-size: 15.5px;
        margin-top: -10px;
        border-radius: 5px;
    }
    
#reset {
        font-size: 15.5px;
        margin-top: -10px;
        border-radius: 5px;
    }

/* Fin bouton de la page*/

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

 /* Gestion des ombres */

#nayuta, #denji, #kaworu, #asa, #kawodanse, #tenma {
    box-shadow: 30px 30px 60px 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: 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(0.4); /* Réduit la taille de l'image à 50% */
    animation: scrollLeftToRight2 25s linear infinite; /* Applique l'animation */
}

@keyframes scrollLeftToRight2 {
    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) */
    }
}

    #scroll2 {
    position: absolute;  /* Positionnement absolu pour pouvoir la déplacer */
    bottom: 0px;  /* 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(0.4); /* Réduit la taille de l'image à 50% */
    animation: scrollLeftToRight2 25s linear infinite; /* Applique l'animation */
}

@keyframes scrollLeftToRight2 {
    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 */


    .container2 {
        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) */
    }
}
 
    #scroll2 {
    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(0.4); /* Réduit la taille de l'image à 50% */
    animation: scrollLeftToRight2 25s linear infinite; /* Applique l'animation */
}

@keyframes scrollLeftToRight2 {
    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) */
    }
}

  /* Fin de le petit chat */