:root {
  --border-radius: 10px;
  --border-color: rgb(64, 57, 57);
  --display-padding: 15px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(
    30deg,
    hsl(212deg 65% 8%) 0%,
    hsl(254deg 33% 17%) 16%,
    hsl(313deg 43% 22%) 25%,
    hsl(341deg 58% 30%) 33%,
    hsl(2deg 53% 39%) 39%,
    hsl(10deg 57% 44%) 44%,
    hsl(17deg 62% 49%) 49%,
    hsl(24deg 76% 53%) 54%,
    hsl(29deg 83% 56%) 60%,
    hsl(33deg 86% 57%) 66%,
    hsl(36deg 88% 60%) 74%,
    hsl(40deg 90% 62%) 93%
  );
  font-size: 16px;
}

button {
  padding: 0;
  border: 0;
  color: #fff;
  font-size: 1.3rem;
  font-family: system-ui;
}

.calculator {
  width: 235px;
  height: 320px;
  display: flex;
  flex-direction: column;
  color: #fff;
  border-radius: var(--border-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 22px 70px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.display {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  background: rgb(87, 80, 80);
  height: 80px;
  padding: 0 15px;
  font-size: 2.5rem;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  font-weight: lighter;
}

.display:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--display-padding);
  background: rgb(87, 80, 80);
}

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 1px;
  flex: 1;
  background: var(--border-color);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.numpad-grid .dark {
  background: rgb(103, 97, 97);
}

.numpad-grid button {
  background: rgb(128, 123, 123);
}

.numpad-grid button:active,
.numpad-grid button.active {
  background: rgb(160, 158, 158);
}

.numpad-grid .operator {
  background: rgb(255, 159, 10);
}

.numpad-grid .operator:active,
.numpad-grid .operator.active {
  background: rgb(203, 125, 6);
}

.numpad-grid .operator.selected {
  border: 1px solid #000;
}

.span-2 {
  grid-column: span 2;
}

.zero {
  border-bottom-left-radius: var(--border-radius);
}

.equal {
  border-bottom-right-radius: var(--border-radius);
}