body {
  margin: 0;
  overflow: hidden;
}


#background1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("waterback.png") repeat;
  animation: scrolling 10s linear infinite;
  z-index: 0;
}


#background2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("bubbles.png") repeat;
  animation: scrolling1 10s linear infinite;
  z-index: 1;
  pointer-events: none;
}


#content {
  position: relative;
  z-index: 2;
}
@keyframes scrolling {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -900px 900px;
  }
}
@keyframes scrolling1{
  from {
    background-position: 0 0;
  }
  to {
    background-position: 900px -900px;
  }
}
h1{
  text-shadow:
    1px 1px 2px black,
    0 0 1em white,
    0 0 0.2em white;
  color: powderblue;
  text-align: center;

}

#forward {
 text-shadow:
    1px 1px 2px black,
    0 0 1em white,
    0 0 0.2em white;
  color: red;
  font:
    1.5em Georgia,
    serif;
  font-size: 24px;
  text-align: center;
}

#backward{
  text-shadow:
    1px 1px 2px black,
    0 0 1em white,
    0 0 0.2em white;
  color: red;
  font:
    1.5em Georgia,
    serif;
  font-size: 24px;
  position: absolute;
  left: 650px;
  top: 850px;
}

#left{
  text-shadow:
    1px 1px 2px black,
    0 0 1em white,
    0 0 0.2em white;
  color: red;
  font:
    1.5em Georgia,
    serif;
  font-size: 24px;
  position: absolute;
  left: 0px;
  top: 450px;
}

#right {
  text-shadow:
    1px 1px 2px black,
    0 0 1em white,
    0 0 0.2em white;
  color: red;
  font:
    1.5em Georgia,
    serif;
  font-size: 24px;
  position: absolute;
  left: 1400px;
  top: 450px;
}