html, body {
  margin: 0;
  padding: 0;
}

.square {
  position: absolute;
  left: calc(50% - 425px);
  top:0;
  z-index:-1;
  height: 450px;
  width: 850px;
  background-color: #999999;
}

canvas {
  margin: auto;
  display: block;
  border: 5px solid black;
  border-radius: 13px;
}

img {
  margin-left: 500px;
  float: right;
}

.form2 {
  position: absolute;
  top: 25px;
  left: 414px;
}


.button2{
  position: absolute;
  top: 85px;
  left: calc(50% + 210px);
}

.slider {
  width: 100px;
  height: 20px;
  background: #a8a8a8;
  outline: none;
  opacity: 0.7;
  position: absolute;
  left: calc(50% + 270px);
}

.slider1 {
  width: 100px;
  height: 20px;
  background: #a8a8a8;
  outline: none;
  opacity: 0.7;
  position: absolute;
  top: 50px;
  left: calc(50% + 270px);
}

.value {
  position: absolute;
  left: calc(50% + 380px);
  top: 18px;
}

.valueOne {
  position: absolute;
  left: calc(50% + 380px);
  top: 52px;
}

.Gravity {
  position: absolute;
  left: calc(50% + 210px);
  top: 1px;
}

.Speed {
  position: absolute;
  left: calc(50% + 210px);
  top: 35px;
}