body {
    background: linear-gradient(to right, #fff, #000);
    font-family: 'Arial', sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.display-flex{
    display:flex;
}

.login-container {
    background: black;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
}

.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.login-container .logo {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    justify-content:center;
}

.login-container .logo .multi {
    color: white;
    font-size: 35px; /* Ajusta el tamaño */
    font-weight: bold; /* Hace el texto más grueso */
    text-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.3), /* Sombra externa */
        0 0 10px rgba(255, 255, 255, 0.5), /* Efecto de brillo */
        0 0 20px rgba(255, 255, 255, 0.3); /* Efecto más amplio */
    letter-spacing: 2px; /* Espaciado entre letras */
    font-family: 'Poppins', sans-serif; /* Usa una fuente moderna */
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transición suave */
    border-radius: 5px; /* Bordes redondeados */
}

.login-container .logo .multi:hover {
    color: #ff9800; /* Cambia de color al pasar el mouse */
    transform: scale(1.2); /* Aumenta ligeramente el tamaño */
    text-shadow: 
        2px 2px 10px rgba(255, 152, 0, 0.8), /* Sombra más intensa */
        0 0 20px rgba(255, 152, 0, 0.5); /* Brillo extra */
}

.login-container .logo .system {
    color: blue;
    font-size: 35px; /* Ajusta el tamaño */
    font-weight: bold; /* Hace el texto más grueso */
    text-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.3), /* Sombra externa */
        0 0 10px rgba(33, 203, 243, 0.6), /* Efecto de brillo */
        0 0 20px rgba(33, 203, 243, 0.3); /* Efecto más amplio */
    font-family: 'Roboto', sans-serif; /* Otra fuente moderna */
    letter-spacing: 2px; /* Espaciado entre letras */
    background: linear-gradient(45deg, #2196f3, #21cbf3, #64b5f6); /* Agrega un gradiente más variado */
    -webkit-background-clip: text; /* Clip para mostrar solo el gradiente */
    -webkit-text-fill-color: transparent; /* Hace transparente el texto */
    border-radius: 5px; /* Bordes redondeados */
    transition: transform 0.3s ease-in-out; /* Transición suave */
}

.login-container .logo .system:hover {
    transform: scale(1.2) rotate(2deg); /* Aumenta el tamaño y rota ligeramente */
    text-shadow: 
        2px 2px 15px rgba(33, 203, 243, 0.8), /* Sombra más intensa */
        0 0 30px rgba(33, 203, 243, 0.5); /* Brillo extra */
}

.form-group {
    margin-bottom: 15px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 16px;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: #007bff;
    outline: none;
}

.btn {
    display: inline-block;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
    background-color: #007bff;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}

.btn:hover {
    background-color: #0056b3;
}

.btn-info {
    background-color: #17a2b8;
}

.btn-info:hover {
    background-color: #117a8b;
}

.text-center {
    text-align: center;
}

.text-muted {
    color: #6c757d;
}

hr {
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

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