* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--dark-accent-color);
  --dark-accent-color: #023047;
  --light-accent-color: #8ecae6;
  --light-bright-accent-color: #ffb703;
  --dark-bright-accent-color: #fb8500;
  --calc-color-light: #219ebc; 
  --page-bg-color-light: #edede9;
}

body {
  background-color: var(--page-bg-color-light);
}

button {
  padding: 5px;
  margin: 3px;
  border-radius: 5px;
  border: none;
  background-color: var(--light-accent-color);
}

button:active {
  background-color: var(--dark-accent-color);
  color: var(--page-bg-color-light);
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

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

.num {
  background-color: var(--light-bright-accent-color);
}

.num:active {
  background-color: var(--dark-bright-accent-color);
}

.operation:focus {
  background-color: var(--dark-accent-color);
  color: var(--page-bg-color-light);
}

.footer {
  text-align: right;
  margin: 10px;
}

.footer-text {
  text-decoration: none;
}

.footer-text:hover {
  text-decoration: underline;
}

#num-display {
  text-align: end;
  padding: 5px;
  border:  1px solid var(--calc-color-light);
  border-radius: 5px;
  margin-bottom: 5px;
  background-color: white;
}

#title,
#error-display {
  text-align: center;
}

#calculator {
  max-width: 220px;
  border: 1px solid var(--calc-color-light);
  border-radius: 5px;
  padding: 8px;
  margin: auto;
  background-color: var(--calc-color-light);
}