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

body {
  display: flex;
  justify-content: center;
  background-color: #333333;
  font-family: "Share Tech Mono", monospace; }

main {
  display: grid;
  margin-top: 50px;
  margin-bottom: 60px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  background-color: black; }

.display {
  grid-column: 1 / 5;
  color: white;
  padding: 10px;
  font-size: 1.7rem;
  max-width: 350px; }

.display :nth-child(1) {
  min-height: 20px;
  color: orange;
  text-align: right;
  vertical-align: text-top;
  line-height: 20px;
  word-wrap: break-word; }

.display :nth-child(2) {
  text-align: right;
  line-height: 35px; }

#clear {
  grid-column: 1 / 3;
  background-color: #ac3939; }

#equals {
  grid-row: 5 / 7;
  grid-column: 4;
  background-color: #004466; }

#zero {
  grid-column: 1 / 3; }

button {
  padding: 20px 35px;
  font-size: 1.5rem;
  color: white;
  border: 0.5px solid black; }

button:hover {
  color: black;
  border-color: white; }

.operator {
  background-color: #666666; }

.number, #decimal {
  background-color: #4d4d4d; }

@media (max-width: 390px) {
  button {
    font-size: 1rem; }
  .display {
    font-size: 1.2rem;
    max-width: 325px; } }