/*área de juego*/
.contenido{
	position: relative;
	z-index: 0;
  padding: 0px;
  margin: auto;
	background-image: url("../img/Atrapa ratones-12.png");
	background-size: 100vh 100vh;
	background-repeat: no-repeat;
  width: 100vh;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body{
    background-color:  #b8c7b2;
}
audio{
	display: none;
}
/* Gatgets del index */
.itemBegin{
	position: absolute;
	left: 10%;
	bottom:5%;
	cursor: pointer;
}
.begin{
	position: absolute;
	color: white;
	z-index: 10;
	font-size: 230%;
	font-family: fantasy;
	left: 12%;
	bottom:16%;
		cursor: pointer;
}
.begin:hover{
	padding: 5px;
}
/*Estilos de Main*/
.textHeaderBox{
	position: absolute;
	left:0%;
	top: 2%;
	width: 100%;
	height:30%;
	display: flex; flex-flow: row wrap;
	border: 1px solid #ffffff;
	background: rgba(179, 214, 223, 0.5);
border-radius: 5px;
font-size: 35px;color: #000000;display: flex; flex-flow: row wrap;
padding: 10px;align-content: center;
	font-family: 'Century Gothic';
	font-weight: bold;
	color: #000000;
	right: 0%;
	top: 15%;
	word-spacing: -3px;
	line-height: 1.2;
}
.speaker{
	position: absolute;
	left:-20%;
	top: -20%;
	-webkit-transition: .1s linear;
	transition: .1s linear;
	cursor: pointer;
}
.speaker:hover{
		padding: 5px;
}

.espina{
	position: absolute ;
	z-index: 9;
	left: 53%;
	top: 70%;
	animation-name: espina;
	animation-duration: .1s;
	animation-timing-function: linear;
}
.espinaWard{
	position: absolute;
	z-index: 9;
	left: 53%;
	top: 70%;
}

.catWard{
	position: absolute;
	z-index: 10;
	left: 30%;
	bottom: 0%
}
.counter{
	position: absolute;
	z-index: 100;
	bottom:0%;
	right: 5%;
	color: white;
	font-size: 100px;
	font-family: fantasy;
}
.itemCat{
	position:absolute;
	z-index: 10;
	left: 30%;
	left: 30%;
	bottom: 60%;
	animation-name: cat;
	animation-duration: .01s;
	animation-timing-function: linear;
}
@keyframes cat {
	0%{
		left: 30%;
		bottom: 0%;
	}
	100%{
		left: 30%;
		bottom: 60%;
	}
}
.itemMouse{
	position: absolute;
	z-index: 9;
	top: 7%;
	height: 18%;
	width: 20%;
	right: 80%;
	animation-name: mouse;
	animation-duration: 6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: 2s;
	background-image: url("../img/Atrapa ratones-6.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
}


@keyframes mouse {
	0%{
		right: 80%;
		top: 7%;
			background-image: url("../img/Atrapa ratones-6.png");
	}
	25%{
		right: 10%;
		top: 7%;
			background-image: url("../img/Atrapa ratones-6.png");
	}
	50%{
		right: 10%;
		top: 7%;
		background-image: url("../img/unnamed.png");
	}
	100%{
		right: 80%;
		top: 7%;
		background-image: url("../img/unnamed.png");

	}
}
.itemChesse{
	position: absolute;
	z-index: 10;
	bottom: 0%;
	top: 14%;
	right: 10%;
	height:10%;

}