:root{
    --blanco: #FFFFFF;
    --oscuro: #212121;
    --secundario:#0097A7;
    --grisClaro:#DFE9F3;
    --primario: #0dcaf0;
    --gris: #e1e1e1;
    --amarillo:#FFC107;
}

/*Dimensiona, la pagina*/
html{
    /*font-size: 62.5%;*/
    box-sizing: border-box; /*Hack para Box Model*/
    scroll-snap-type: y mandatory;
}
*, *:before, *:after{
    box-sizing:inherit;
}
/*Globales*/
body{
    text-align: center;
}
h1, h2, h3{
    background-color: var(--secundario);
    color: var(--grisClaro);
    margin: 0;
}

h1{
    padding-bottom: .2rem;
}

a{
    text-decoration: none;
    color: var(--oscuro);
}
.bJuego{
    background-color: var(--secundario);  
    font-size: x-large;  
    color: var(--amarillo);
    margin: 1rem 0 1rem 0;
}
.bDias{
    margin: 1rem 0 1rem 0;
    width: 6rem;
}
footer{
    text-align: center;   
    color: var(--blanco);
    background-color: var(--secundario);
}
.verde {
    color: green;
  }
  .rojo {
    color: red;
  }
.error {
    background-color: rgb(185, 0, 0);
    text-align: center;
    padding: 1rem;
    color: var(--blanco);
    text-transform: uppercase;
}

.correcto {
    background-color: var(--secundario); /* rgb(74, 185, 0);*/
    text-align: center;
    padding: .75rem;
    color: var(--blanco);
    text-transform: uppercase;
    border-radius: .5rem;
}
.bg-color{
    background-color: var(--secundario);
    position: sticky;
    top: 0;
}
.c-pd{
    margin-bottom: .5rem;
}

.inJuego{
    display: flex;
    margin: 1rem;
    text-align: left;
}

.boton {
    margin: 1rem 2rem;
  }
.icono{
    position: fixed;
    color: rgb(185, 0, 0);
    top: 18rem;
    right: 1rem;
}

.fPosicion{
    position: fixed;
    top: 14rem;
    right: 0;
}

.fruta {
    outline: none;
    border: 8px solid #404B69;
    font-size: 2rem;
    font-family: 'Arvo', cursive;
    line-height: 2;
    font-weight: 900;
    color: #DA0463;
    text-shadow: 3px 0 #DBEDF3;
    border-radius: 15px;
    display: inline-block;
    width: 150px;
    height: 150px;
    text-align: center;
    margin: 10px;
    background-color: white;;
}
.f0 {
    background-image: url("../img/Frutas/Aguacate.jpg");
}
.f1 {
    background-image: url("../img/Frutas/Almendras.jpg");
}
.f2 {
    background-image: url("../img/Frutas/Arandano.jpg");
}
.f3 {
    background-image: url("../img/Frutas/Avellanas.jpg");
}
.f4 {
    background-image: url("../img/Frutas/Cacahuates.jpg");
}
.f5 {
    background-image: url("../img/Frutas/Cereza.jpg");
}
.f6 {
    background-image: url("../img/Frutas/Chabacano.jpg");
}
.f7 {
    background-image: url("../img/Frutas/Coco.jpg");
}
.f8 {
    background-image: url("../img/Frutas/Durazno.jpg");
}
.f9 {
    background-image: url("../img/Frutas/Frambuesa.jpg");
}
.f10 {
    background-image: url("../img/Frutas/Fresa.jpg");
}
.f11 {
    background-image: url("../img/Frutas/Granada.jpg");
}
.f12 {
    background-image: url("../img/Frutas/Higo.jpg");
}
.f13 {
    background-image: url("../img/Frutas/Lima.jpg");
}
.f14 {
    background-image: url("../img/Frutas/Limon.jpg");
}
.f15 {
    background-image: url("../img/Frutas/Mandarina.jpg");
}
.f16 {
    background-image: url("../img/Frutas/Mango.jpg");
}
.f17 {
    background-image: url("../img/Frutas/Manzana.jpg");
}
.f18 {
    background-image: url("../img/Frutas/Melon.jpg");
}
.f19 {
    background-image: url("../img/Frutas/Membrillo.jpg");
}
.f20 {
    background-image: url("../img/Frutas/Naranja.jpg");
}
.f21 {
    background-image: url("../img/Frutas/Papaya.jpg");
}
.f22 {
    background-image: url("../img/Frutas/Pasa.jpg");
}
.f23 {
    background-image: url("../img/Frutas/Pera.jpg");
}
.f24 {
    background-image: url("../img/Frutas/Pina.jpg");
}
.f25{
    background-image: url("../img/Frutas/Platano.jpg");
}
.f26 {
    background-image: url("../img/Frutas/Sandia.jpg");
}
.f27 {
    background-image: url("../img/Frutas/Uvas.jpg");
}
.f28 {
    background-image: url("../img/Frutas/Zarzamora.jpg");
}

.v1 {
    background-image: url("../img/Vegetales/Ajo.jpg");
}
.v2 {
    background-image: url("../img/Vegetales/Apio.jpg");
}
.v3 {
    background-image: url("../img/Vegetales/Brocoli.jpg");
}
.v4 {
    background-image: url("../img/Vegetales/Calabaza.jpg");
}
.v5 {
    background-image: url("../img/Vegetales/Coliflor.jpg");
}
.v6 {
    background-image: url("../img/Vegetales/Espinacas.jpg");
}
.v7 {
    background-image: url("../img/Vegetales/Frijoles.jpg");
}
.v8 {
    background-image: url("../img/Vegetales/Hongos.jpg");
}
.v9 {
    background-image: url("../img/Vegetales/Lechuga.jpg");
}
.v10 {
    background-image: url("../img/Vegetales/Maiz.jpg");
}
.v11 {
    background-image: url("../img/Vegetales/Papas.jpg");
}
.v12 {
    background-image: url("../img/Vegetales/Pepino.jpg");
}
.v13 {
    background-image: url("../img/Vegetales/Pimiento.jpg");
}
.v14 {
    background-image: url("../img/Vegetales/Rabanos.jpg");
}
.v15 {
    background-image: url("../img/Vegetales/Repollo.jpg");
}
.v16 {
    background-image: url("../img/Vegetales/Tomates.jpg");
}
.v17 {
    background-image: url("../img/Vegetales/Zanahoria.jpg");
}

.a0 {
    background-image: url("../img/Animales/Bat.jpg");
}
.a1 {
    background-image: url("../img/Animales/Bear.jpg");
}
.a2 {
    background-image: url("../img/Animales/Bird.jpg");
}
.a3 {
    background-image: url("../img/Animales/Cat.jpg");
}
.a4 {
    background-image: url("../img/Animales/Cow.jpg");
}
.a5 {
    background-image: url("../img/Animales/Crab.jpg");
}
.a6 {
    background-image: url("../img/Animales/Dog.jpg");
}
.a7 {
    background-image: url("../img/Animales/Dolphin.jpg");
}
.a8 {
    background-image: url("../img/Animales/Donkey.jpg");
}
.a9 {
    background-image: url("../img/Animales/Duck.jpg");
}
.a10 {
    background-image: url("../img/Animales/Eagle.jpg");
}
.a11 {
    background-image: url("../img/Animales/Elephant.jpg");
}
.a12 {
    background-image: url("../img/Animales/Fish.jpg");
}
.a13 {
    background-image: url("../img/Animales/Goat.jpg");
}
.a14 {
    background-image: url("../img/Animales/Hamster.jpg");
}
.a15 {
    background-image: url("../img/Animales/Hen.jpg");
}
.a16 {
    background-image: url("../img/Animales/Jiraffe.jpg");
}
.a17 {
    background-image: url("../img/Animales/KillerWhale.jpg");
}
.a18 {
    background-image: url("../img/Animales/Lion.jpg");
}
.a19 {
    background-image: url("../img/Animales/Monkey.jpg");
}
.a20 {
    background-image: url("../img/Animales/Ostrich.jpg");
}
.a21 {
    background-image: url("../img/Animales/PandaBear.jpg");
}
.a22 {
    background-image: url("../img/Animales/Pig.jpg");
}
.a23 {
    background-image: url("../img/Animales/Rabbit.jpg");
}
.a24 {
    background-image: url("../img/Animales/Seal.jpg");
}
.a25 {
    background-image: url("../img/Animales/Shark.jpg");
}
.a26 {
    background-image: url("../img/Animales/Sheep.jpg");
}
.a27 {
    background-image: url("../img/Animales/Whale.jpg");
}
.a28 {
    background-image: url("../img/Animales/Wolf.jpg");
}
.a29 {
    background-image: url("../img/Animales/Zebra.jpg");
}

.c0 {
    background-image: url("../img/cuerpo/Elbow.jpg");
}
.c1 {
    background-image: url("../img/cuerpo/Eye.jpg");
}
.c2 {
    background-image: url("../img/cuerpo/Finger.jpg");
}
.c3 {
    background-image: url("../img/cuerpo/Foot.jpg");
}
.c4 {
    background-image: url("../img/cuerpo/Hand.jpg");
}
.c5 {
    background-image: url("../img/cuerpo/Head.jpg");
}
.c6 {
    background-image: url("../img/cuerpo/Heart.jpg");
}
.c7 {
    background-image: url("../img/cuerpo/Mouth.jpg");
}
.c8 {
    background-image: url("../img/cuerpo/Nose.jpg");
}

.bc0, .bc1, .bc2, .bc3, .bc4, .bc5, .bc6, .bc7, .bc8, .bc9, .bc10, 
.bc11, .bc12, .bc13, .bc14, .bc15, .bc16, .bc17, .bc18, .bc19{
    width: 4rem;
    height: 4rem;
}
.bc0{
    background-color: black;
    color: white;
}
.bc1{
    background-color: #990000;
}
.bc2{
    background-color: red;
}
.bc3{
    background-color: #FF5F00;
}
.bc4{
    background-color: #FAC213;
}
.bc5{
    background-color: green;
}
.bc6{
    background-color: blue;
}
.bc7{
    background-color: #ED5EDD;
}
.bc8{
    background-color: gray;
}
.bc9{
    background-color: white;
    border-color: #212121;
}
.bc10{
    background-color: #1F4690; /*Azul marino*/
}
.bc11{
    background-color: #EC9B3B; /*Dorado*/
}
.bc12{
    background-color: fuchsia;
}
.bc13{
    background-color: #A64B2A; /*castaño*/
}
.bc14{
    background-color: purple; /*morado*/
}
.bc15{
    background-color: silver; /*plata*/
}
.bc16{
    background-color: pink;
}
.bc17{
    background-color: turquoise;
}
.bc18{
    background-color: #14C38E; /*verde claro*/
}
.bc19{
    background-color: #116530; /*verde oscuro*/
}

.lReloj12{
    position: relative;
    top: -3rem;
    left: 6.5rem; 
}
.lReloj11{
    position: relative;
    top: -2.5rem;
    left: 5.8rem; 
}
.lReloj10{
    position: relative;
    top: -1.5rem;
    left: 6rem; 
}
.lReloj9{
    position: relative;
    top: 0rem;
    left: 6.8rem; 
}
.lReloj8{
    position: relative;
    top: 2rem;
    left: 8rem; 
}
.lReloj7{
    position: relative;
    top: 3rem;
    left: 10rem; 
}
.lReloj6{
    position: relative;
    top: 3.45rem;
    left: 13rem; 
}
.lReloj5{
    position: relative;
    top: 3.2rem;
    left: 15rem; 
}
.lReloj4{
    position: relative;
    top: 2rem;
    left: 17rem; 
}
.lReloj3{
    position: relative;
    top: 0rem;
    left: 19rem; 
}
.lReloj2{
    position: relative;
    top: -1.5rem;
    left: 19rem; 
}
.lReloj1{
    position: relative;
    top: -2.5rem;
    left: 19rem; 
}