/* Reseteo de margen y relleno */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Contenedor de la imagen de fondo */
.container {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la ventana del navegador */
    background: url('imagen.png') no-repeat center center;
    background-size: contain; /* Asegura que la imagen se ajuste proporcionalmente */
    background-color: #f0f0f0; /* Color de fondo detr¨˘s de la imagen */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Alinea el contenido hacia el final para moverlo al fondo */
    padding-bottom: 30px; /* Ajusta el margen inferior */
    box-sizing: border-box; /* Incluir el relleno en el c¨˘lculo del ancho y alto */
}

/* Superposici¨Žn con el mensaje */
.overlay {
    text-align: center;
    color: black; /* Color del texto */
    font-family: Arial, sans-serif;
    background-color: rgba(255, 255, 255, 0.7); /* Fondo semi-transparente para el texto */
    padding: 20px;
    border-radius: 10px; /* Bordes redondeados */
}

h1 {
    font-size: 3em;
    margin: 0;
    padding: 0;
}