*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #ccc;
}

.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
}
  
.calculator-screen {
    width: 100%;
    font-size: 5rem;
    height: 90px;
    border: none;
    background-color: #252525;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
}
  
button {
    height: 60px;
    border-radius: 100%;
    border: 1px solid #c4c4c4;
    font-size: 2rem;
    color: #333;
    background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
    text-shadow: inset 0 1px ;
    box-shadow: 1px 1px #333;
}
  
button:hover {
    background-color: #eaeaea;
    border: 1.5px solid #3d3b3b;
    transform: translateX(-1.5px) translateY(-1.5px);
}

button:active{
    background-color: #eaeaea;
    border: 1.5px solid #3d3d3d;
    transform: translateX(1.5px) translateY(1.5px);
}
  
.operator {
    color: #337cac;
}
  
.del{
    background-color: #f0595f;
    color: #fff;
    grid-row: 2 / 3;
    grid-column: 4 / 5;
}

.del:hover{
    background-color: #f17377;
}

.all-clear {
    background-color: #6fad6f;
}
  
.all-clear:hover {
    background-color: rgb(164,212,164,80%);
}

.equal-sign {
    background-color: #2e86c0;
    border-color: #337cac;
    border-radius: 30px;
    color: #fff;
    grid-row: 3 / 6;
    grid-column: 4 / 5;
    height: 100%;
}
  
.equal-sign:hover {
    background-color: #4e9ed4;
}

.calculator-keys{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    padding: 20px;
    background-color: #aba7a7;
}