.app{
  width: 300px;
  display: grid;
  margin: 0 auto;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 50px repeat(5, 30px);
  grid-template-areas: 
    "res res res res"
    "7 8 9 reset"
    "4 5 6 reset"
    "1 2 3 reset"
    "0 dot plus minus"
    "equal equal times div";
  border : 2px solid red;
  border-radius: 4px;
}

h3{
  text-align: right;
  margin: 7px 10px 0 0;
  font-size: 2rem;
  grid-area: res;
}

button{
  background : red;
  color: white;
  border: 1px solid white;
  border-radius: 15px;
  cursor: pointer;
  transition: 0.2s;
}

button:hover{
  background : rgb(245, 90, 0) ;
}

#equal {
  grid-area: equal;
}

#clear{
  grid-area: reset;
}