body {
  background-color: #202020;
  overflow: hidden;
}

html, body, .sonar-wrapper {
  height: 100%;
}
.center-div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 431px;
  height: 394px;
}
/* Prevent scrollbars to appear when waves go out of bound */
.sonar-wrapper {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 0;
  width: 290px;
  height: 290px;
}

/* The circle */
.sonar-emitter {
  position: relative;
  margin: 0 auto;
  width: 290px;
  height: 290px;
  border-radius: 9999px;

}

/* the 'wave', same shape and size as its parent */
.sonar-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-color: HSL(0,1%,80%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

/*
  Animate!
  NOTE: add browser prefixes where needed.
*/
.sonar-wave {
  animation: sonarWave 1.5s linear infinite;
}

@keyframes sonarWave {
  from {
    opacity: 0.07;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}