@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body{
    width:100%;
    height:100vh;
    background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
    display:flex;
    justify-content:center;
    align-items:center;
}

.container{
    width: 360px;
    padding: 20px;
    border-radius: 25px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

input{
    width:100%;
    height:90px;
    border:none;
    outline:none;
    border-radius:15px;
    margin-bottom:15px;
    padding:15px;
    font-size:32px;
    text-align:right;
    background:#111;
    color:#fff;
    box-shadow: inset 0 0 5px rgba(255,255,255,0.2);
}

.container div{
    display:flex;
    justify-content:space-between;
}

button{
    width:70px;
    height:70px;
    border:none;
    border-radius:50%;
    margin:6px;
    font-size:20px;
    font-weight:500;
    cursor:pointer;
    background:#1f1f1f;
    color:#fff;
    transition:0.2s;
    box-shadow: 4px 4px 8px #000,
               -4px -4px 8px #2a2a2a;
}

button:active{
    transform: scale(0.95);
}

button:hover{
    background:#333;
}

.btnbox{
    background:#ffb703;
    color:#000;
    font-weight:600;
}

.btnbox:hover{
    background:#ffd166;
}

#display::placeholder{
    color:#888;
}