/* Réinitialisation globale */
* {
  margin: 0;
  padding: 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: calc(1.2vw + 1.1vh + 1vmin);
}

/* Animations */
@keyframes color {
  0%, 100% { background: #33CCCC; }
  10% { background: #33CC36; }
  20% { background: #B8CC33; }
  30% { background: #FCCA00; }
  40% { background: #FCA300; }
  50% { background: #FC6D00; }
  60% { background: #fc0000c5; }
  70% { background: #FC00A3; }
  90% { background: #2791ac; }
}

@keyframes zoom-in-zoom-out {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes rotationLoop {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Corps de la page */
body {
  animation: color 8s infinite linear;
}

/* Liens et navigation */
.container_links {
  border: 3mm ridge rgba(211, 220, 50, 0.6);
  display: flex;
  justify-content: center;
  margin-top: 0.5%;
}

.links {
  text-align: center;
  justify-content: space-evenly;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: white;
}

/* Navbar */
.navbar {
  margin-top: 1%;
  display: flex;
  justify-content: center;
}

.splashscreen {
  max-width: 80%;
  height: auto;
  animation: zoom-in-zoom-out 1s ease infinite;
}

/* Zombie Sections */
.txtNbrZombie,
.txtNbrTotalZombie {
  text-align: center;
}

.containerZombie {
  display: flex;
  justify-content: center;
}

.zombie {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zombierotate {
  animation: rotationLoop 2s infinite;
}

/* Générateur de zombies */
.generateurZombie {  
  display: grid;
  height: 60vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-template-areas:
    ". Head Head ."
    ". Head Head ."
    "LeftArm Body Body RightArm"
    "LeftArm Body Body RightArm"
    "LeftArm Body Body RightArm"
    ". LeftLeg RightLeg ."
    ". LeftLeg RightLeg ."
    ". LeftLeg RightLeg .";
}

.Head { grid-area: Head; }
.LeftArm { grid-area: LeftArm; }
.Body { grid-area: Body; }
.RightArm { grid-area: RightArm; }
.LeftLeg { grid-area: LeftLeg; }
.RightLeg { grid-area: RightLeg; }

.imgZombie {
  width: 100%;
  height: 100%;
}