/* Layout */
body{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 0px;
  background-color: antiquewhite;
  
}

.container{
  display: grid;
  grid-template: "display display display display display" 60px
      "seven eight nine clearOne clearAll" 60px
      "four five six add minus" 60px
      "one two three add multiply" 60px
      "zero decimal equals equals divide" 60px
      / 60px 60px 60px 60px 60px;
  grid-gap: 5px;
  padding: 10px;
  background-color: #111;
  margin: 20px;
  border-radius: 10px;
  margin-top: 200px;
  
  
}

#display{
  grid-area: display;
}

#seven{
  grid-area: seven;
}

#eight{
  grid-area: eight;
}

#nine{
  grid-area: nine;
}

#clearAll{
  grid-area: clearAll;
}

#clearOne{
  grid-area: clearOne;
}

#four{
  grid-area: four;
}

#five{
  grid-area: five;
}

#six{
  grid-area: six;
}

#divide{
  grid-area: divide;
}

#multiply{
  grid-area: multiply;
}

#one{
  grid-area: one;
}

#two{
  grid-area: two;
}

#three{
  grid-area: three;
}

#minus{
  grid-area: minus;
}

#add{
  grid-area: add;
}

#zero{
  grid-area: zero;
}

#decimal{
  grid-area: decimal;
}

#equals{
  grid-area: equals;
  background-color: rgb(235, 113, 68);
  border-color: rgb(235, 113, 68);
}

/* typography and color*/

button{ 
  font-family: 'Roboto', sans-serif;
  font-size: 2em;
  border-radius: 5px;
}

.operator{
  background-color: rgb(42, 209, 231);
  border-color:  rgb(42, 209, 231);
}

.numbers{
  background-color: rgb(138, 138, 138);
  border-color: rgb(138, 138, 138);
}

.clear{
  background-color: rgb(192, 3, 3);
  border-color:  rgb(192, 3, 3);
}


#display{
  background-color: rgb(202, 202, 202);
  border-color:  rgb(202, 202, 202);
  margin-bottom: 5px;
  font-family: 'Roboto', sans-serif;
  font-size: 1.7em;
  padding: 10px 2px;
  overflow: hidden;
  
}