@font-face {
    font-family:BatmanForeverAlternate;
    src: url("fuentes/batmfa__.ttf");
  }
  @font-face {
    font-family:Nasalization rg;
    src: url("fuentes/nasalization-rg.otf");
  }
  


body{
    background-image: url(imagenes/fondo.gif);
	width: auto;
    height: auto;
	font-family:arial;
	text-align:center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.padre {
    
	display: flex;
	flex-direction:column;
	height: 85vh;
	width: 80%;
	text-align:center;
	font-family:arial;
    background-color: rgba(0, 0, 0, 0.452);
    flex-wrap: wrap;
    align-content:space-around;
    align-items:center;
  
}

h1
{
font-family:"BatmanForeverAlternate";
color: #000000;
font-size: 25px;
display: flex;
align-items: center;
justify-content: center;
}

h2{
	color:rgb(0, 0, 0);
	font-size: 22px;
    display:flex;
    justify-content: center;
    margin-top: 2%;
    font-family:Nasalization rg;
}

section {
	background-color:rgba(255, 255, 255, 0.822);
	height:80vh;
	width:20%;
	margin-top: 1%;
	
	
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   
}	

div.tablero
{
	
	width:35%;
    height: 80vh;
	background-color:rgb(255, 255, 255);
    margin-top: 1%;
	
  

}

aside 
{
	background-color: rgba(255, 255, 255, 0.822);
	height:80vh;
	width:20%;
	
	margin-top: 1%;
	
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

p{ 
    
    display:flex;
   
    font-size: 20px;
    justify-content: center;
    font-family:Nasalization rg;
   
}

.vs
{
    padding: 1%;
    display:flex;
    margin-top: 1%;
    font-size: 100px;
    justify-content: center;
    font-family:Nasalization rg;
}

button
{
        font-family: Nasalization rg;
        font-size: 25px; /* Tamaño de fuente */
        height: 75px; /* Altura fija */
        width: 45%; /* Ancho en porcentaje */
        background-color: #c69fd1; /* Color de fondo */
        color: black; /* Color del texto */
        border-radius: 10px; /* Bordes redondeados */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
        display: flex; /* Para centrar contenido */
        align-items: center; /* Centrar verticalmente */
        justify-content: center; /* Centrar horizontalmente */
        transition: background-color 0.3s ease; /* Transición suave al cambiar el color*/
   
}
 button:hover {
        background-color: #512e94; /* Cambia el color de fondo al pasar el mouse */
    }
    

input
{
width: 10%;
 height: 40px;
 display:flex;
 margin-top: 2%;


}

.fotos{

display: flex;
align-items: center;
justify-content: center;

height: 35%;
}


.asideimg{
display:flex;
flex-direction: column;
position:absolute;
width: 17%;
height:17%;
margin-left: 14%;
margin-top:1%;
margin-bottom:2%;


}
.volver{
    display:none;
  
}