body{
    background: radial-gradient(circle at top, #6294a5, #558797,#76b2cc);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    margin:0;
    padding:1em;
}
.calculator{
    background: linear-gradient(145deg,#3d3c3c,#4b4b4b);
    border-radius: 20px;
    box-shadow: 10px 10px 25px rgba(0,0,0,0.7);
    padding:1.2em;
    width:90%;
    max-width:350px;
    display: flex;
    flex-direction: column;
}
.display{
    background:linear-gradient(145deg,#868282,#575555);
    color:rgb(186, 211, 211);
    font-size: clamp(2em, 3vw, 2.5em);
    text-align: right;
    padding:0.5em;
    border-radius: 12px;
    margin-bottom: 1em;
    overflow-x:auto;
    box-shadow: inset 2px 2px 8px rgba(0,0,0,0.3);
}
.buttons{
    display: flex;
    flex-wrap: wrap;
    gap:0.6em;
}
button{
    flex:1 1 calc(25% - 0.6em);
    padding:1em;
    font-size: 1.2em;
    border:none;
    border-radius: 12px;
    background: linear-gradient(145deg, #2b2b2b, #1f1f1f);
    box-shadow: 4px 4px 10px rgba(0,0,0,0.8);
    color:white;
    cursor:pointer;
    transition:all 0.2s ease;
}
button:hover{
    background: linear-gradient(145deg, #333, #222);
    box-shadow: 0 0 10px rgb(101, 136, 136);
}
button:active{
    transform:scale(0.92);
    box-shadow: inset 3px 3px 8px rgba(0,0,0,0.6);
}
.operator{
    background: linear-gradient(145deg,#eca60e,#f7b655);
    color:black;
    font-weight: bold;
}
.operator:hover{
    background:linear-gradient(145deg,#eca60e,#f7b655);
}
.equal{
    background: linear-gradient(145deg,#43b67c,#4bca80);
    color:black;
    font-weight: bold;
}
.equal:hover{
    background: linear-gradient(145deg,#33ff99,#00e673);
}