style.css

#head{
  height:50px;
  background-color: #eba83a;
}
#heading{
  font-size: 25px;
  color: #bb371a;
  text-align: center;
  padding-top: 5px;
}
body{
  background-color: #fff8d9;
  overscroll-behavior-y: contain;
}/*
#box{
  position: absolute;
  top:10%;
  left:4%;
}
#canvas_box{
  border: 2px solid black;
}
#buttons{
  position:absolute;
  top:40%;
  left:5%;
}
#output{
  position: absolute;
  top:50%;
  left: 3%;
}*/

.text{
  color: #bb371a;
  font-size:25px;
}
#head_text{
  position: absolute;
  left:4%;
  top:55px;
}
#box{
  position: absolute;
  top:85px;
  left:4%;
}
#canvas_box{
  border: 2px solid black;
}
#buttons{
  position:absolute;
  top:300px;
  left:5%;
}
#output{
  position: absolute;
  top:350px;
  left: 3%;
}

#footer{
  position: absolute;
  top:450px;
  left: 3%;

}

@media only screen and (max-width: 330px ){
  #heading{
    font-size: 20px;
    color: #bb371a;
    text-align: center;
    padding-top: 5px;
  }

}