body {
  margin: 0;
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  counter-reset: game;
}
.phone {
  position: relative;
  border: 8px solid black;
  border-radius: 40px;
  width: 300px;
  height: 600px;
  background-image: url("../images/fondoMinion.jpeg");
  background-size: cover;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
h3 {
  font-family: "MuseoModerno", sans-serif;
  font-weight: 500;
  color: #a3064e;
  font-size: 20px;
  margin-left: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}
/*--------------------------------------------------------*/
/*Contador del juego*/

input:checked {
  counter-increment: game;
}
.total-count::after {
  content: counter(game);
}

/*---------------------------------------------------------*/
/*Capas*/

.layer-1 {
  position: absolute;
  z-index: 1;
  height: 480px;
  width: 80px;
  /* background-color: white; */
  bottom: 0;
  right: 60px;
  animation-name: movement1;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes movement1 {
  0% {
    bottom: 0;
  }
  25% {
    bottom: -15%;
  }
  100% {
    bottom: 0;
  }
}

/*Sintaxis para poder utilizar un checkbox en una animación y relacionarla con una de las capas*/
.layer-1 input[type="checkbox"] {
  appearance: none;
  width: 80px;
  height: 100px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin: 0;
}

.layer-2 {
  position: absolute;
  z-index: 2;
  height: 520px;
  width: 80px;
  /* background-color: white; */
  bottom: 0;
  left: 60px;
  animation-name: movement2;
  animation-duration: 1.9s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
@keyframes movement2 {
  0% {
    bottom: 0;
  }
  25% {
    bottom: -20%;
  }
  100% {
    bottom: 0;
  }
}
.layer-2 input[type="checkbox"] {
  appearance: none;
  width: 80px;
  height: 100px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin: 0;
}

.layer-3 {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  width: 240px;
  height: 390px;
  background-image: url("../images/coheteMinion.jpeg");
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 20px;
}

.layer-4 {
  position: absolute;
  z-index: 4;
  height: 370px;
  width: 130px;
  /* background-color: white; */
  bottom: 0;
  left: 30px;
  animation-name: movement3;
  animation-duration: 2.5s;
  animation-timing-function: cubic-bezier(0.03, 0.86, 0.82, 0.53);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes movement3 {
  0% {
    bottom: 0;
  }
  25% {
    bottom: -20%;
  }
  100% {
    bottom: 0;
  }
}
.layer-4 input[type="checkbox"] {
  appearance: none;
  width: 120px;
  height: 100px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin: 0;
}

.layer-5 {
  position: absolute;
  z-index: 5;
  margin: 0 auto;
  bottom: 0;
  width: 200px;
  height: 290px;
  background-image: url("../images/coheteMinion.jpeg");
  background-size: cover;
  border-radius: 20px;
}

.layer-6 {
  position: absolute;
  z-index: 6;
  height: 280px;
  width: 100px;
  /* background-color: white; */
  bottom: 0;
  right: 45px;
  animation-name: movement4;
  animation-duration: 1.8s;
  animation-timing-function: cubic-bezier(0.48, 0.23, 0.09, 0.84);
  animation-iteration-count: infinite;
}
@keyframes movement4 {
  0% {
    bottom: 0;
  }
  25% {
    bottom: -20%;
  }
  100% {
    bottom: 0;
  }
}
.layer-6 input[type="checkbox"] {
  appearance: none;
  width: 100px;
  height: 100px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin: 0;
}

.layer-7 {
  position: absolute;
  z-index: 7;
  margin: 0 auto;
  right: 0;
  bottom: 0;
  width: 180px;
  height: 195px;
  background-image: url("../images/gummyMinion.jpeg");
  background-size: cover;
  border-radius: 20px;
}

.layer-8 {
  position: absolute;
  z-index: 8;
  margin: 0 auto;
  left: 0;
  right: 60px;
  bottom: 0;
  width: 90px;
  height: 80px;
  background-image: url("../images/paquetesMinion2_preview_rev_2.png");
}

.layer-9 {
  position: absolute;
  z-index: 9;
  margin: 0 auto;
  left: 0;
  bottom: 0;
  width: 90px;
  height: 90px;
  background-image: url("../images/minion1_preview_rev_1.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.layer-10 {
  position: absolute;
  z-index: 10;
  margin: 0 auto;
  right: 70px;
  bottom: 0;
  width: 100px;
  height: 100px;
  background-image: url("../images/minion2_preview_rev_1.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.layer-11 {
  position: absolute;
  z-index: 11;
  margin: 0 auto;
  right: 0;
  width: 80px;
  height: 270px;
  background-image: url("../images/gruaMinion_preview_rev_1.png");
  background-size: cover;
  background-repeat: no-repeat;
}
/*----------------------------------------------------------*/
/*Dibujos de CSS*/

/*Stuart*/
.left-hair1S {
  background: black;
  width: 20px;
  height: 4px;
  left: 18px;
  position: absolute;
  top: 2px;
  border-radius: 50% 50% 0 0;
  z-index: 1;
}
.left-hair2S {
  background: black;
  width: 20px;
  height: 4px;
  left: 17px;
  position: absolute;
  top: 9px;
  border-radius: 50% 50% 0 0;
  z-index: 1;
}
.right-hair1S {
  background: black;
  width: 20px;
  height: 4px;
  right: 18px;
  position: absolute;
  top: 2px;
  border-radius: 50% 50% 0 0;
  z-index: 1;
}
.right-hair2S {
  background: black;
  width: 20px;
  height: 4px;
  right: 17px;
  position: absolute;
  top: 9px;
  border-radius: 50% 50% 0 0;
  z-index: 1;
}
.head {
  width: 80px;
  height: 120px;
  background-color: #fbca08;
  border-radius: 40%;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  top: 5px;
}
.head__eye--belt {
  width: 80px;
  height: 10px;
  background: black;
  position: absolute;
  top: 28px;
  border-radius: 20%;
}
.head__eye--glass {
  width: 30px;
  height: 30px;
  background: #c0c0c0;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50%;
  border: gray solid 4px;
}
.head__eye--white {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: whitesmoke;
  top: 1px;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  animation-name: blink;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  5% {
    transform: scaleY(0.2);
  }
  10% {
    transform: scaleY(1);
  }
}

.head__eye--iris {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: -webkit-linear-gradient(
    180deg,
    #50312d,
    #71301c,
    #a75938
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    180deg,
    #50312d,
    #71301c,
    #a75938
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.head__eye--pupil {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: black;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.mouth {
  width: 40px;
  height: 20px;
  background: black;
  position: absolute;
  top: 65px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 4px 4px 70% 70%;
}
.mouth__tongue {
  width: 30px;
  height: 10px;
  background: #b84e50;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50% 50%;
}
.mouth__teeth {
  width: 40px;
  height: 6px;
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-left: -4px;
}
.teeth1 {
  width: 6px;
  height: 6px;
  background: white;
  position: absolute;
  border-radius: 0 0 50% 50%;
  left: -1px;
}
.teeth2 {
  width: 6px;
  height: 6px;
  background: white;
  position: absolute;
  border-radius: 0 0 50% 50%;
  left: 6px;
}
.teeth3 {
  width: 6px;
  height: 6px;
  background: white;
  position: absolute;
  border-radius: 0 0 50% 50%;
  left: 13px;
}
.teeth4 {
  width: 6px;
  height: 6px;
  background: white;
  position: absolute;
  border-radius: 0 0 50% 50%;
  left: 20px;
}
.teeth5 {
  width: 6px;
  height: 6px;
  background: white;
  position: absolute;
  border-radius: 0 0 50% 50%;
  left: 27px;
}
.teeth6 {
  width: 5px;
  height: 6px;
  background: white;
  position: absolute;
  border-radius: 0 0 50% 50%;
  left: 34px;
}
.suspenderLeft {
  width: 5px;
  height: 40px;
  background: #406a8b;
  position: absolute;
  top: 70px;
  transform: rotate(-48deg) translateX(7px) translateY(8px);
  border-radius: 30%;
}
.suspenderRight {
  width: 5px;
  height: 40px;
  background: #406a8b;
  position: absolute;
  top: 60px;
  transform: rotate(48deg) translateX(50px) translateY(-40px);
  border-radius: 30%;
}

/*----------------------------------------------------------*/
/*Kevin*/
.left-hair1K {
  background: black;
  width: 3px;
  height: 30px;
  left: 38px;
  position: absolute;
  top: 15px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.left-hair2K {
  background: black;
  width: 3px;
  height: 25px;
  left: 35px;
  position: absolute;
  top: 18px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.right-hair1K {
  background: black;
  width: 3px;
  height: 30px;
  right: 36px;
  position: absolute;
  top: 15px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.right-hair2K {
  background: black;
  width: 3px;
  height: 25px;
  right: 33px;
  position: absolute;
  top: 18px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.headKevin {
  width: 80px;
  height: 120px;
  background-color: #fbca08;
  border-radius: 40%;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  top: 40px;
}
.head__eye--glassL {
  width: 30px;
  height: 30px;
  background: #c0c0c0;
  position: absolute;
  top: 15px;
  left: 4px;
  margin: 0 auto;
  border-radius: 50%;
  border: gray solid 3.5px;
}
.head__eye--glassR {
  width: 30px;
  height: 30px;
  background: #c0c0c0;
  position: absolute;
  top: 15px;
  right: 4px;
  /* right: 0; */
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 5px 5px 40px rgba(0, 0, 0, 0.9);
  border: gray solid 3.5px;
}
.mouthK {
  width: 40px;
  height: 20px;
  background: black;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 4px 4px 70% 70%;
}
.suspenderLeftK {
  width: 5px;
  height: 40px;
  background: #406a8b;
  position: absolute;
  top: 110px;
  transform: rotate(-48deg) translateX(7px) translateY(9px);
  border-radius: 30%;
}
.suspenderRightK {
  width: 5px;
  height: 40px;
  background: #406a8b;
  position: absolute;
  top: 100px;
  transform: rotate(48deg) translateX(50px) translateY(-40px);
  border-radius: 30%;
}

/*----------------------------------------------------------*/
/*Osito Bob*/
.leftEarOuter {
  background: #884f2f;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 1px;
  top: 55px;
}
.leftEarInner {
  background: #50312d;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  left: 4px;
  top: 60px;
}
.rightEarOuter {
  background: #884f2f;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 24px;
  top: 55px;
}
.rightEarInner {
  background: #50312d;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  left: 30px;
  top: 60px;
}
.headBear {
  width: 40px;
  height: 40px;
  background: #884f2f;
  border-radius: 50% 50%;
  left: 2px;
  margin: 0 auto;
  position: absolute;
  top: 63px;
}
.leftEye {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  left: 12px;
  top: 8px;
  background: #fde1a8;
}
.rightEye {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  right: 12px;
  top: 8px;
  background: #fde1a8;
}
.nose {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 14px;
  background: pink;
}

/*Bob*/
.headBob {
  width: 80px;
  height: 100px;
  background-color: #fbca08;
  border-radius: 40%;
  left: 30px;
  right: 0;
  margin: 0 auto;
  position: absolute;
  top: 5px;
}
.head__eye--glassBob {
  width: 30px;
  height: 30px;
  background: #c0c0c0;
  position: absolute;
  top: 15px;
  left: 4px;
  margin: 0 auto;
  border-radius: 50%;
  border: gray solid 3.5px;
}
.head__eye--irisBob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: -webkit-linear-gradient(
    45deg,
    #9d8462,
    #a3935b,
    #a89d49
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    45deg,
    #9d8462,
    #a3935b,
    #a89d49
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.mouthB {
  width: 40px;
  height: 20px;
  background: black;
  position: absolute;
  top: 60px;
  left: 30px;
  right: 0;
  margin: 0 auto;
  border-radius: 4px 4px 70% 70%;
}
.suspenderLeftB {
  width: 5px;
  height: 40px;
  background: #406a8b;
  position: absolute;
  top: 52px;
  transform: rotate(-48deg) translateX(26px) translateY(46px);
  border-radius: 30%;
}
.suspenderRightB {
  width: 5px;
  height: 40px;
  background: #406a8b;
  position: absolute;
  top: 48px;
  transform: rotate(48deg) translateX(80px) translateY(-66px);
  border-radius: 30%;
}

/*----------------------------------------------------------*/
/*Jerry*/
.left-hair1J {
  background: black;
  width: 2px;
  height: 10px;
  left: 46px;
  position: absolute;
  top: 2px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.left-hair2J {
  background: black;
  width: 2px;
  height: 10px;
  left: 41px;
  position: absolute;
  top: 3px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.left-hair3J {
  background: black;
  width: 2px;
  height: 10px;
  left: 36px;
  position: absolute;
  top: 4px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.left-hair4J {
  background: black;
  width: 2px;
  height: 10px;
  left: 31px;
  position: absolute;
  top: 5px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.right-hair1J {
  background: black;
  width: 2px;
  height: 10px;
  right: 46px;
  position: absolute;
  top: 2px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.right-hair2J {
  background: black;
  width: 2px;
  height: 10px;
  right: 41px;
  position: absolute;
  top: 3px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.right-hair3J {
  background: black;
  width: 2px;
  height: 10px;
  right: 36px;
  position: absolute;
  top: 4px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.right-hair4J {
  background: black;
  width: 2px;
  height: 10px;
  right: 31px;
  position: absolute;
  top: 5px;
  border-radius: 50% 50% 20% 20%;
  z-index: 1;
}
.headJerry {
  width: 90px;
  height: 100px;
  background-color: #fbca08;
  border-radius: 40%;
  left: 2px;
  right: 0;
  margin: 0 auto;
  position: absolute;
  top: 8px;
}
.head__eye--beltJ {
  width: 90px;
  height: 10px;
  background: black;
  position: absolute;
  top: 28px;
  border-radius: 20%;
}
.head__eye--glassLJ {
  width: 30px;
  height: 30px;
  background: #c0c0c0;
  position: absolute;
  top: 15px;
  left: 9px;
  margin: 0 auto;
  border-radius: 50%;
  border: gray solid 3.5px;
}
.head__eye--glassRJ {
  width: 30px;
  height: 30px;
  background: #c0c0c0;
  position: absolute;
  top: 15px;
  right: 9px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 5px 5px 40px rgba(0, 0, 0, 0.9);
  border: gray solid 3.5px;
}
.mouthJ {
  width: 40px;
  height: 20px;
  background: black;
  position: absolute;
  top: 62px;
  left: 4px;
  right: 0;
  margin: 0 auto;
  border-radius: 4px 4px 70% 70%;
}
.suspenderLeftJ {
  width: 5px;
  height: 40px;
  background: #406a8b;
  position: absolute;
  top: 52px;
  transform: rotate(-48deg) translateX(3px) translateY(22px);
  border-radius: 30%;
}
.suspenderRightJ {
  width: 5px;
  height: 40px;
  background: #406a8b;
  position: absolute;
  top: 48px;
  transform: rotate(48deg) translateX(65px) translateY(-47px);
  border-radius: 30%;
}