html,
body {
  height: 100%;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: oklch(20.8% 0.042 265.031);
  color: oklch(92.9% 0.013 255.058);
}

.container {
  display: flex;
  flex-direction: column;
  background-color: black;
  padding: 32px;
  border-radius: 20px;
  flex-shrink: 0;
  gap: 16px;
}

.display {
  display: flex;
  flex-direction: row-reverse;
  font-size: 48px;
  font-weight: 800;
}

button {
  flex: 1 1 0;
  border-radius: 360px;
  border: none;
  padding: 16px;
  font-size: 32px;
  cursor: pointer;
  background-color: oklch(55.1% 0.027 264.364);
}

button:hover {
  filter: brightness(1.2);
}

.row1,
.row2,
.row3,
.row4,
.row5 {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

#divide,
#multiply,
#subtract,
#add,
#equals {
  background-color: oklch(79.2% 0.209 151.711);
}

#clear,
#power,
#modulus {
  background-color: oklch(76.9% 0.188 70.08);
}