@font-face {
  src: url(../fonts/Poppins-Bold.ttf);
  font-family: Poppins;
}

body{
  width: 100vw;
  height: 100vh;
  background: #aaa;
  font-family: 'Poppins', sans-serif;;
}
#wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#calculator{
  margin-top: 40px;
  width: 500px;
  height: 700px;
  background: antiquewhite;
  border: 5px solid black;
  border-radius: 10px;
}
#display{
  background: #222;
  width: auto;
  height: 180px;
  color: antiquewhite;
}
#display-top, #display-middle, #display-bottom{
  text-align: right;
  height: 60px;
  line-height: 60px;
  font-size: 35px;
  text-align: center;
}
/* #display-middle{
  font-size: 45px;
} */
#buttons{
  /* width: auto; */
  /* height: 500px; */
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  align-items: center;
  justify-items: center;
  background: #eee;
}

.calc-btn{
  font-size: 16px;
  width: 30px;
  height: 23px;
  background: #999;
  padding: 20px 20px;
  margin: 8px 5px;
  border: 2px solid black;
  border-radius: 5px;
  box-shadow: 2px 2px 2px black;
  text-align: center;
}
.calc-btn:hover{
  color: white;
  background: #666;
  box-shadow: none;
}
#row3-btn1,#row3-btn2,#row3-btn3,#row3-btn4,#row3-btn5,
#row4-btn1,#row4-btn2,#row4-btn3,#row4-btn4,#row4-btn5,
#row5-btn1,#row5-btn2,#row5-btn3,#row5-btn4,#row5-btn5,
#row6-btn1,#row6-btn2,#row6-btn3,#row6-btn5{
  font-size: 30px;
}
#row6-btn3{
  grid-column-end: span 2;
  width: 135px;
  font-size: 40px;
  line-height: 23px;
}
@media screen and (max-width: 550px){
  #display-top, #display-middle, #display-bottom{
    line-height: 60px;
    font-size: 35px;
    
  }
  #calculator{
    margin-top: 40px;
    width: 90%;
    height: 100%;
    
  }
  .calc-btn{
    font-size: 14px;
    /* width: 25px; */
    padding: 14px 12px;
  }
  #row3-btn1,#row3-btn2,#row3-btn3,#row3-btn4,#row3-btn5,
  #row4-btn1,#row4-btn2,#row4-btn3,#row4-btn4,#row4-btn5,
  #row5-btn1,#row5-btn2,#row5-btn3,#row5-btn4,#row5-btn5,
  #row6-btn1,#row6-btn2,#row6-btn3,#row6-btn5{
    font-size: 25px;
  }
  #row6-btn3{
    grid-column-end: span 2;
    width: 100px;
    font-size: 30px;
    line-height: 23px;
  }
}