/* === Variables === */
:root {
  --dark-brown: #a54a38;
  --light-brown: #bf624c;
  --dark-green: #51af5e;
  --light-green: #51af5e;
  --shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

/* === Cuerpo y reseteo de grid-score === */
body {
  display: grid;
  counter-reset: score;
  height: 100vh;
  margin: 0;
  place-items: center;
  width: 100%;
}

/* === Dibujando Conejito y tierra === */
/* ===== Orejas ===== */
.left-hear--outer {
  background: white;
  border-radius: 90%;
  top: 0;
  height: 50px;
  left: 10px;
  position: absolute;
  width: 20px;
}

.left-hear--inner {
  background: pink;
  border-radius: 90%;
  width: 10px;
  height: 50px;
  position: absolute;
  left: 15px;
  top: 8px;
}

.right-hear--outer {
  background: white;
  border-radius: 90%;
  top: 0;
  height: 50px;
  right: 10px;
  position: absolute;
  width: 20px;
}

.right-hear--inner {
  background: pink;
  border-radius: 90%;
  width: 10px;
  height: 50px;
  position: absolute;
  right: 15px;
  top: 8px;
}

/* ===== Cabeza ===== */
.head {
  background-color: white;
  border-radius: 50%;
  height: 80px;
  width: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  top: 30px;
}

.head__eye {
  background: gray;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  position: absolute;
  top: 15px;

  animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

/* ===== Animacion parpadeo ====== */
@keyframes blink {
  0% {
    height: 4px;
  }
  5% {
    transform: translate(0px, 2px);
    height: 1px;
  }
  10% {
    transform: translate(0px, 0px);
    height: 4px;
  }
}

/* ===== Posicion Ojos del conejo ====== */
.head__eye--left {
  left: 31px;
}

.head__eye--right {
  right: 31px;
}

/* ===== Tierra ===== */
.lawn {
  background: var(--dark-green);
  height: 20px;
  width: 100%;
}

.land {
  background: 
    linear-gradient(135deg, var(--dark-green) 25%, transparent 25%) -50px 0,
    linear-gradient(-135deg, var(--dark-green) 25%, transparent 25%) -50px 0,
    linear-gradient(45deg, var(--light-brown) 25%, transparent 25%),
    linear-gradient(-45deg, transparent 25%, var(--dark-brown) 25%);
  background-size: 33px 30px;
  height: 30px;
  width: 100%;
}

/* ===== Telefono ===== */
.phone {
  position: relative;
  border: 8px solid black;
  border-radius: 40px;
  height: 600px;
  width: 300px;
  background: #ccefff;
  box-shadow: var(--shadow); /* After */
  overflow: hidden; /* After */
}

/* ===== Diseño de inputs y puntaje ===== */
input[type="checkbox"] {
  appearance: none;
  cursor: pointer;
  height: 50px;
  margin: 0;
  position: relative;
  top: 0;
  width: 80px;
  z-index: 2;
}

input[type="checkbox"]:focus {
  appearance: none;
  outline: none;
}

input:checked {
  counter-increment: score;
}

.score::after {
  content: counter(score);
}

/* ===== Animaciones ===== */
@keyframes bunny {
  0% {
    top: 0;
  }
  25% {
    top: 80px;
  }
  100% {
    top: 0;
  }
}

/* ===== Conejo ===== */
@keyframes layer {
  0% {
    bottom: 0;
  }
  25% {
    bottom: -80px;
  }
  100% {
    bottom: 0;
  }
}

/* === Capas Divs Maquetacion === */
/* ====== Conejo 1 ===== */
.layer-1 {
  /*   background: white; */
  bottom: 0;
  height: 450px;
  position: absolute;
  right: 60px;
  width: 80px;

  /* After 4 */
  animation-name: layer;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.layer-1 input[type="checkbox"] {
  animation-name: bunny;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ===== Conejo 2 ===== */
.layer-2 {
  /*   background: white; */ /* After 3 */
  bottom: 0;
  height: 450px;
  position: absolute;
  left: 60px;
  width: 80px;
  z-index: 2;

  /* After 4 */
  animation-name: layer;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.layer-2 input[type="checkbox"] {
  /* After 4 */
  animation-name: bunny;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ===== Terreno 1 ===== */
.layer-3 {
  background: var(--light-brown);
  border-radius: 20px;
  box-shadow: var(--shadow);
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 220px;
  height: 400px;
  bottom: 0;
  overflow: hidden;
}

/* ===== Conejo 3 ===== */
.layer-4 {
  /*   background: white; */ /* After 3 */
  bottom: 0;
  height: 350px;
  left: 15px;
  position: absolute;
  width: 80px;
  z-index: 4;

  /* After 4 */
  animation-name: layer;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.layer-4 input[type="checkbox"] {
  /* After 4 */
  animation-name: bunny;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ===== Terreno 2 ===== */
.layer-5 {
  position: absolute;
  z-index: 5;
  background: var(--light-brown);
  bottom: 0;
  height: 300px;
  width: 200px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ===== Conejo 4 ===== */
.layer-6 {
  /*   background: white; */ /* After 3 */
  bottom: 0;
  height: 250px;
  position: absolute;
  right: 30px;
  width: 80px;
  z-index: 6;

  /* After 4 */
  animation-name: layer;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ===== Terreno 3 ====== */
.layer-7 {
  position: absolute;
  z-index: 7;
  background: var(--light-brown);
  bottom: 0;
  height: 200px;
  right: 0;
  width: 150px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ===== Arbusto ===== */
.layer-8 {
  position: absolute;
  z-index: 8;
  /*background: papayawhip;*/
  bottom: 0;
  height: 120px;
  width: 200px;
  left: 0;
  margin: 0 auto;
  right: 0;
}

.layer-8__left-lawn {
  background: var(--dark-green);
  border-radius: 40px 40px 0 0;
  bottom: 0;
  display: inline-block;
  height: 70%;
  left: 0;
  position: absolute;
  width: 80px;
}

.layer-8__center-lawn {
  background: var(--dark-green);
  border-radius: 40px 40px 0 0;
  bottom: 0;
  display: inline-block;
  height: 100%;
  left: 60px;
  position: absolute;
  width: 80px;
}

.layer-8__right-lawn {
  background: var(--dark-green);
  border-radius: 40px 40px 0 0;
  bottom: 0;
  display: inline-block;
  height: 80%;
  left: 130px;
  position: absolute;
  width: 80px;
}

/* ===== Nube 1 ===== */
.layer-9 {
  position: absolute;
  z-index: 9;
  bottom: 0;
  height: 100px;
  width: 120px;
}

.layer-9__left-cloud {
  background: white;
  border-radius: 40px 40px 0 0;
  display: inline-block;
  height: 100%;
  position: absolute;
  left: 0;
  width: 80px;
}

.layer-9__right-cloud {
  background: white;
  border-radius: 0 40px 30px 0;
  bottom: 0;
  display: inline-block;
  height: 60%;
  position: absolute;
  left: 80px;
  width: 40px;
}

/* ===== Nube 2 ===== */
.layer-10 {
  bottom: 0;
  height: 100px;
  position: absolute;
  right: 0;
  width: 120px;
  z-index: 10;
}

.layer-10__left-cloud {
  background: white;
  border-radius: 40px 0 0 30px;
  bottom: 0;
  display: inline-block;
  height: 60%;
  width: 40px;
  position: absolute;
  right: 80px;
}

.layer-10__right-cloud {
  background: white;
  border-radius: 40px 40px 0 0;
  display: inline-block;
  height: 100%;
  width: 80px;
  position: absolute;
  right: 0px;
}

/* ===== Tipografia ===== */
.title {
  display: flex;
  justify-content: center;
  margin: 45px 0 10px;
}

.title img {
  width: 60%;
}

.score {
  color: var(--light-brown);
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 0;
  text-align: center;
}