body {
        margin: 0;
        padding: 0;
        font-family: Montserrat, sans-serif; /* Agrega comas y elige una fuente de backup */
        background: linear-gradient(150deg, #b8b6b6, #fdfdfd);
        min-height: 100vh; /* Usa min-height en lugar de height para evitar recorte en pantallas pequeñas */
        display: flex;
        justify-content: center; /* Centra el contenido verticalmente */
        align-items: center; /* Centra el contenido horizontalmente */
    }
    
    .formulario {
        position: relative;
       /* width: 900px; /* Aumenta el ancho del contenedor según tus necesidades */
        background: white;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        box-sizing: border-box;
        margin: 0 auto; /* Centra el contenedor horizontalmente */
    }
    
    .formulario h1 {
        text-align: center;
        margin: 0 0 10px; /* Reduce el espacio inferior */
        font-size: 25px;

    }
    .formulario h2 {
        text-align: center;
        margin: 0 0 20px; /* Reduce el espacio inferior */
        padding-bottom: 10px; /* Agrega espacio entre el título y el borde inferior */
        border-bottom: 1px solid silver;
    }
    
    .formulario form {
        padding: 0 20px; /* Alinea el contenido del formulario con el contenedor */
    }
    
    .formulario .username {
        margin: 20px 0; /* Aumenta el espacio superior e inferior de los campos */
        position: relative;
    }
    
    .username input {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 2px solid #3f3e3e; /* Aumenta el grosor del borde y usa un color más claro */
        border-radius: 5px;
        background: none;
        outline: none;
        padding-bottom: 10px
    }
    
    .username label {
        position: absolute;
        top: 10px;
        left: 5px;
        color: #3498DB;
        transform: translateY(-50%);
        font-size: 16px; /* Reduce el tamaño de fuente */
        pointer-events: none;
        transition: 0.2s ease-in-out; /* Añade una transición suave */
        padding-bottom: 10px
    }
    
    .username input:focus ~ label,
    .username input:valid ~ label {
        top: -20px;
        color: #3498DB;
        font-size: 16px; /* Reduce el tamaño de fuente cuando el input está enfocado o tiene valor */
    }
    
    .username input:focus ~ .input-underline::before,
    .username input:valid ~ .input-underline::before {
        width: 100%;
        background: #0c0c0c;
    }
    
    .input-underline::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: #3498DB;
        transition: 0.2s ease-in-out;
    }
    
    input[type="submit"],
a[type="submit"] {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 25px;
    font-size: 18px;
    color: #fff; /* Color blanco para el texto */
    background-color: #0478ec; /* Color de fondo */
    cursor: pointer;
    outline: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

input[type="submit"]:hover,
a[type="submit"]:hover {
    background: #0056b3; /* Cambia el color al pasar el ratón */
    transition: 0.5s;
}
    
    select {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 2px solid #ddd;
        border-radius: 5px;
        background-color: #f5f5f5;
    }
    
    select option {
        font-size: 16px;
        padding: 5px;
    }
    
    .contenedor {
        text-align: center;
        margin-top: 20px;
    }
    .respuesta {
        display: flex;
        align-items: center; /* Centra verticalmente el select y la imagen */
        margin: 20px 0; /* Espacio superior e inferior entre las respuestas */
    }
    
    .respuesta select {
        flex: 1; /* Aprovecha el espacio disponible */
        padding: 10px;
        font-size: 16px;
        border: 2px solid #ddd;
        border-radius: 5px;
        background-color: #f5f5f5;
    }
    
    .respuesta img {
        margin-left: 10px; /* Agrega un espacio entre el select y la imagen */
    }