body {
    margin: 0;
    font-family: Avenir, sans-serif;
    overflow: hidden;
    background: #f9f5f1;
    height: 100vh;
    width: 100vw;
  }
  
  #animatedBackground {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    background: #f9f5f1;
  }
  
  #mainContent {
    position: relative;
    width: 750px;
    max-width: 100vw;
    margin: 3rem auto 4rem auto;
    text-align: center;
    z-index: 1;
  }
  
  #scratchArea {
    position: relative;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    z-index: 1;
    display: inline-block;
  }
  
  #underlyingImage {
    width: 100%;
    max-width: 750px;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
    user-select: none;
  }
  
  #bridge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 750px;
    z-index: 2;
    cursor: crosshair;
    cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png) 53 53, crosshair;
    display: block;
    pointer-events: auto;
    background: transparent;
  }


  #scratchCaption {
  margin-top: 2rem;     /* spacing above the caption */
  color: #7a5e58;       /* caption color */
  font-weight: 600;     /* semi-bold text */
  z-index: 10;          /* stacking above lower layers (works because of position) */
  position: relative;   /* enables z-index to take effect */
  font-size: 32px;      /* increase text size */
  text-align: center;   /* keep it centered under the image */
}