html {
  box-sizing: border-box;
  max-width: 860px;
  margin: 0 auto;
  background-color: white;
  font-family: 'Montserrat', sans-serif;
}

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

body {
  display: grid;
  align-items: center;
  height: 100vh;
}

.App {
  max-width: 360px;
  margin: 0 auto;
  background-color: hsl(180, 20%, 95%);
  border: solid 1px;
  border-radius: 5px;
}

.display {
  height: 40px;
  border: solid 1px;
  background-color: hsl(180, 20%, 85%);
  padding: 10px;
  margin: 15px;
  text-align: right;
}

.keyboard {
  margin: 10px 0 40px;
  padding: 10px 10px;
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(5, 50px);
  gap: 10px;
  justify-content: center;
}

.button {
  background-color: hsl(180, 20%, 80%);
  border: solid 1px;
  border-radius: 3px;
}

.button:hover {
  background-color: hsl(180, 20%, 78%);
}

#clear {
  grid-row-start: 1;
  border: solid 1px hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
  background-color: hsl(0, 100%, 64%);
}

#clear:hover {
  background-color: hsl(0, 100%, 74%);
}

#equal {
  background-color: hsl(240, 60%, 72%);
  grid-column-start: 4;
  grid-row-start: 4;
  grid-row-end: 6;
}

#equal:hover {
  background-color: hsl(240, 60%, 82%);
}

#plus {
  grid-column-start: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

#minus {
  grid-column-start: 4;
  grid-row-start: 2;
}

#time {
  grid-column-start: 4;
  grid-row-start: 1;
}

#comma {
  background-color: hsl(180, 20%, 80%);
  grid-column-start: 3;
  grid-row-start: 5;
}

.button_function {
  background-color: hsl(180, 20%, 55%);
}

.button_function:hover {
  background-color: hsl(180, 20%, 65%);
}

.keyboard_numbers {
  grid-row-start: 2;
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(4, 50px);
  gap: 10px;
}

#number0 {
  grid-column-start: 1;
  grid-column-end: 3;
}