/* 1) RESET =================================================== */
* {
    margin:      0;
    padding:     0;
    box-sizing:  border-box;
}

/* 2) BASE ==================================================== */
body {
    font-family:      'Arial', sans-serif;
    color:            #fff;
    text-align:       center;
    background:       url('bg_login.jpg') no-repeat center center fixed;
    background-size:  cover;
    display:          flex;
    justify-content:  center;
    align-items:      center;
    height:           100vh;
    min-height:       100vh;
}

/* 3) CONTAINER =============================================== */
.container {
    background:       rgba(0, 0, 0, 0.7);
    width:            500px;
    max-width:        100%;
    padding:          40px;
    border-radius:    12px;
    box-shadow:       0 6px 30px rgba(0, 0, 0, 0.4);
}

/* 4) HEADER TEXT ============================================= */
header h1 {
    font-size:        2.5rem;
    margin-bottom:    15px;
}
header h2 {
    font-size:        1.2rem;
    margin-bottom:    25px;
}

/* 5) FORM FIELDS ============================================= */
label {
    display:         block;
    font-size:       1.1rem;
    text-align:      left;
    margin-bottom:   12px;
}
input[type="text"],
input[type="password"] {
    width:            100%;
    padding:          12px;
    margin-top:       6px;
    font-size:        1.1rem;
    color:            #333;
    background-color: #fff;
    border:           none;
    border-radius:    8px;
}
input[type="text"]:focus,
input[type="password"]:focus {
    outline:          none;
    border:           2px solid #4A90E2;
}
input[type="checkbox"] {
    margin-top:       15px;
}

/* 6) BUTTON ================================================== */
button {
    display:          block;
    width:            100%;
    padding:          14px 22px;
    font-size:        1.2rem;
    color:            #fff;
    background-color: #4A90E2;
    border:           none;
    border-radius:    8px;
    cursor:           pointer;
    transition:       background-color 0.3s ease;
}
button:hover {
    background-color: #357ABD;
}

/* 7) ERROR MESSAGE =========================================== */
.error {
    color:            #FF6347;
    margin-bottom:    20px;
}

/* 8) FOOTER ================================================== */
footer {
    margin-top:       25px;
}
footer a {
    color:            #4A90E2;
    text-decoration:  none;
    font-size:        1rem;
}
footer a:hover {
    text-decoration:  underline;
}

/* 9) RESPONSIVE (≤768px) ====================================== */
@media (max-width: 768px) {
    body {
        background-size:      cover;
        background-position:  center center;
    }
    .container {
        width:                90%;
        padding:              20px;
        height:               auto;
    }
    header h1 {
        font-size:            2rem;
    }
    header h2 {
        font-size:            1rem;
    }
    input[type="text"],
    input[type="password"],
    button {
        font-size:            1rem;
        padding:              10px;
    }
}