@charset "utf-8";
/* CSS Document */

*{margin:0; padding:0; box-sizing:border-box;}
@font-face {
    font-family: 'LED BOARD REVERSED';
    src: url('fonts/LEDBOARDREVERSED.eot');
    src: url('fonts/LEDBOARDREVERSED.eot?#iefix') format('embedded-opentype'),
        url('fonts/LEDBOARDREVERSED.woff2') format('woff2'),
        url('fonts/LEDBOARDREVERSED.woff') format('woff'),
        url('fonts/LEDBOARDREVERSED.ttf') format('truetype'),
        url('fonts/LEDBOARDREVERSED.svg#LEDBOARDREVERSED') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body{background: #000; height: 100vh; color: aliceblue; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 1.2em;}
#contenedor{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 650px; 
	height: 650px; 	
	margin: 2em auto 4em auto;
	text-align: center;
	transition: all 0.5s linear}
#contenedor-grid {	
	width: 100%;
	height: 100%;
	display:grid;
	grid-template-columns:repeat(6, 16%);
	grid-template-rows:repeat(6, 16%);
	grid-gap:2%; 
	justify-content: center;
	align-content: center;
	font-size: 2.5em;
	line-height:1.5em;
	transition: all 0.5s linear;
	position: relative;
}

.marcador, .botones{
	font-family: 'LED BOARD REVERSED';
	color:aqua;
	width: 650px;
	margin: 0px auto;
	display: flex;
	justify-content: space-around;
}
.marcador{
	font-size: 1.5em;
	margin: 1em auto;
}
.botones button{
	padding: 0.4em 2em;
	border: 0 none;
	border-radius: 1em;
	color: #000;
	font-weight: bold;
	font-size: 1em;
	background: rgb(14,239,243);
	/*box-shadow: 0 .5em 1em .5em rgba(14,239,243,0.5);*/
}
.botones button:hover{
	background: rgba(255,255,0,1.00);
	box-shadow: 0 .5em 1em .5em rgba(255,255,0,0.5);
}
/*.botones button:first-child{
	background: rgba(33,225,61,1.00);
	box-shadow: 0 .5em 2em .5em rgba(33,225,61,0.5);}
.botones button:nth-child(2){
	background: rgba(228,149,20,1.00);
	box-shadow: 0 .5em 2em .5em rgba(228,149,20,0.5);
}*/
.item-8{
	grid-area: 2/2/6/6;
}
.boton{
	display: flex;
	align-items: center;
	justify-content: center;
}
.boton a{
	text-decoration: none;
	color: #000;
	text-shadow: 0px 0px 20px rgb(14,239,243),0px 0px 20px rgb(14,239,243),0px 0px 30px rgb(14,239,243),0px 0px 20px rgb(14,239,243);
	display: block;
	padding: 1em;
	text-align: center;
}
.boton a:hover{
	text-shadow: 0px 0px 20px rgb(255,0,255),0px 0px 20px rgb(255,0,255),0px 0px 30px rgb(255,0,255),0px 0px 20px rgb(255,0,255);}
.boton a:active{
	font-size: 0.8em;}
#over{
	padding: 2em;
	width: 40em;
	height: 8em;
	position: absolute;
	top:50%;
	left: 50%;
	margin-top: -4em;
	margin-left: -20em;
	animation: parpadeo 0.8s linear infinite;
	display: none;
}
/*.mostrar{display:block;}*/
#over p{
	font-family: 'LED BOARD REVERSED';
	font-size: 4em;
	color:red;
	text-align: center;
}
@keyframes parpadeo{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@media all and ( max-width:768px){
	body{
		font-size: 0.8em;
	}
	#contenedor{
		width: 450px; 
	 	height: 450px;}
	.marcador, .botones{
		width: 500px;
	}
}
@media all and ( max-width:375px){
	#contenedor{
		width: 350px; 
	 	height: 350px;}
	.marcador, .botones{
		width: 350px;
	}
		
}