*{
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

/* Background */
.container{
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #89f7fe, #66a6ff);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Calculator body */
.calculator{
    background: rgba(0, 0, 0, 0.85);
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
}

/* Buttons */
.calculator form input{
    border: none;
    outline: none;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    margin: 10px;
    box-shadow: inset 2px 2px 5px rgba(255,255,255,0.1),
                inset -2px -2px 5px rgba(0,0,0,0.5);
    transition: all 0.2s ease;
}

/* Hover effect */
.calculator form input:hover{
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

/* Click effect */
.calculator form input:active{
    transform: scale(0.95);
}

/* Display */
form .display{
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

form .display input{
    text-align: right;
    flex: 1;
    font-size: 42px;
    padding: 10px;
    background: transparent;
    box-shadow: none;
    color: #00ffcc;
}

/* Equal button */
form input.equal{
    width: 145px;
    background: linear-gradient(135deg, #ff512f, #dd2476);
    color: white;
    font-weight: bold;
}

form input.equal:hover{
    background: linear-gradient(135deg, #dd2476, #ff512f);
}

/* Operator buttons */
form input.operator{
    color: #ffb347;
    font-weight: bold;
}

/* AC & DE emphasis */
input[value="AC"],
input[value="DE"]{
    color: #ff6b6b;
    font-weight: bold;
}


.container{
    width: 100%;
    height: 100vh;

    background: 
        linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
        url("calculator copy.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
}