:root {

    --azul:#333573;

    --verde:#64E366;

    --naranja: #F5991C;

    --azulclaro:#D5D7E3;

}





html {

    box-sizing: border-box;

    height:100vh;

 }

  

  *,

  *:after,

  *:before {

    box-sizing: inherit;

}



body {

     height:100vh;

     display:flex;

     font-family: Garamond, EB Garamond, Georgia, serif;    

}



.inicio {

    flex:1;

    display:flex;

    flex-direction:column;

}



header{

    flex: 0 0 15%;   

    background-color:var(--azul); 

    display:flex;

}



.contenido{

    flex: 0 0 70%;

    display:flex;

    justify-content:center;

    background-color:var(--azulclaro);

}



footer{

    flex: 0 0 5%;

    background-color:var(--azul);

    display:flex;

    justify-content:center;

    color:white;

    font-size:1rem;

    padding: 1rem;

}





.titulo{

    flex: 1; 

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

}



.titulo h3{

    text-align:center;

}



.recuadro {

    background-color:white;  

    margin: 1rem auto;

    width: 70%;

    display:flex;

    flex-direction:column;

}



@media (min-width: 700px){

    .recuadro {

      width:50%;

    }

}





.logo{

     flex: 0 0 10%;

     margin: .50rem .50rem;

     display:flex;

     flex-direction:row;

     align-items:center;

     margin:.50rem auto;

}



.legend{

   display:flex;

   justify-content:space-around;

}



.legend_yox .y{

    font-size:2rem;

    color:var(--azul);

    font-weight:bold;   

}



.legend_yox .o{

    font-size:2rem;

    color:var(--verde);

    font-weight:bold;   

}



.legend_yox .x{

    font-size:2rem;

    color:var(--naranja);

    font-weight:bold;  

    margin-right:1rem; 

}





.logo img{

    min-width:20rem;

    min-height:4rem;

    max-width:20rem;

    max-height:4rem;

}





.logo+h5{

     display:flex;

     justify-content:center;

}



.campo {

     position:relative; 

     margin: .50rem 1rem; 

}



.campo label {

     font-weight:bold;

}



.registrarse{

    display:flex;

    flex-direction:column;  

}



.registrarse a{

     display:flex;

     justify-content:center;

     margin-top:.50rem;

     

}



.ingreso {

     display:flex;

     justify-content:center;

}



.ingreso button {

      width:50%;

}



footer p+p{

    font-size:.75rem;

    display:flex;

    justify-content:center;

}