body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transition: background-color 0.5s, background-image 0.5s;
}

.container {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px; /* Espacio entre los contenedores */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.3s, background-color 0.3s, background-image 0.5s;
    width: auto;
    max-width: 350px; /* Ancho máximo para los contenedores */
	text-align: center; /* Alinea el texto al centro */
}

#formContainer {
    width: 100%; /* Ancho completo para centrar */
    max-width: 300px; /* Ancho máximo para un diseño más refinado */
    margin: 0 auto; /* Centrado automático */
}

#saludoContainer, #seguridadContainer, #comidaContainer, #rule3Container, #rule4Container, #ratingContainer {
    width: 80%; /* Ocupa el 80% del ancho de la pantalla */
    max-width: 80%; /* Un máximo para que no sea demasiado grande en pantallas grandes */
}

.hidden {
    display: none;
}

form {
    width: 100%;
}

label {
    font-size: 1.3rem;
    color: #333; /* Texto oscuro para mejor visibilidad */
    margin-bottom: 0.5rem;
}

input[type="text"], input[type="submit"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc; /* Borde sutil para los campos de entrada */
    box-sizing: border-box;
}

input[type="submit"] {
    cursor: pointer;
    background-color: #4a90e2; /* Botón azul claro */
    color: white;
    border: none;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #357abd;
}

.highlighted-name {
    font-weight: bold;
    color: #DE6262; /* Color distintivo para los nombres */
}

#mensajeSaludo {
    font-size: 2.1rem; /* Tamaño de fuente grande para mejor visibilidad en pantallas de vehículos */
    animation: fadeIn 0.5s ease-out forwards;
    color: #333; /* Texto oscuro para contraste */
}

#informacionAdicional p, #seguridadContainer, #comidaContainer, #rule3Container, #rule4Container, #ratingContainer {
    font-size: 2.1rem;
    margin-top: 10px;
	animation: fadeIn 0.5s ease-out forwards;
    color: #333; /* Texto oscuro para leer fácilmente */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Estilos específicos para modo día */
@media (prefers-color-scheme: light) {
    body {
        background-image: linear-gradient(to right, #a1c4fd, #c2e9fb);
    }

    .container {
        background-image: linear-gradient(to bottom right, #d6e4f0, #a6f4f9);
    }
    
    .highlighted-name {
        color: #2A9DF4; /* Color azul para nombres resaltados en modo día */
    }
}

/* Estilos específicos para modo noche */
@media (prefers-color-scheme: dark) {
    body {
        background-image: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
    }
	
	#mensajeSaludo {
     color: #fff; /* Texto claro para el modo noche */
}

#informacionAdicional p, #seguridadContainer, #comidaContainer, #rule3Container, #rule4Container, #ratingContainer {
    color: #fff; /* Texto claro para el modo noche */
}

    .container {
        background-image: linear-gradient(to bottom right, #394a6d, #4e617c);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        color: #fff;
    }

    label, #informacionAdicional p, #seguridadContainer p, #comidaContainer p, #ruleContainer p, #rule4Container p, #ratingContainer p {
        color: #ccc;
    }
	
	label, .highlighted-name, p {
        color: #ccc; /* Texto más claro para el modo noche */
    }

    input[type="text"], input[type="submit"] {
        background: #d3d5d9;
        color: #000;
        border: 1px solid #394a6d;
    }

    input[type="submit"] {
        background-color: #6388c9;
		color: #fff;
    }

    input[type="submit"]:hover {
        background-color: #4b87ef;
    }

    .highlighted-name {
        color: #f8c471; /* Color claro para nombres resaltados en el modo noche */
    }
}