html{
	height: 100vh;
	width: 100wh;
	font-family: 'Montserrat', sans-serif;
	background:	-webkit-linear-gradient(90deg, #6963b628 0%, #2bb67517 100%);
	text-align: center;
  }


  sup {font-size:x-small; vertical-align:super;}
  sub {font-size:x-small; vertical-align: sub;}


/* Firework animation*/

  .firework {
	position: absolute;
}
.explosion {
	position: absolute;
	left: -2px;
	bottom: 0;
	width: 4px;
	height: 80px;
	transform-origin: 50% 100%;
	/* background-color: rgba(0,0,0,.2); */
	overflow: hidden;
}
.explosion:nth-child(1) {
	transform: rotate(0deg) translateY(-15px);
}
.explosion:nth-child(2) {
	transform: rotate(30deg) translateY(-15px);
}
.explosion:nth-child(3) {
	transform: rotate(60deg) translateY(-15px);
}
.explosion:nth-child(4) {
	transform: rotate(90deg) translateY(-15px);
}
.explosion:nth-child(5) {
	transform: rotate(120deg) translateY(-15px);
}
.explosion:nth-child(6) {
	transform: rotate(150deg) translateY(-15px);
}
.explosion:nth-child(7) {
	transform: rotate(180deg) translateY(-15px);
}
.explosion:nth-child(8) {
	transform: rotate(210deg) translateY(-15px);
}
.explosion:nth-child(9) {
	transform: rotate(240deg) translateY(-15px);
}
.explosion:nth-child(10) {
	transform: rotate(270deg) translateY(-15px);
}
.explosion:nth-child(11) {
	transform: rotate(300deg) translateY(-15px);
}
.explosion:nth-child(12) {
	transform: rotate(330deg) translateY(-15px);
}

.explosion::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 40px;
	background-color: #f5cf52;
}
@keyframes explosion {
	0% {
		top: 100%;
	}
	33%, 100% {
		top: -50%;
	}
}

#firework1 {
	left: 70%;
	top: 30%;
	transform: scale(1);
}
#firework1 .explosion::before {
	animation: explosion 2s ease-in-out infinite;
}

#firework2 {
	left: 22%;
	top: 45%;
	transform: scale(.7);
}
#firework2 .explosion::before {
	animation: explosion 2s .6s ease-in-out infinite;
}

#firework3 {
	left: 75%;
	top: 65%;
	transform: scale(.4);
}
#firework3 .explosion::before {
	animation: explosion 2s .4s ease-in-out infinite;
}







  
body{
	margin-top: 3em;
		text-align: center;
}

i{
	margin:8px ;
}

nav i{
color: #484a58;
font-size: 20px;
}




#modoDisplay{
	position: absolute;
	top: 8px;
	left:44%;
	background-color: #ffffff;
	border-radius: 15px;
	color: #484a58;
	padding: 2px;
}



#modoDisplay:hover{
	transform: scale(1.1);
}

#modoDisplay a{
	width: auto;
	height: auto;
}

#modoDisplay a:hover i, #modoDisplay .active{
	transform: scale(1.1);
	font-weight: 900;
	background:	-webkit-linear-gradient(12deg, #5e6bbd 0%, #37c884 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
}


  .lang-list {
	background-color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	min-width: 40%;
	padding: 8px;
	font-size: 14px;
	border: none;
	cursor: pointer;
	margin-bottom: 30px;
  }
  
  
  .lang-list option {
	font-family: 'Montserrat', sans-serif;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }
  
  .lang-list:hover{
	transform: scale(1.05);
  }

.titulo{
	font-size: 38px;
	font-weight: bold;
	line-height: 1.4em;
	text-align: center;
	background:	-webkit-linear-gradient(12deg, #484a58 0%, #64edad 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow:  12px 14px 12px -8px rgba(0, 185, 62, 0.08);
	margin-top: 14px;
	margin-bottom: 4px;

}




#area-inicio{
	width: 80%;
	height: 60%;
	max-width: 700px;
	margin: 20px auto;
	text-align: center;
	justify-content: center;
	vertical-align: middle;
	transition:1s;

}





.img-inicio{
	display: block;
	text-align: center;
	width: auto;
	margin-left: 40%;
	margin-top: 20px;
	margin-bottom: 20px;
	height:200px;
}


.bienvenida{
	display: block;
	margin:  0 auto;
	width: 80%;
	height:30%;
}

#area-botones-inicio{
	margin-left: 10px;
	display: inline-block;
	width: 100%;
	max-width: 740px;
	height: auto;
	text-align: center;
	align-items: center;

}


.boton-inicio{
		/* Auto layout */

		display: inline-block;
		cursor: pointer;
		user-select: none !important;
		background: #ffffff;
		align-items: center;
		width: 170px;
		padding: 12px;
		font-size: 20px;
		color: #484a58;
		/* Dark blue/dark-blue-300 */
		border-radius: 12px;
	
		margin-right: 2%;
	
		box-shadow: 0px 6px 7px -5px rgba(98, 98, 98, 0.75);
		-webkit-box-shadow: 0px 6px 7px -5px rgba(98, 98, 98, 0.75);
		-moz-box-shadow: 0px 6px 7px -5px rgba(98, 98, 98, 0.75);
	
}




.boton-inicio:active{
	transform: scale(1.05);
	transition: 1.6s;
  }


.boton-inicio:hover{
	transform: scale(1.05);
	background:		-webkit-linear-gradient(12deg, #084594b0 0%, #12b295b7 100%);
	color: #ffffff;
	font-weight: 700;
}




#nueva-palabra{
	margin-top: 20px;
}

#area-juego{
	width: 98%;
	height: 100%;
	margin: 0;
}

#letrax{
	display: none;
}

.area-dibujo{
	margin-top: 1%;
	height: 10%;
	display: block;

}

#sarea{
	margin-top: 5%;
	display: inline-block;
	width: 85%;
	text-align: center;
	vertical-align: middle;
	margin-left: 10px;
}

.dibujo{
	position: fixed;
	left:2%;
	top:6%;
	width: auto; 
	height: 28%;
	max-height: 280px;
	
	
	display: inline-block;
	image-rendering: optimizeQuality;
	overflow: visible;
}



.area-palabra{
	position: fixed;
	bottom:42%;
	left: 2%;
	right: 6%;
	height: fit-content;
	margin-top: 1px;
	min-height: 70px;
	color: #485158;
	font-size: 32px;
}




#area-teclado{
	z-index: 2;
	position: fixed;
	bottom:40px;
	display: block;
	width: 90%;
	text-align: center;
	align-items: center;
	left: 16px;
	right: 10px;
}



.area-tecla{
	display: inline-flex;
	vertical-align: middle;
	background-color: white;
	border-radius: 8px;
	cursor: pointer;
	margin:6px;
	padding: 2px;
	width:32px;
	height: 35px;
	text-align: center;
	align-items: center;
	box-shadow: 0px 6px 7px -5px rgba(98, 98, 98, 0.75);
		-webkit-box-shadow: 0px 6px 7px -5px rgba(98, 98, 98, 0.75);
		-moz-box-shadow: 0px 6px 7px -5px rgba(98, 98, 98, 0.75);
	
	
}

.letra-tecla{
	cursor: pointer;
	margin-left: 18%;
	font-size: 21px;
	justify-content: center;
	text-align: center;
	color: #484a58;
	text-shadow: 1.7px 1px #ffffff;

}


.area-tecla:hover{
	transform: scale(1.05);
  }

.area-tecla:active{
	transform: scale(1.05);
	transition: 1.6s;
  }

.boton{
	display: inline-block;
	padding: 13px;
	background: #ffffff;
	border-radius: 24px;
	flex: none;
	order: 1;
	font-size: 13px;
	color: #484a58;
}



.logo{
	width: 16px;
	height:16px;
}

.logo:hover{
	transform: scale(1.05);
  }

  .logo:active{
	transform: scale(1.05);
  }



.botones-juego{
	position: absolute;
	right:5%;
	top:5%;
	text-align: right;
	background: none;
}



.logo2{
	cursor: pointer;
	margin: 4px auto;
	margin-bottom: 3px;
	display: block;
	width: 35px;
	text-align: center;
}

.logo2:hover{
	transform: scale(1.05);
	
  }

  .logo2:active{
	transform: scale(1.05);
  }

.boton-nav{
	border: 0;
	background-color: #ffffff;
	padding: 7px;
	width: 70px;
	border-radius: 15px;
	margin-bottom: 15px;
	color: #484a58;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	box-shadow: 0px 4px 4px -5px rgba(98, 98, 98, 0.75);
		-webkit-box-shadow: 0px 4px 4px -5px rgba(98, 98, 98, 0.75);
		-moz-box-shadow: 0px 4px 4px -5px rgba(98, 98, 98, 0.75);
	

}



.boton-nav:hover{
	transform: scale(1.04);
	background:		-webkit-linear-gradient(12deg, #005ad0b0 0%, #04cda8b7 100%);
	color: white;
}

.boton-nav:hover i{
	color: white !important;
}

#ayuda{
	z-index: 5000;
	width: 80%;
	margin-top: 20%;
	border-radius: 25px;
	margin-left:10%;
	padding-bottom: 20px;
	text-align: center;
	vertical-align: middle;

	background-color: #ffffff;
	opacity: 0.96;
}


#ayudaWord{
	font-weight: 700;
	margin-bottom: 8px;
}

#formula-mineral{
	margin-top: 11px;
	margin-bottom: 12px;
}

#texto-ayuda{
	width: 80%;
	margin-left:10%;

	text-align: center;
	font-size: 22px;
	line-height: 2.3rem;
	font-style: italic;
	text-align: center;
	vertical-align: middle;
	color: #484a58;
}


.texto-div{
	width: 80%;
	margin-left: 10%;
	font-size: 20px;
	text-align: center;
	font-style: italic;
	color: #484a58;
}

#cerrar-ayuda{
	position: relative;
	left:44%;
	color: #d9d9d9;
	font-size: 30px;
}

#cerrar-ayuda:hover{
color: #d41313;
}





#modo{
	z-index: 5;
	position:absolute;
	text-align: center;
	vertical-align: middle;
	left: 0;
	top:0;
	width: 100%;
	height: 100vh;
	transition: 1s;
	background:-webkit-linear-gradient(90deg, #eeedfb 0%, #ebfcf5 100%);
}

#modotext{
	margin-top: 10%;
	margin-bottom: 40px;
	color: #484a58;
}



.boton-modo{
	cursor: pointer;
	display: inline-block;
	background: none;
	align-items: center;
	vertical-align: middle;
	padding: 20px;
	font-size: 28px;
	color: #484a58;
	/* Dark blue/dark-blue-300 */
	border-radius: 12px;
	margin-bottom: 27px;
	margin-left:40px;
	margin-right: 40px;
	background:	#ffffff;
	box-shadow: 0px 6px 11px -5px rgba(98, 98, 98, 0.75);
	-webkit-box-shadow: 0px 6px 11px -5px rgba(98, 98, 98, 0.75);
	-moz-box-shadow: 0px 6px 11px -5px rgba(98, 98, 98, 0.75);
}

.boton-modo:hover{
	transform: scale(1.05);
	background:		-webkit-linear-gradient(12deg, #0a57bcb0 0%, #17d5b2b7 100%);
	color: #ffffff;
	font-weight: 700;
  }

  .boton-modo:active{
	transform: scale(1.05);
	transition: 1.6s;
  }

.fadeOut{
	display: none;
	background-color: #ffffff;
}


.fadeOutLetra{
	transform: scale(1.12);
	position: fixed;
	bottom:42%;
	left: 2%;
	right: 6%;
	height: fit-content;
	margin-top: 1px;
	min-height: 70px;
	color: #484a58;
	font-size: 32px;
}




.fadeOut2{
	background-color: #0be6423a;
	transition: 0.7s;

}


.fadeOutBad{ 
	background-color: #ff000025;
	transition: 0.7s;

}



.area-error{
	display: block;
	margin: 12px;
	opacity: 0.6;
	color: #ac0505;
	font-weight: bold;
}

#aplausos{
	position: absolute;
	top: 11%;
	left:40%;
	width:30%;
	max-width: 200px;
}



#perdiste{
	position: absolute;
	top: 20%;
	left:43%;
	width: 7%;
	min-width: 80px;
}

footer{
	position: fixed;
	bottom:6px;
	width: 90%;
	font-size: 17px;
	margin-top: 15px;
	left:4%;
	display: block;
	color: #484a58;

}

footer i, footer a{
	margin:2px;
	font-size: 17px;
	color: #484a58;
	text-decoration: none;
}


@media screen and (max-width:480px){
	body{
	margin-top: 0;
	}
 
	#area-inicio{
		margin-bottom: 2px;
		height: auto;
	}

	
	.dibujo{
		height: 30%;
		top:49px;
	}

	.lang-list{
		position: fixed;
		top:52px;
		left:20%;
		right:20%;
	}
	.titulo{
		position: fixed;
		top: 122px;
		left:7%;
		right:7%;
	}


	.img-inicio{
		margin-left: 20%;
		height: 30%;
	}
	


	#aplausos{
		position: absolute;	
		left:30%;

	}


	#iniciar{
		position: fixed;
        bottom: 140px;
		width: 60%;
		left: 15%;
		
	}
   
	#agregar-palabra{
		position: fixed;
        bottom: 78px;
		width: 60%;
		left: 15%;
	}

	#nueva-palabra{
		position: fixed;
		bottom: 40px;
		left: 5%;
		right:5%;
	}


	#sarea{
		position: relative;
		top:-110px;
	}

	#modotext{
		margin-top: 30%;
	}




	.area-error{
		position: fixed;
		bottom: 190px;
		left: 5%;
		right:5%;
	}

	nav{
		transform: scale(0.80);
	}

	#aplausos{
		display: none;
	}


	#texto-ayuda{
	
		font-size: 17px;
		line-height: 1.7rem;
	
	}


}



@media screen and (max-width:1090px){
	#aplausos{
		position: absolute;
		top: 65px !important;
		left: 40px !important;
		width: 20% !important;
		max-width: 150px;
	}
}



@media screen and (max-height: 650px) and (max-width: 480px){
	 body{
	margin-top: 0;
}

	
	.lang-list{
		position: fixed;
		transform: scale(0.9);
		top:52px;
		padding: 6px;
		font-size: 18px;
		left:10%;
		right:10%;
	}
	.titulo{
		position: fixed;
		top: 105px;
		left:7%;
		right:7%;
		font-size: 28px;
	}


	
	.area-dibujo{
		margin: 0;
		position: fixed;
		top:7px;
		left:10px;
		height: 40% !important;
		width: 100%;

	}

	

	.img-inicio{
		top:28% !important;
		height: 30%;
	
	}

	.botones-juego{
		transform: scale(0.8);
		position: absolute;
		right:1%;
		top:1%;
		text-align: right;
		background: none;
	}




	#perdiste{
		transform: scale(0.6);
		bottom: 10%;
		left:20%
	}

	





	}
	





	
	
	






@media screen and (min-height: 650px) and (max-width: 480px){
.img-inicio{
	position: absolute;
	top:36% !important;
}


   
   
   
}


@media screen and (max-height: 650px) and (min-width: 480px){



	.img-inicio{
		height: 120px;
		margin-top: 15px;
		left:50wh;
	}

}




@media screen and (max-height: 450px) and (min-width: 480px) {
	.img-inicio{
		height: 0;
	}

	.botones-juego{
		transform: scale(0.75);
		position: absolute;
		right:1%;
		top:1%;
		text-align: right;
		background: none;
	}


	.lang-list{
		position: fixed;
		top:46px;
		padding: 0;
		font-size: 15px;
		left:20%;
		right:20%;
	}
	.titulo{
		position: fixed;
		top: 65px;
		left:7%;
		right:7%;
		font-size: 28px;
	}



	.dibujo{
		position:fixed;
		height: 120px;
		margin: 0;
		top:5px;
	}


	#iniciar{
		position: fixed;
        bottom: 95px;
		width: 20%;
		left: 22%;
		
	}
   
	#agregar-palabra{
		position: fixed;
        bottom: 95px;
		width: 26%;
		left: 50%;
	}

	#nueva-palabra{
		position: fixed;
		bottom:50px;
		left:20%;
		right: 20%;
	}


	.area-error{
		position: fixed;
		bottom:18px;
		left:20%;
		right: 20%;

	}

   


	
	#perdiste{
		transform: scale(0.6);
		bottom:6px;
	}

	
	#aplausos{
		transform: scale(0.5);
		position: absolute;
		top:0px;
		left:35px;
	}








}





@media screen and (max-width: 586px){
	#modoDisplay{
		position: absolute;
		left:34%;
		
	}
	
}




@media screen and (max-height: 431px) and (max-width: 501px){
	.lang-list{
		display: none;
	}
	
	.titulo{
		position: fixed;
		top: 67px;
		left:7%;
		font-size: 22px;
		right:7%;
	}
	
	#nueva-palabra{
		position: fixed;
		bottom: 50%;
		left: 5%;
		right:5%;
	}
	
	#iniciar{
		display: none;
	}
   
	#agregar-palabra{
		display: none;
	}

	.area-error{
		position: fixed;
		bottom: 20%;
		left: 5%;
		right:5%;
	}

	#area-inicio p{
		display: none;
	}


}






@media screen and (max-height: 260px){
	
	
	.lang-list{
		display: none;
	}
	.titulo{
		display: none;
	}
	
	#nueva-palabra{
		position: fixed;
		bottom: 60%;
		left: 5%;
		right:5%;
	}
	
	#iniciar{
		display: none;
	}
   
	#agregar-palabra{
		display: none;
	}

	.area-error{
		position: fixed;
		bottom: 27%;
		left: 5%;
		right:5%;
	}
	#area-inicio p{
		display: none;
	}



	#ayuda{
		margin-top: 45% !important;
	}

	footer{
		display: none;
	}
}





@media screen and (max-height: 518px) and (max-width: 480px){
	.img-inicio{
		display: none;
	}

}

@media screen and (min-height: 518px) and (max-width: 480px){
	.img-inicio{
		height: 180px;
		position: absolute;
		top:120px;
		left:15%;
		right: 10%;
	}

}




@media screen and (min-height: 808px) and (min-width: 1283px){
	
	.lang-list{
		transform: scale(1.5);
		margin-top: 25px;	
	}
	.titulo{
		transform: scale(1.5);
		margin-top: 80px;
	}

	#nueva-palabra{
		transform: scale(1.5);
		position: absolute;
		bottom: 5%;	
		left: 30%;
	}

	.botones-juego{
		transform: scale(2);
		position: absolute;
		top: 20%;
	}
	

	.area-tecla{
		transform: scale(1.8);
		margin: 2%;
	}


	.area-palabra{
		transform: scale(1.5);
		width: 84%;
		margin: 28px;
	}

	.fadeOutLetra{
		transform: scale(1.5);
		width: 84%;	
		margin: 28px;
	}


	#modotext{
		margin-top:30%;
	}








	.area-error{
		width: 100%;
	}


	.img-inicio{
		transform: scale(2.1);
		margin-top:220px;
	}

	#iniciar{
		transform: scale(1.5);
		position: fixed;
		bottom: 15%;
		left:34%;
	}


	#agregar-palabra{
		transform: scale(1.5);
		position: fixed;
		bottom: 15%;
		right:34%;
	}



	.dibujo{
		height: 450px;
		position:fixed;
		top:5%;
		left:5%
	}




	footer{
		transform: scale(1.05);
		position: fixed;
		bottom: 5px;
		left:50px;
	}



}





@media screen and (min-height: 808px) and (min-width: 480px) and (max-width: 1283px){
	


	.lang-list{
		transform: scale(1.5);
		margin-top: 25px;	
	}
	.titulo{
		transform: scale(1.5);
		margin-top: 80px;
	}

	#nueva-palabra{
		transform: scale(1.5);
		position: absolute;
		bottom: 10%;	
		left: 30%;
	}

	.botones-juego{
		transform: scale(1.4);
		position: absolute;
		top: 18%;
	}
	

	.area-tecla{
		transform: scale(1.6);
		margin: 3%;
	}


	#modoDisplay{
		transform: scale(1.5);
		margin-top: 10px;
	}

	#modoDisplay:hover{
		transform: scale(1.6);
	}

	.area-palabra{
		font-size: 50px;
	}


	#modotext, #texto-ayuda, #ayudaWord{
		font-size: 29px;
	}


	.fadeOutLetra{
		transform: scale(1.6);	
	}

	.area-error{
		width: 250px;
		margin: 0;
		padding: 0;
		position: absolute;
		bottom: 8%px;
		left:10px;
	}


	.img-inicio{
		transform: scale(1.9);
		margin-top:170px;
	}

	#iniciar{
		transform: scale(1.5);
		position: fixed;
		bottom: 22%;
		left:30%;
		width: 40%;
	}


	#agregar-palabra{
		transform: scale(1.5);
		position: fixed;
		bottom: 14%;
		left:30%;
		width: 40%;
	}

	#modotext{
		margin-top:50%;
	}

	.boton-modo{
		display: block;
		width: 60%;
		margin-left: 0;
		margin-left: 20%;
	}


	.dibujo{
		height: 450px;
		position:fixed;
		top:5%;
		left:5%
	}


	footer{
		transform: scale(1.3);
		position: fixed;
		bottom: 5px;
		left:50px;
	}
}



@media screen and (min-height: 808px) and (max-height: 1160px) and (min-width: 480px) and (max-width: 1283px){
	.img-inicio{
		height: 120px;
	}


	#modotext{
		margin-top:20%;
	}

	.dibujo{
		transform: scale(0.8);
		position: absolute;
		top: 15px;
		left:15px
	}



}





@media screen and (min-height: 760px) and (max-height: 1222px) and (min-width: 1283px){
	.img-inicio{
		height: 160px;
		margin-top: 120px !important; 
	}
}


@media screen and (min-height: 380px) and (max-height: 750px){

	.area-palabra, .fadeOutLetra{
		
		bottom:44% !important;
	
	}
	
}