/** google main.css **/

:root {
  --background: rgb(0, 0, 0);
  --color: rgb(250, 250, 250);
  --font: helvetica, arial;
}


html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;   /* this allows us to change it (e.g. content-box) */
  font-size: inherit;
}

body {
  color: var(--color);
  background-color: var(--background);
  font-family: var(--font);
  font-size: 13px;
  margin: 20px;
  padding: 0px;
}

.visualizer {
  background-color: black;
  border: solid 2px rgb(150, 150, 150);
  border: solid 2px rgb(250, 250, 250);
  border-radius: 5px;
  color: white;
  display: block;
}


audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-return-to-realtime-button,
audio::-webkit-media-controls-rewind-button,
audio::-webkit-media-controls-seek-back-button,
audio::-webkit-media-controls-seek-forward-button,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-timeline-container,
audio::-webkit-media-controls-toggle-closed-captions-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-volume-slider-container {
  color: var(--color);
  font-family: var(--font);
}

audio::-webkit-media-controls-panel {
  background-color: var(--background);
}

.audioControl {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 20px;
  width: 300px;
}

.button {
  background-color: rgba(50, 50, 50, 0.6);
  border: solid 2px rgb(250, 250, 250);
  border-radius: 5px;
  color: rgb(250, 250, 250);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 5px;
  text-align: center;
  width: 100px;
  user-select: none;
  z-index: 3;
  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

.button:hover {
  background-color: rgb(66, 133, 244);
  border-color: rgb(250, 250, 250);
}