html, body {
  background-color: rgb(110, 254, 42);
  height: 100%;
  width: 100%;
  overflow-wrap: break-word;
  overflow: hidden;
  font-family: "Montserrat", Monospace;
}

#calcBody {
  width: 90%;
  max-width: 500px;
  height: 520px;
  background-color: rgb(115, 125, 125);
  margin: 20px auto;
  border-radius: 5%;
  border: 6px solid rgb(105, 110, 110);
}

.output, #inputCalc {
  margin: 20px auto;
  height: 50px;
  width: 300px;
}

#inputCalc {
  border: 3px solid rgb(52, 52, 58);
  font-size: 28px;
  line-height: 50px;
  border-radius: 5%;
  text-align: right;
  padding: 5px;
  background: white;
  overflow: hidden;
}

table {
  width: 100%;
  height: 400px;
  margin: 40px auto;
}

.btn {
  padding: 5px;
  margin: 1%;
  height: 50px;
  width: 22%;
  border: 3px solid rgb(52, 52, 58);
  background-color: rgb(90, 100, 100);
  font-size: 25px;
  color: white;
}

h2 {
  text-align: center;
  margin: 20px;
  font-family: "Montserrat", Monospace;
  position: relative;
}

@media screen and (max-width: 420px) {
  #calcBody {
    width: 300px;
    max-height: 600px;
  }
  #inputCalc {
    width: 70%;
    margin-left: 10%;
  }
  h2 {
    font-size: 20px;
  }
  .btn {
	font-size: 20px;
	width: 20%;
	padding: 2px;
  }
}

@media screen and (max-width: 320px) {
  html, body {
    width: 320px;
  }
  
  #calcBody {
    min-width: 300px;
  }
}