body{
    background-color:pink;
}
html, body {
  height: 100%;
  margin: 0;         /* remove default margin */
  overflow: hidden;  /* prevent scrollbars */
}
#square{
    width:50px;
    height:50px;
    background-color:rgb(0, 255, 42);
    border-radius:5px;
    border: dashed rgb(0, 171, 14);
    position:absolute;
    top: 50%;
    left: 50%;
}

#orb{
    width: 30px;
    height: 30px;
    background-color:red;
    border-radius:25px;
    border: dashed rgb(171, 0, 57);
    position: absolute;
    top: 25%;
    left:25%;

}

#score {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 50px;
  font-family:Arial, Helvetica, sans-serif;
  color: rgb(152, 114, 120);
  text-shadow: 0 0 2px #3D2D30, 0 0 4px #3D2D30;

  z-index: 10; /* above game elements */
}

#gameArea {
  position: relative; /* all absolute children use this as reference */
  width: 100vw;   /* full viewport width */
  height: 100vh;  /* full viewport height */
  background-color:rgb(230, 170, 180);
}

#helpme {
  position: absolute;
  bottom: 50%;         /* distance from bottom */
  left: 50%;            /* horizontal center */
  transform: translateX(-50%);
  font-size: 100px;
  font-family:Arial, Helvetica, sans-serif;
  color: rgb(113, 78, 99);
  text-shadow: 0 0 4px #6a6a6a, 0 0 8px #3D2D30;
  z-index: 1;           /* under square/orb */
}

#square, #orb {
  position: absolute;
  z-index: 3;           /* above floor text */
}