/* ===== BODY ===== */
body{
    margin:0;
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(135deg,#fce8d8,#fff5ec);
}

/* ===== HEADING AT TOP ===== */
h2{
    text-align:center;
    padding:30px 0 10px 0;
    margin:0;
    color:#8B4513;
    font-size:28px;
}

/* ===== FORM CONTAINER ===== */
form{
    background:white;
    width:320px;
    padding:35px;
    margin:40px auto;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* ===== LABELS ===== */
label{
    font-weight:bold;
    color:#555;
    display:block;
    margin-top:10px;
}

/* ===== INPUT FIELDS ===== */
input{
    width:100%;
    padding:10px;
    margin-top:5px;
    margin-bottom:15px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:14px;
}

/* INPUT FOCUS EFFECT */
input:focus{
    border-color:#8B4513;
    outline:none;
    box-shadow:0 0 5px rgba(139,69,19,0.3);
}

/* ===== BUTTON ===== */
button{
    width:100%;
    padding:12px;
    background:#8B4513;
    border:none;
    color:white;
    font-size:15px;
    border-radius:6px;
    cursor:pointer;
    transition:0.3s;
}

button:hover{
    background:#6d3611;
}

/* ===== RESPONSIVE ===== */
@media(max-width:400px){
    form{
        width:90%;
    }
}