:root {
  --background-color: hsl(197, 48%, 58%);
  --calc-color: hsl(0, 0%, 63%);
  --calc-shadow: 2px 1px 29px 6px hsla(0, 0%, 23%, 0.3);
  --btn-shadow: 1px 1px hsla(0, 0%, 0%, 0.103);
  --btn-color: hsl(0, 0%, 94%);
  --btn-font-color: hsl(0, 0%, 48%);
  --clear-btn: hsl(39, 85%, 73%);
  --equal-btn: hsl(120, 86%, 81%);
  --my-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--background-color);
}

.calculator {
  height: 450px;
  width: 350px;
  display: flex;
  flex-direction: column;
  background: var(--calc-color);
  box-shadow: var(--calc-shadow);
  border-radius: 10px;
}

#screen {
  height: 5rem;
  width: 100%;
  font-family: var(--my-font);
  font-size: 4rem;
  text-align: end;
  padding: 5px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#keyboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  height: 100%;
}

.nbtn {
  font-size: 2rem;
  font-family: var(--my-font);
  box-shadow: var(--btn-shadow);
  background: var(--btn-color);
  color: var(--btn-font-color);
  border-radius: 5px;
  border: 1px solid #a1a1a1;
}

.nbtn:hover {
  background: #1a1a1a;
  color: #f0f0f0;
}

.nbtn:active {
  background: var(--btn-color);
  color: var(--btn-font-color);
}

#clear {
  background: var(--clear-btn);
  font-size: 2rem;
  font-family: var(--my-font);
  box-shadow: var(--btn-shadow);
  color: var(--btn-font-color);
  border-radius: 5px;
  border: 1px solid #a1a1a1;
}

#clear:active {
  background: hsl(39, 84%, 65%);
}

#equal {
  background: var(--equal-btn);
  font-size: 2rem;
  font-family: var(--my-font);
  box-shadow: var(--btn-shadow);
  color: var(--btn-font-color);
  border-radius: 5px;
  border: 1px solid #a1a1a1;
}

#equal:active {
  background: hsl(120, 93%, 70%);
}