@import url("https://fonts.googleapis.com/css?family=Roboto:100");

body {
  font-family: Roboto, sans-serif;
  padding: auto;
  text-align: center; /* Centers body */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

.calc-parent {
  display: grid;
  width: 360px;
  /* margin-left: calc(50vw - 200px); */
  /* margin-left: 1px; */
  font-size: 30px;
  grid-template-areas:
    "display display display display"
    "AC      AC 	 backspace 	divide"
    "seven		 eight		 nine 		  multiply"
    "four 		 five 	 	 six 		  minus"
    "one 		 two 		 three 		  plus"
    "zeroo 	 	 zeroo 		decimal	      equals";
  margin-top: 100px;
}

#calc-display {
  grid-area: display;
  border: 1px solid black;
  padding: 10px;
  text-align: right;
  font-size: 45px;
  color: white;
  background-color: black;
}
#calc-clear {
  grid-area: AC;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-backspace {
  grid-area: backspace;
  font-size: 25px;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-divide {
  grid-area: divide;
  border: 1px solid black;
  padding: 5px;
  color: white;
  background-color: orange;
}
#calc-zero {
  grid-area: zeroo;
  border: 1px solid black;
  text-align: right;
  padding: 5px;
  padding-right: 15%;
  background-color: lightgray;
}
#calc-seven {
  grid-area: seven;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-eight {
  grid-area: eight;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-nine {
  grid-area: nine;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-multiply {
  grid-area: multiply;
  border: 1px solid black;
  padding: 5px;
  color: white;
  background-color: orange;
}
#calc-four {
  grid-area: four;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-five {
  grid-area: five;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-six {
  grid-area: six;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-minus {
  grid-area: minus;
  border: 1px solid black;
  padding: 5px;
  color: white;
  background-color: orange;
}
#calc-one {
  grid-area: one;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-two {
  grid-area: two;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-three {
  grid-area: three;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-plus {
  grid-area: plus;
  border: 1px solid black;
  padding: 5px;
  color: white;
  background-color: orange;
}
#calc-decimal {
  grid-area: decimal;
  border: 1px solid black;
  padding: 5px;
  background-color: lightgray;
}
#calc-equals {
  grid-area: equals;
  border: 1px solid black;
  padding: 5px;
  color: white;
  background-color: orange;
}

.calc-btn:hover {
  cursor: pointer;
  color: white;
  background-color: black !important;
}