@font-face {
	font-family: textlogo;
	src: url(Molot.otf);
}

@font-face {
	font-family: textcontenido;
	src: url(Comfortaa-Light.ttf)
}
/*-----------------------------------------------*/

*{
	padding: 0px;
	margin: 0px;
	text-decoration: none;
}

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

/*-----------------------------------------------*/

div.malla {
	background: #837E7E;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 60px 34px 1fr 30px;
}

div.cabeza {
	background: #9B0707;
	grid-column: 1/2;
	grid-row: 1/2;	
	display: inline-flex;	
}

div.comandos {
	background: #837E7E;
	padding: 4px;
	grid-column: 1/2;
	grid-row: 2/3;	
	display: grid;
	grid-template-columns: 1fr 40px;
	grid-template-rows: 1fr;
	grid-gap: 6px;
}

div.cuerpo {
	background: transparent;
	grid-column: 1/2;
	grid-row: 3/4;	
	display: inline-flex;
	margin: 4px;
	border-radius: 9px;
	border: 2px solid lightgray;
}

div.pie {
	background: #3B3A3A;
	grid-column: 1/2;
	grid-row: 4/5;	
	display: inline-flex;
	align-items: center;
	
}

/*-----------------------------------------------*/

label.titulo {
	font-family: textlogo;
	font-size: 40px;
	color: white;
	margin-top: 9px;
	margin-left: 9px;
}

/*-----------------------------------------------*/

input.texto {
	width: 100%;
	height: 24px;
	grid-column: 1/2;
	grid-row: 1/2;
	background: transparent;
	border: 2px solid lightgray;
	border-radius: 3px;
	color: white;
	font-family: textcontenido;
}

input.boton {
	width: 40px;
	height: 28px;
	grid-column: 2/3;
	grid-row: 1/2;
	border-style: none;
	border-radius: 3px;
}

/*-----------------------------------------------*/

label.creador {
	font-family: textcontenido;
	font-size: 12px;
	color: white;
}

/*-----------------------------------------------*/

canvas {
	position: absolute;
}