@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');

*{
	font-family: 'Zen Kurenaido', sans-serif;
	transition: all ease .15s;
	-webkit-transition: all ease .15s;
	-moz-transition: all ease .15s;
	-o-transition: all ease .15s;
}

*{
	font-size: 1rem;
}

html, body{
	width: 100%;
	height: 100%;
}

body{
	margin: 0;
	background-color: #FFFFFF;
}

/* SCROLLBAR */

*::-webkit-scrollbar{
    width: 13px;
}
 
*::-webkit-scrollbar-track {
	background-color: #191919;    
}
 
*::-webkit-scrollbar-thumb {
    background-color: #909090;
}

/* SELECCIÓN DE TEXTO */

::selection{
	background-color: #F0E68C;
	color: #B22222;
}

header img{
	display: block;
	margin: 0 auto;
}

h1{
	color: #2F4F4F;
	text-align: center;
}

h2{
	color: #800000;
}

.h2center{
	text-align: center;
}

/* FORMULARIO */
form{
	border-radius: .5rem;
	padding: 1% 0;
	margin: 0 auto;
	margin-bottom: 2.5%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

form label, form input, form select, form textarea, table input{
	display: block;
	color: #262626;
}

form input, form select, form textarea{
	background-color: transparent;
	outline: 0;
	border: 0;
	border-bottom: .1rem solid gray;
	color: #262626;
}

form input:focus, form select:focus, form textarea:focus{
	border-color: #008B8B;	
}

form [type=submit]{
	display: block;
	margin: 0 auto;
	cursor: pointer;
	margin-top: 2.5%;
	border: .1rem black solid;
	outline: 0;
	background-color: transparent;	
	font-weight: normal;	
	padding: 0 .5rem;
	user-select: none;
	color: #008080;
	border-color: #008080;
}

form [type=submit]:hover{
	transform: scale(.95);
	font-weight: bold;	
	color: snow;
	background-color: #008080;
}

/******************************/
form section {
	display: flex;
	width: 80%;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: center;
	margin-top: 1%;
	margin-bottom: 1%;
}

form section > label {
	transition: all .2s;
	transform-origin: top left !important;
	font-weight: bold;
	cursor: pointer;
	text-align: left;
}

form section > input:not(:focus) + label, form section > textarea:not(:focus) + label{
	transform: translateY(1em) scale(1.15) !important;
	opacity: .5;
	font-weight: normal;
}

form section > input:focus + label, form section > textarea:focus + label{
	color: #008B8B;
}

form section > input:not(:placeholder-shown) + label, form section > textarea:not(:placeholder-shown) + label{
	transform: translateY(0em) scale(1) !important;
	opacity: 1;
	font-weight: bold;
}
/******************************/

.validar{
	display: block;	
	background-color: #5F9EA0;
	color: snow;
	text-align: center;
	padding: .5% 0;
	user-select: none;
	margin-top: -1%;
}

.validar:hover, #generar:hover{
	cursor: pointer;
	filter: brightness(1.2);
	transform: scale(1.025);
}

.validar:active, #generar:active{
	transform: scale(.975);
}

form section{
	margin-bottom: 2.5%;
}

form label{
	font-weight: bold;
}

form section.inline input{
	/*width: 100%;*/
}

form section:not(.inline) input, form textarea{
	/*width: 98.25%*/
}

form textarea{
	resize: none;
	height: 30vh;
}

#generar{
	display: block;
	margin: 0 auto;
	padding: 2.5% 4%;
	text-align: center;
	background-color: #6B8E23;
	color: #F5FFFA;
	user-select: none;
}

.lights{
	background-color: #FAFAD2;
}

.up{
	margin-top: 0;
	opacity: 1;
	transition: all ease 1.5s;
}

.down{
	margin-top: 15vh;
	opacity: 0;
}

footer{
	height: 2.5vh;
}

#subir{
	position: fixed;
	background: #2596be;
	text-align: center;
	color: snow;
	padding: 2.5%;
	border-radius: 1rem;
	bottom: 1%;
	right: 1%;
	font-size: 1.1rem;
	cursor: pointer;
}

#subir:hover{
	opacity: 1;
}

.show{
	display: block;
	opacity: .75;
}

.hide{
	opacity: 0;
	display: none;
}

/* Pantalla grande */
@media all and (min-width: 920px){
	header img{
		width: 70%;
		height: 25vh;
	}

	form{
		width: 55%;
	}
	
	form input:not([type=submit]), form textarea, form select, form label{
	    width: 70%;
	}

	form .inline{
		/*display: inline-block;
		vertical-align: middle;
		width: 48%;
		margin-right: 1.775%;*/
	}

	/*[type=submit]{
		width: 20%;
	}*/

	.validar{
		width: 12.5%;
	}

	h1{
		font-size: 2rem;
	}

	h2{
		font-size: 1.3rem;
	}

	#generar{
		width: 17.5%;
		margin-top: 5%;
	}
}

/* Pantalla chica */
@media all and (max-width: 920px){
	header img{
		width: 82.5%;
		height: 20vh;
	}

	form{
		width: 80%;
	}
	
	form input:not([type=submit]), form textarea, form select, form label{
	    width: 90%;
	}

	/*[type=submit]{
		width: 32.5%;
	}*/

	.validar{
		/*width: 30%;*/
	}

	h1{
		font-size: 1.3rem;
	}

	h2{
		font-size: 1.1rem;
		text-align: center;
	}

	#generar{
		width: 30%;
		margin-top: 7.5%;
	}
}