.am-container-canvas {
  height: 100vh;
  width: 100%;
  position: fixed;
  inset: 0;
  z-index: -1;
}

#canvas {
  display: block;
  height: 100vh;
  width: 100%;
}



#controls {
  position: absolute;
  top: 0;
  right: 0;
}

#controls > .control {
  display: block;
  margin: 1.3vmax;
  width: 3vmax;
  height: 3vmax;
  filter: invert() drop-shadow(0 0 4px #fff);
  background-size: 100%;
  cursor: pointer;
  opacity: 0.5;
}

#controls > .control:hover {
  opacity: 1;
}

#volume {
  background-image: url(../images/volume_up.svg);
  background-size: cover;
  cursor: pointer;

  &.on {
    background-image: url(../images/volume_off.svg);
  }
}

/* latin */
@font-face {
  font-family: 'Racing Sans One';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/RacingSansOne.woff2) format('woff2');
}