/* Estilos generales del cuerpo */
body {
    font-family: 'Nunito', sans-serif;
    background-color: #f7fafc; /* Fondo gris claro */
    color: #4a5568; /* Texto gris oscuro */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Para que el footer se mantenga abajo */
}


/* Contenedor de partículas */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Asegura que las partículas estén al fondo */
    background:rgb(195, 195, 202);
}

/* Contenedor principal para la imagen */
.image-container {
    width: 40%; /* Ancho del contenedor de la imagen */
    max-width: 400px; /* Máximo ancho de la imagen */
    margin: 12px auto; /* Centrado y margen */
    padding: 5px; /* Espaciado interno */
    text-align: center; /* Centrado de la imagen */
    background-color: #f0f0f0; /* Fondo opcional */
    border-radius: 10px; /* Bordes redondeados corregidos */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* Ajuste para la imagen dentro del contenedor */
.image-container img {
    width: 100%; /* La imagen ocupará el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    max-height: 400px; /* Limita la altura máxima para que no sea demasiado grande */
    border-radius: 8px; /* Bordes redondeados en la imagen */
    object-fit: contain; /* Asegura que la imagen no se distorsione */
}

/* Estilos para los botones */
.btn {
    text-decoration: none;
    display: inline-block;
    background-color: #4a5568;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    font-weight: 500;
    margin-top: 10px;
}

/* Efecto hover sobre los botones */
.btn:hover {
    background-color: #2d3748;
    border-color: #fff;
    transform: translateY(-2px);
}

.btn-back {
    background-color: #38b2ac; /* Color personalizado */
}

.btn-login {
    background-color: #5e83a7; /* Color personalizado */
}

.btn-register {
    background-color: #e53e3e; /* Color personalizado */
}

/* Ajustes para la barra de navegación */
.relative {
    position: relative;
    flex: 1;
}

/* Contenedor de los botones de navegación */
.relative .space-x-4 {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

@media (max-width: 500px) {
    .relative .space-x-4 {
        flex-direction: column;
        gap: 10px;
    }
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    background-color: #2d3748;
    color: #fff;
    margin-top: auto;
}

/* Media Queries para mejorar la responsividad */
@media (max-width: 640px) {
    .image-container {
        width: 90%;
        padding: 0 10px;
    }

    .relative {
        text-align: center;
    }
}
/* Espaciado entre los botones */
.space-x-4 {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Espacio para el copyright */
footer {
    background-color: #2d3748;
    color: #fff;
    padding: 1rem;
}