/* Page background */
body{
    margin:0;
    padding:0;
    background: linear-gradient(135deg,#667eea,#764ba2);
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
}

/* Calculator box */
form{
    background:white;
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
    width:260px;
    text-align:center;
}

/* Display screen */
input[type="text"]{
    width:100%;
    height:50px;
    font-size:22px;
    text-align:right;
    padding-right:10px;
    border:none;
    outline:none;
    border-radius:10px;
    background:#f3f3f3;
    margin-bottom:15px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

/* Calculator buttons */
input[type="button"]{
    width:55px;
    height:45px;
    margin:5px;
    font-size:18px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    background:#667eea;
    color:white;
    transition:0.3s;
}

/* Hover effect */
input[type="button"]:hover{
    background:#4c5bd4;
    transform:scale(1.05);
}

/* Operator buttons */
input[value="+"],
input[value="-"],
input[value="*"],
input[value="/"]{
    background:#ff7a18;
}

input[value="+"]:hover,
input[value="-"]:hover,
input[value="*"]:hover,
input[value="/"]:hover{
    background:#e5670f;
}

/* Clear button */
input[value="C"]{
    background:#ff4d4d;
}

input[value="C"]:hover{
    background:#e60000;
}