.main-div{
  margin: auto;
}

.grid-container{
  display: grid;
  grid-template-columns: 130px 100px 130px 500px;
  grid-template-areas: "fraction1 equals fraction2 feedback";
}

.fraction{
}

.fraction1{
  grid-area: fraction1;
}
.fraction2{
  grid-area: fraction2;
}

.equals{
  grid-area: equals;
  text-align: center;
  padding-top: 35px;
  height: 175px;
}

.box{
  height: 80px;
}

.doublebox{
  height: 160px;
}

.inputbox{
  padding-top: 10px;
  text-align: center;
  font-size: 2em;
}

.line{
  height: 5px;
  background-color: #666;
}

.number{
  font-size: 3em;
}

.centered{
  text-align: center;
}

.input{
  width: 100px;
  text-align: center;
}

.feedback-container{
  display: grid;
  grid-template-columns: 400px 80px;
  grid-template-areas: "feedback-text feedback-fraction";
  padding-left: 50px;
  grid-area: feedback;
  font-size: 2em;
}

.feedback-text{
  grid-area: feedback-text;
  padding-top: 50px;
}

.feedback-fraction{
  grid-area: feedback-fraction;
  text-align: center;
  padding-top: 30px;
  font-size: 0.8em;
  padding-left: 20px;
}