index.css

* {
  text-align: center;
}

h1 {
  font-size: 50px;
  color: white;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: 300;
}

body {
  background-color: #1f1f1f;
  text-align: center;
}

.grid-item {
  border: 0;
  outline: 0;
  width: 60px;
  height: 60px;
  box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.2),
    5px 5px 15px rgba(0, 0, 0, 0.2);
  background: transparent;
  color: rgb(167, 163, 163);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 30px;
}

.grid-item:hover {
  background-color: rgba(76, 71, 71, 0.2);
}

.grid-item1 {
  border: 0;
  outline: 0;
  width: 60px;
  height: 60px;
  box-shadow: -8px -8px 15px rgba(248, 74, 74, 0.3),
    5px 5px 15px rgba(0, 0, 0, 0.2);
  background-color: rgb(232, 61, 61);
  color: white;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 25px;
}

.grid-item1:hover {
  background-color: rgb(239, 106, 106);
}

.container {
  text-align: center;
  margin-top: 23px;
}

table {
  margin-left: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
}

input {
  border-radius: 21px;
  border: 5px solid #000000;
  font-size: 30px;
  height: 60px;
  width: 350px;
  background-color: rgba(109, 104, 104, 0.474);
  color: aliceblue;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 200;
}

button {
  border-radius: 50%;
  font-size: 40px;
  background: white;
  width: 102px;
  height: 100px;
  margin: 6px;
}

.calculator {
  border: 4px solid black;
  background-color: #1f1f1f;
  padding: 23px;
  border-radius: 53px;
  display: inline-block;
}