body {
    margin: 0;
    padding: 0;
    /* background: linear-gradient(to right, #b92b27, #1565c0) */
}

/* Main login container centered on page */
.loginContainer{
    border-radius: 20px;
    width: 20%;
    padding: 2rem;
    height:30rem;
    margin-left:auto;
    margin-right:auto;
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

/* Header styles */
.login-header{
    color: ivory;
}
login-header-p{
    color: ivory;
}

.card{
    margin-bottom:20px;
    border:none;
}

/* Main form wrapper */
.box {
    width: 40rem;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    transition: 0.25s;
    
}

/* Base input styling (email, password, text) */
.box input[type="email"],
.box input[type="password"],
.box input[type="text"] {
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #3498db;
    padding: 10px 10px;
    width: 250px;
    outline: none;
    color: ivory;
    border-radius: 24px;
    transition: 0.25s;
    font-family: 'Cabin', sans-serif;
}

/* Placeholder styling */
.form-control::placeholder {
    color: #d2d2d2dd; 
    opacity: 1;
}

/* Header inside form */
.box h1 {
    font-family: 'Cabin', sans-serif;
    color: white;
    text-transform: uppercase;
    font-weight: 500
}

/* Focus animation (input expands + color change) */
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box input[type="email"]:focus {
    width: 300px;
    border-color: #2ecc71
}

/* Submit button styling */
.box input[type="submit"] {
    font-family: 'Cabin', sans-serif;
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #2ecc71;
    padding: 14px 40px;
    outline: none;
    color: #2ecc71;
    border-radius: 24px;
    transition: 0.25s;
    cursor: pointer;
}

/* Submit button hover */
.box input[type="submit"]:hover {
    background: #2ecc71;
    color: white;
}

/* Forgot password link */
.forgot {
    text-decoration: underline;
    color: ivory;
}

/* Error container */
#errors{
    width:25rem;
    height:8rem;
    padding:1rem;
    margin-left: 6.5rem;
}

.login-errors{
    list-style-type: none;
}

/* Error text */
.error{
    font-size: 16px;
    color: red
}










/* Password toggle wrapper (keeps original input layout intact) */
.password-wrapper {
    position: relative;
    width: fit-content;
    margin: 0 auto; 
}

/* Eye icon inside password input */
.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #d2d2d2cc;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
    z-index: 2;
}

/* Eye icon hover */
.toggle-password:hover {
    color: #ffffff;
}










/* RESPONSIVE RULES */
@media screen and (max-device-width: 480px){
    .loginContainer{
        width:20rem;
        height:15rem;
        margin-left:auto;
        margin-right:auto;
        margin-bottom: 12rem;
    }

    .box {
        width: 20rem;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        transition: 0.25s;
        
    }
    
    /* Mobile input sizing */
    .box input[type="text"],
    .box input[type="password"],
    .box input[type="email"] {
        border: 0;
        background: none;
        display: block;
        margin: 10px auto;
        text-align: center;
        border: 2px solid #3498db;
        padding: 5px 5px;
        width: 14rem;
        outline: none;
        color: ivory;
        border-radius: 24px;
        transition: 0.25s;
        font-family: 'Cabin', sans-serif;
    }
    
    .box h1 {
        font-family: 'Cabin', sans-serif;
        color: white;
        text-transform: uppercase;
        font-weight: 500
    }
    
    /* Mobile focus animation */
    .box input[type="text"]:focus,
    .box input[type="password"]:focus,
    .box input[type="email"]:focus {
        width: 300px;
        border-color: #2ecc71
    }
    
    .box input[type="submit"] {
        font-family: 'Cabin', sans-serif;
        border: 0;
        background: none;
        display: block;
        margin: 20px auto;
        text-align: center;
        border: 2px solid #2ecc71;
        padding: 14px 40px;
        outline: none;
        color: #2ecc71;
        border-radius: 24px;
        transition: 0.25s;
        cursor: pointer;
    }
    
    .box input[type="submit"]:hover {
        background: #2ecc71;
        color: white;
    }
    
    .forgot {
        text-decoration: underline
    }
    
    #errors{
        width:20rem;
        height:8rem;
        padding:1rem;
        margin-left:auto;
        margin-right:auto;
        text-align:center;

    }
    
    .login-errors{
        list-style-type: none;
    }
    
    .error{
        font-size: 16px;
        color: red;
    }
    
}