body {
  font-family: courier,monospace;
  padding: 0; margin: 0;
  background-color: #DDD;
}

a {text-decoration: none; color: inherit;}

#about {
  position: relative;
  width: 1000px;
  margin-top: 4em;
  padding-left: 13em;
  font-weight: bold;
  /* matrix from https://developer.mozilla.org/en/CSS/-moz-transform */
  background-color: gold;
  color: black;
  transform: matrix(1, -0.2, 0, 1, 0pt, 0pt);
  -moz-transform: matrix(1, -0.2, 0, 1, 0pt, 0pt);
  -webkit-transform: matrix(1, -0.2, 0, 1, 0pt, 0pt);
  z-index: 10;
}

#world {
  margin: 0 auto;
  position: relative;
  width: 800px;
  height: 700px;
  background-color: lightblue;
  overflow: hidden;
}

.b2body {
  text-align: center;
  border-radius: 4em;
  -moz-border-radius: 100%;
  -webkit-border-radius: 4em; /* 100% don't work */
  width: 5em;
  height: 5em;

  position: absolute;
  top: -1000px; /* off screen */
  background-color: white;
  color: #227;
  border: thick solid;
  padding: 1em;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background-color 0.4s ease-in-out;
  -moz-transition: background-color 0.4s ease-in-out;
  -webkit-transition: background-color 0.4s ease-in-out;
}

.b2body:hover {
  color: black;
  background-color: yellow;
}

#ground {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0px;
  background-color: brown;
  color: #DDD;
  /*padding-left: 90px; /* width of wall */
  font-size: small;
}


#ground span {
  display: block;
  float: left;
  margin-left: 3em;
  margin-top: 2.75em; /*height of ground */
}

#ground span.r {
  float: right;
  padding-right: 1em;
}

#left-wall, #right-wall {
  position: absolute;
  width: 100px;
  height: 100%;
  background-color: brown;
}
#left-wall {left: 0;}
#right-wall {right: 0;}

#vacuum {
  position: relative;
  margin: 4em auto;

  background-color: black;
  width: 1em;
  height: 1em;

  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 0.5em;

  transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;

  z-index: 1;
  opacity: 0.4;
}

#vacuum:active {
  width: 15em;
  height: 15em;
  -webkit-border-radius: 7.5em;
  opacity: 1.0;
}