}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(28, 28, 61);
}
.calculator{
position: relative;
display: grid;
}
.calculator .value{
grid-column: span 4;
height: 100px;
text-align: right;
border: none;
outline: none;
padding: 10px;
font-size: 18px;
background-color: aquamarine;
}
.calculator span{
display: grid;
height: 60px;
width: 60px;
color: white;
background-color:#0c2835;
place-items: center;
border: 1px solid rgba(0, 0,0, .1);
}
.calculator span:active{
background-color: #74ff3b;
color: #111;
}
.calculator span.clear{
grid-column: span 2;
width: 120px;
background-color:#ff3077;
}
.calculator span.plus{
grid-row: span 2;
height: 120px;
}
.calculator span.equal{
background:#03b1ff;
}
</style>