*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body{
    background-color: rgb(192, 227, 240);
    width: 100%;
}
.calculator{
    background-color: rgba(6, 88, 181, 0.5);
    padding: 10px;
    max-width: 400px;
    margin:0 auto;
    border-radius: 5px;
    margin-top: 50px; 
}
#result{
    width:100%;
    padding: 10px;
    font-size:24px ;
    border-radius: 4px;
    border:none;
    outline: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5)inset;
}
.btns{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap:10px;
    margin-top:30px;
}
button{
    padding: 10px;
    font-size: 24px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.9);
    transition: background-color 0.3s ease;
}
button:hover{
    background-color: grey;
    color:white;
}
.clear{
    background-color: red;
    color: white;
}
.operator{
    background-color:rgb(231, 158, 69);
    color: white;
}
.equal{
    background-color: rgb(153, 153, 220);
    grid-row: span 3;
    color: white;
}