@font-face{ 
	font-family: "bit"; 
	src: url("8bit.ttf"); 
}    
* {
	font-family: "bit"; 
	padding: 0;
	margin: 0;  
	-webkit-touch-callout: none;                /* evitar llamadas para copiar imágenes, etc. cuando se toca para mantener*/
    -webkit-text-size-adjust: none;             /* evitar que webkit cambie el tamaño del texto para que se ajuste */
    -webkit-user-select: none;                  /* evitar copiar y pegar, para permitir, cambiar 'ninguno' a 'texto' */
          
}            
html{
	-ms-touch-action: manipulation;
	touch-action: manipulation;
}
body{
	width:  100%;
	height: 100%;
	margin: 0px;  
	padding:0px; 
	touch-action: none;
	-ms-touch-action: none;
	overflow:hidden;
	font-family: "bit";
}
canvas{
	width:100vw;
	height:100vh;
	image-rendering: optimizeSpeed;
	-ms-interpolation-mode: nearest-neighbor;
	touch-action-delay: none;
	touch-action: none;
	-ms-touch-action: none;
}



#input_area{
	width: 100vw;
	height: 100vh;
	text-align: center; 
	z-index: 4; 
	position: fixed;
	top:0;
	left: 0;
	margin-top:auto;
	display: table;
	background-color: rgba(150, 150, 150, 0.5);
}
#record_form{
	display: table-cell;
	vertical-align: middle;
	width:100vw;
	height: 100vh;
	font-size: 40pt;
}
#record_form input{
	font-size: 16pt;
	padding: 3px;
}
#record_form input[type='text']{
	width:50vw;

}

#splash{
	color: #fff;
	font-size: 2.0vw;
	z-index:7;
	background-color:#000;
	padding: 0;
	margin: 0;
}

#button_ok{
	font-size:5vw;
	-webkit-text-stroke: 2px #fff;
	background-color:#419a40;
  	border: 2px solid #000;
  	display: inline;
  	padding: 1vw;

}

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  /*whatever width you want*/
}

#esconder{
	width: 100vw;
	height: 100vh;
	z-index: 100; 
	position: fixed;
	top:0;
	left: 0;
	margin-top:auto;
	background-color: #000;
}

#loading,#main{
	width: 100vw;
	height: 100vh;
	text-align: center; 
	z-index: 4; 
	position: fixed;
	top:0;
	left: 0;
	margin-top:auto;
	display: table;
	background-color: rgba(150, 150, 150, 0.5)
}
#pressOK{
	width: 100vw;
	height: 100vh;
	text-align: center; 
	position: fixed;
	top:0;
	left: 0;
	margin-top:20vh;
	display: table;
	z-index: 5 !important; 
}
#animacion{
	display: table-cell;
	vertical-align: middle;
	width:100vw;
	height: 100vh;
}

#content_main{
	display: table-cell;
	vertical-align: middle;
	width:100vw;
	height: 100vh;
	text-align:center;
	border-radius: 1em;
	padding: 0em;
}


.log{
	font-size: 8pt;
	font-style: italic;
}

#splash{
	color: #fff;
	font-size: 7.5vw;
	position:fixed;
	z-index:1000;
	background-color:#fff;
	width:100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
}


#contenedor_principal{
	position:relative;
	max-width:1024px;
	width:100%;
	margin: auto auto;
	overflow:hidden;
}
header{
	height:25vh;
}
#nick,#numero_pregunta{
	top:2.5vh;
	position:fixed;
	font-size:2.5vh;
	height:3.5vh;
	background-color:#8DAE7E;
	border-radius: 0px;
	padding:0px 20px 3px 5px;
	z-index:4;
}
#nick{
	right:-15px;
}
#numero_pregunta{
	left:-20px;
	padding-left:25px;
}

#sms1,#puntos_totales{
	bottom:1vw;
	position:fixed;
	font-size:2.5vh;
	height:3.5vh;
	background-color:#8DAE7E;
	border-radius: 0px;
	padding:0px 20px 0 10px;
	z-index:4;
}
#sms1{
	left:-10px;
}
#puntos_totales{
	right:-20px;
}

.puntos_record{
	font-family:bit;
	font-size:8vw;
	white-space: nowrap;
	color:white;
	-webkit-text-stroke: 1px #99da7c;
}


.user{
	height:1.5vh;
}

footer{
	height:5vh;
}
html{
	margin: 0;
	padding: 0;
}
.hero-img {
  
}
@keyframes infinite-shift-left {
	0% {
		background-position: -20000px 0,0 -20000px;
	}
	100% {
		background-position: 0 0,0 0;
	}
}@keyframes infinite-shift-left2 {
	0% {
		background-position: -40000px 0,0 40000px;
	}
	100% {
		background-position: 0 0,0 0;
	}
}
#confetti{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index:5;
}
#loading{
	width: 100vw;
	height: 100vh;
	text-align: center; 
	z-index: 4; 
	position: fixed;
	top:0;
	left: 0;
	margin-top:auto;
	display: table;
	background-color: rgba(150, 150, 150, 0.5)
}
#animacion{
	display: table-cell;
	vertical-align: middle;
	width:100vw;
	height: 100vh;
}
#input_nombre h1{
	font-weight:lighter;
	font-size:3vw;
	color:#000;
}
#input_nombre input{
	font-weight:lighter;
	width:234px;
	height: 4vh;
	font-size:3vh;
	padding:5px;
	border-radius: 25px;
	margin-top:10px;
}	
#input_nombre, #sugerir_pregunta{
	/*background-image: url('../img/fondo.jpg');*/
	max-width:500px;
	width: 70vw;	
	background-color: #ccc;
	font-size:3vh;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	vertical-align: middle;
	border-radius: 25px;
	border: 2px solid #FF00EA;
	padding: 20px; 
}


#record,#gracias{
	vertical-align: middle;
	border-radius: 25px;
	border: 2px solid #FF00EA;
	padding: 20px; 
	max-width:500px;
	width: 70vw;	
	background-color: #ccc;
	font-size:3vh;
	margin:10vh auto;
}

#gracias{
	margin-top:20vh;
	
}
#contenedor_records{
	vertical-align: middle;
	border-radius: 25px;
	border: 2px solid #FF00EA;
	padding: 20px; 
	max-width:800px;
	width: 70vw;	
	background-color: #ccc;
	font-size:3vh;
	margin:auto;
	text-align:left;
	margin-top:15vh;
}
#contenedor_records p{
	color:#333;
	font-size:3vw;
	z-index:2;
	padding:0.5vh;
	margin:0.5vh;
}

header{
	margin-top:2vh;
	text-align:center;
}
header img.logo{
	height:25vh;
}
#main{
	text-align:center;
	border-radius: 1em;
	padding: 0em;
}
ol, li {
	text-align:left;
	margin-top:20px;
	margin-bottom:20px;
	margin-top:10px;
	margin-bottom:10px;
}
.boton1{
	background:#f9f9f9 url("../img/fondo_single.png");
	background-size: 7vh;
}
.boton2{
	background:#f98899 url("../img/fondo_time.png");
	background-size: 7vh;
}
.boton3{
	background:#99f899 url("../img/fondo_vs.png");
	background-size: 7vh;
}
.boton4{
	background:#99f8f9 url("../img/fondo_people.png");
	background-size: 7vh;
}
.boton5{
	background:#f988f9 url("../img/fondo_upload.png");
	background-size: 7vh;
}
.boton6{
	background:#f9f899 url("../img/fondo_top.png");
	background-size: 7vh;
}
.boton{
	animation: infinite-shift-left 1000000ms infinite;
	text-align:center;
	padding-top:2vh;
	color:#333;
	height:5.5vh;
	width:100%;
	font-size:3vh;
	margin:1vh 0;
	z-index:2;
}
.boton:hover{
	background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%);
	color:#999;
}

.boton > span, #reset{
	background-color: #fff;
	border-radius: 0px;
	border: 2px solid #000;
	margin-top: 1vh;
}

#pregunta{
	padding: 0;
	margin: 0;
	display: flex; 
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
	height:90vh;
}
.imagen_pregunta{
	max-width:90vw;
	max-height:30vh;
	border-radius: 20%;
}
.enunciado{
	background-color:#fff;
	text-align:justify;
	font-size:2.5vw;
	border-radius: 12px;
	border: 2px solid #FF00EA;
	padding: 4px;
	height:30vh;
	margin: 0 auto;
	width:90vw;
	max-width:900px;
}
.respuesta{
	width:50vw;
	max-width:900px;
	background-color: #fff;
	border-radius: 0px;
	border: 2px solid #000;
	padding: 1vh 1vw;
	margin-top: 1vh;
	text-align:center;
	padding:1vh;
	color:#333;
	height:4.2vh;
	font-size:2.5vh;
	margin: 0 auto;
	margin-bottom:10px;
	z-index:2;
	overflow:hidden;
}

#barra{
	width: 100%;
	background-color: grey;
	margin-bottom:10px;
}
#progreso{
	width: 0%;
	height: 5px;
	background-color: #FF00EA;
}
#barra2{
	width: 100%;
	background-color: grey;
	margin-bottom:10px;
}
#progreso2{
	width: 0%;
	height: 5px;
	background-color: #FBBC05;
}
#opciones{
	position:relative;
	bottom:0px;
}

#sound,#music{
	height:5vh;
}

#sound{
	float:left;
}

#music{
	float:right;
}
.col1{
	float:left;
	
}
.col2{
	float:right;
}

#div_creditos{
	background-color:#fff;
	text-align:justify;
	margin:auto auto;
	font-family: "bangers";
	margin-top:10vh;
	font-size:1vh;
	padding:2vh;
	border-radius: 25px;
}

#div_creditos p.peque{
	font-size:0.95vh;
}

#div_creditos p.creditos_title{
	font-weight:bold;
	text-decoration:underline;
}

#div_creditos table{
	width:100%;
	max-width:400px;

}

#div_creditos table td{
	vertical-align: top;
	
}
#sugerir_pregunta textarea{
	margin-top:10vh;
	width:100%;
}

.t_nueva{
		width:100%;
	
}

.t_nueva td input[type="text"]{
	width:100%;
}

.t_nueva .col1{
	width:100%;
}
.t_nueva .col2{
	width:90%;
	overflow:hidden;
}

#solucion{
	color:#3f3;
	-webkit-text-stroke: 1px #000;
}



@media screen and (min-width: 1024px) {
	#splash{
		font-size: 3vw;
	}
	.respuesta{
		
	}
	.enunciado{
		font-size:15pt;
	}
	
}

@media screen and (min-width: 1440px) {
	#contenedor_records p{
		font-size:20pt;
	}

	.user{
		height:2vh;
	}
}

@media screen and (max-width: 425px) {
	#nick,#numero_pregunta,#sms1,#puntos_totales{
		font-size:4vw;
		height:4.5vw;
	}
	.user{
		height:1.5vh;
	}
	.respuesta{
		width:90vw;
	}
}