@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --color-primary-gold:#E6F288;
    --color-secondary-green:#7E8C70;
    --color-primary-sky:#6581A6;
    --color-blue: #2A4B8C;
    --color-dark: #0E1426;
    --color-white:#ffffff;
}

html,body{
    height: 100%;/* Permite que elementos hijos puedan usar height:100% */
    min-height: 100vh; /* Garantiza que el contenido ocupe como mínimo toda la pantalla */
    font-size: 62.5%;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

*, *::after, *::before{
    box-sizing: inherit;
}

body{
    margin: 0;
    line-height: 1.6; /* Espaciado entre líneas */
    color: #333; /* Color de texto base */
    background-color: #f4f4f4; /* Un fondo suave para la página */
    display: flex;
    flex-direction: column;
}
main{
    flex-grow:1;  /* Hace que el main se expanda para rellenar el espacio libre */
}


main h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

/* Estilos del Footer */
footer {
    color: var(--color-white); /* Texto blanco */
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
}

footer a {
    color: #ffc107; /* Enlaces en el footer */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}