styles.css

* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      background-color: burlywood;
      font-family: sans-serif;
      outline: none;

}

.container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
}

.calculator {
      background-color: blue;
      padding: 15px;
      border-radius: 30px;
      box-shadow: inset -5px -5px 12px #ffff inset 5px 5px 12px rgba(0, 0, 0, .16);
      display: grid;

}

input {
      grid-column: span 4;
      height: 70px;
      width: 250px;
      background-color: white;
      box-shadow: inset -5px -5px 12px inset 5px 5px 12px rgb(0, 0, .16);
      border: none;
      border-radius: 30px;
      color: black;
      font-size: 10px;
      text-align: start;
      margin: auto;
      margin-top: 20px;
      padding: 20px;

}
.inputresult{
      margin-top: 10px;
      margin-bottom: 10px;
      height:30px;
      width: 250px;
      grid-column: span 4; 
      border-radius: 30px;  
      padding: 10px;
      background-color: white;
}
button {
      height: 40px;
      width: 40px;
      background-color: bisque;
      box-shadow: inset -5px -5px 12px inset 5px 5px 12px rgb(0, 0, .16);
      border: none;
      border-radius: 50%;
      margin: 4px;
      font-size: 16px;
      color: black;
}

.equal {
      background-color: black;
      color: white;
}

.delete {
      background-color: black;
      color: white;
}

.percent {
      background-color: black;
      color: white;
}

.divide {
      background-color: black;
      color: white;
}

.subtract {
      background-color: black;
      color: white;
}

.multiply {
      background-color: black;
      color: white;
}

.add {
      background-color: black;
      color: white;
}

.click {
      background-color: black;
      color: white;

}

.clear {
      background-color: black;
      color: white;
}