body {
    margin: 0;
    font-family: "Libre Baskerville", serif !important;
    background-color: #D2D2D2;
    color: #323232;
}

.container {
    text-align: center;
}

h1 {
    margin: 0;
    font-size: 3em; /* Ajuste para pantallas más pequeñas */
    color: #000;
}

h2 {
    margin: 5px 0 20px;
    font-size: 1.5em; /* Ajuste para pantallas más pequeñas */
    color: #63666B;
}

.form-container {
    perspective: 1000px;
    margin: 50px auto; /* Ajustado para pantallas más pequeñas */
    width: 90%; /* Ajustado para pantallas más pequeñas */
    max-width: 600px; /* Añadido para limitar el ancho máximo */
    height: auto;
}

.form {
    background-color: #63666B;
    border-radius: 30px;
    padding: 30px; /* Reducido para pantallas más pequeñas */
    height: auto;
    width: 100%; /* Ajustado para pantallas más pequeñas */
    max-width: 600px; /* Añadido para limitar el ancho máximo */
    backface-visibility: hidden;
    transition: transform 0.6s;
}

.login-form {
    transform: rotateY(0deg);
    margin: auto;
}

.register-form {
    transform: rotateY(180deg);
    margin: auto;
}

.logo {
    width: 150px; /* Ajustado para pantallas más pequeñas */
    margin-bottom: 30px; /* Reducido para pantallas más pequeñas */
}

input, select{
    width: calc(100% - 30px); /* Ajustado para pantallas más pequeñas */
    padding: 15px;
    border: none;
    border-radius: 5px;
}


.btn-login, .btn-register {
    width: 100%;
    max-width: 150px; /* Añadido para limitar el ancho máximo */
    padding: 10px;
    background-color: #f36b2b;
    color: #D2D2D2;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-login:hover, .btn-register:hover {
    background-color: #f36b2b;
}

.switch-form {
    margin-top: 10px;
    font-size: 0.9em;
    color: #D2D2D2;
    text-align: center; /* Opcional, para alinear el texto en el centro */
    display: flex; /* Utiliza flexbox para alinear los elementos horizontalmente */
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 1px; /* Espaciado entre el texto y el enlace */
    margin-bottom: 0px;
}


.switch-form a {
    color: #ff5722;
    text-decoration: none;
    display: block; /* Hace que el enlace se muestre en una línea separada */
    font-weight: bold; /* Opcional, para resaltar el enlace */
    margin-left: 5px;
}



.form-container.show-register .login-form {
    transform: rotateY(-180deg);
}

.form-container.show-register .register-form {
    transform: rotateY(0deg);
}

.btn-prev, .btn-next {
    width: 100%;
    max-width: 150px; /* Añadido para limitar el ancho máximo */
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-prev {
    background-color: #323232;
    color: #D2D2D2;
}

.btn-next {
    background-color: #f36b2b;
    color: #D2D2D2;
}



.form-container label {
    display: block;
    font-weight: bold;
    margin: auto;
    text-align: left;
    padding-left: 20px; /* Reducido para pantallas más pequeñas */
    color: #D2D2D2;
}

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

.error {
    color: #f36b2b;
    font-size: 12px;
    margin-bottom: 10px;
    display: none;
    text-align: left;
    padding-left: 20px; /* Reducido para pantallas más pequeñas */
}

.is-invalid {
    border-color: red;
}

/* Media Queries para hacer el diseño más responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 1.2em;
    }

    .form {
        padding: 20px;
    }

    .logo {
        width: 120px;
    }

    .btn-login, .btn-register {
        max-width: 70%; /* Asegura que los botones no sean más anchos que su contenedor */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1em;
    }

    .form-container {
        margin: 20px auto;
    }

    .form {
        padding: 15px;
    }

    .logo {
        width: 100px;
    }

    .btn-login, .btn-register {
        max-width: 50%;
        padding: 8px;
    }
}