/* full-page layout for the login */
login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(to right, var(--color-white), var(--color-light));
    color: var(--color-dark);
    
}

.login-container {
    margin: 0 15px;
}

/* card that hold each login and register form */
.form-box {
    width: 100%;
    max-width: 450px;
    padding: 30px;
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    display:none
}

/* only show active form */
.form-box.active {
    display: block;
}

/* style all the inputs in my form */
.form-box input,
.form-box select {
    width: 100%;
    padding: 12px;
    background: var(--color-white);
    border-radius: 6px;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--color-dark);
    margin-bottom: 20px;
}

.form-box h2 {
    font-size: 34px;
    text-align: center;
    margin-bottom: 20px;
}

/* main login/register button styling */
.form-box button {
    width: 100%;
    padding: 12px;
    background: var(--color-primary);
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--color-white);
    font-weight: 500;
    margin-bottom: 20px;
    transition: 0.5s
}

.form-box button:hover {
    background: var(--color-primary-variant);
}

.form-box p {
    font-size: 14.5px;
    text-align: center;
    margin-bottom: 10px;
}

.form-box p a {
    color: var(--color-primary);
    text-decoration: none; 
}

.form-box p a:hover {
    text-decoration: underline; 
}

/* error message if password/login is wrong */
.error-message {
    background: var(--color-background);
    color: var(--color-danger);
    padding: 12px;
    font-size: 16px;
    border-radius: 56x;
    margin-bottom: 20px;
    text-align: center;
}

/* back button at the top left of screen */
.back-btn {
    position: fixed;        
    top: 20px;              
    left: 20px;            
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 15px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}

.back-btn:hover {
    background: var(--color-primary-variant);
}