@import url("https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap");
html,
body {
  height: 100%;
}

body {
  background:rgba(255, 255, 255, 0);
  overflow: hidden;
  display: flex;
  /*justify-content: center;
  align-items: center;*/
}

.title {
  user-select: none;
  position: absolute;
  z-index: 20;
  font-family: "Major Mono Display", monospace;
  color: white;
  top: 16px;
  right: 16px;
  font-size: 28px;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-spacing: -5px;
  letter-spacing: -1px;
  padding-bottom: 15px;
  text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.5);
}
.title small {
  font-size: 14px;
  position: absolute;
  top: 120%;
  right: 0;
}
.title::before {
  content: "";
  position: absolute;
  bottom: 0;
  opacity: 0.25;
  right: 0px;
  height: 3px;
  width: 87px;
  background: white;
}

#player {
  width: 400px;
  max-width: 80vw;
  max-height: 80vh;
  position: relative;
}

#play {
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 100%;
  background: white;
  box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.75);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 300ms;
}
#play::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17.3px;
  border-color: transparent transparent transparent #111;
  transform: translateX(2px);
}
#play:hover {
  box-shadow: 0px 0px 20px 5px black;
}
#play.playing::before {
  content: "";
  border: none;
  width: 10px;
  height: 23px;
  background: #111;
  transform: translateX(-2px);
}
#play.playing::after {
  border: none;
  width: 10px;
  height: 23px;
  background: #111;
}

#mute {
  position: absolute;
  top: 80px;
  left: 25px;
  border-radius: 100%;
  background: white;
  box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.75);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 300ms;
}
#mute::after {
  content: "";
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNzUgNzUiCnN0cm9rZT0iIzExMSIgc3Ryb2tlLXdpZHRoPSI1Ij4KPHBhdGggZD0ibTM5LDE0LTE3LDE1SDZWNDhIMjJsMTcsMTV6IiBmaWxsPSIjMTExIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Im00OSwyNiAyMCwyNG0wLTI0LTIwLDI0IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+");
  width: 20px;
  height: 20px;
  background-size: 100%;
}
#mute:hover {
  box-shadow: 0px 0px 20px 5px black;
}
#mute.muted {
  background: red;
}
#mute.muted::after {
  filter: invert(1);
}

#canvas-holder {
  width: 100%;
  padding-top: 112.5%;
  position: relative;
  margin-bottom: 10px;
  border-radius: 15px;
  box-shadow: 0px 5px 20px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
}

#audio audio {
  visibility: hidden;
  position: absolute;
  top: -999px;
  left: -999px;
}