*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* background-color: rgb(13, 17, 23); */
  background-color: #f9f8f7;
  color: #325294;
  padding: 0 1rem;
  font-family: "Stick", sans-serif;
}
.calc {
  max-width: 340px;
  height: 420px;
  display: grid;
  grid-gap: 2%;
  grid-template-columns: repeat(4, 23%);
  grid-template-rows: 20% repeat(5, 14%);
  grid-template-areas:
    "screen screen screen screen"
    "C C remove divide"
    "seven eight nine into"
    "four five six minus"
    "one two three plus"
    "zer equals equals equals";
  justify-content: center;
  /* border: 1px solid black; */
  /* border: 1px solid rgb(167, 177, 187); */
  margin: 4rem auto;
  padding: 1rem;
  background-color: #68a8f1;
  /* background-color: #f9f8f7; */
  border-radius: 1rem;
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.2);
}
.screen {
  grid-area: screen;
  /* border: 1px solid #333; */
  /* border: 1px solid rgb(201, 209, 217); */
  border-radius: 1rem;
  background-color: #f9f8f7;
  /* background-color: #283e6b; */
  padding: 0.5rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  line-height: 1.1;
  font-weight: bold;
  word-break: break-all;
}
button {
  font-size: 24px;
  /* border: 1px solid #333; */
  border: none;
  border-radius: 1rem;
  outline: 0;
  transition: transform 0.3s, background-color 0.3s;
  cursor: pointer;
  /* background-color: black; */
  /* background-color: #68a8f1; */
  color: #283e6b;
  user-select: none;
  font-family: inherit;
}

button:active,
button.active,
button.powerOps,
button:hover {
  background-color: #325294;
  color: #f9f8f7;
}

button:active {
  transform: scale(0.9);
}
.one {
  grid-area: one;
}
.two {
  grid-area: two;
}
.three {
  grid-area: three;
}
.four {
  grid-area: four;
}
.five {
  grid-area: five;
}
.six {
  grid-area: six;
}
.seven {
  grid-area: seven;
}
.eight {
  grid-area: eight;
}
.nine {
  grid-area: nine;
}
.zer {
  grid-area: zer;
}
.plus {
  grid-area: plus;
}
.minus {
  grid-area: minus;
}
.into {
  grid-area: into;
}
.divide {
  grid-area: divide;
}
.remove {
  grid-area: remove;
}
.C {
  grid-area: C;
}
.equals {
  grid-area: equals;
}

@media (max-width: 450px) {
  h1 {
    margin: 1rem auto 0 auto;
  }
}

h1 {
  text-align: center;
  margin: 4rem auto;
  font-size: 5vh;
}