html,
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: var(--off-white);
  background: linear-gradient(#a5a5a5, #333, #ff9f0a);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

:root {
  --off-white: #f2f2f7;
  --btn-background-orange: #ff9f0a;
  --btn-background-grey: #333;
  --btn-background-white: #a5a5a5;
  --font-s: 3em;
  --font-w: 600;
}

#container {
  background-color: black;
}

#display {
  text-align: right;
  font-size: 3em;
  font-weight: var(--font-w);
  background-color: var(--btn-background-white);
  color: black;
  border: 2px solid;
}

#calculator {
  height: 80vh;
  width: 80vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.equals {
  grid-column: span 4;
}

.zero {
  grid-column: span 2;
}

.btn {
  background-color: var(--btn-background-grey);
  color: var(--off-white);
  font-size: var(--font-s);
  font-weight: var(--font-w);
  transition: all 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
  cursor: pointer;
}

.btn:active {
  background-color: #ffffffd2;
}

.org {
  background-color: var(--btn-background-orange);
}

.ac {
  color: black;
  background-color: var(--btn-background-white);
}