html, body {
    margin: 0;
    overflow: hidden;
    font-family: "Arial", sans-serif;
}

canvas {
    width: 100%;
    height: 100%;
}

.left-side {
  position: absolute;
  top: 5px;
  left: 0;
}



.jukebox {
  border-radius: 5px;
  padding: 0;
  text-align: center;
}

#music-input {
  display: none;
}

.jukebox .song-choice-btn {
  display: inline-block;
  width: .75em;
  height: .75em;
  margin: 10px;
  padding: .5em;
  border-radius: 100%;
  background: white;
  font-size: 30px;
  line-height: .75em;
  user-select: none;
  transition: background color border;
  transition-duration: .5s;
  vertical-align: middle;
}

.jukebox .song-choice-btn:hover {
  cursor: pointer;
  background: black;
  color: white;
  border: 1px solid white;
}

.jukebox .song-choice-btn svg {
  transition-property: fill;
  transition-duration: .5s;
}

.jukebox .song-choice-btn:hover svg {
  fill: white;
}

.jukebox .audio-name-container {
  display: inline-block;
  width: 20em;
}

.jukebox #audio-name {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  padding: .25em 0;
  border-radius: 5px;
  background: white;
  font-size: 14px;
}

.jukebox #audio-name.error {
  color: red;
}

.infos {
  width: 100%;
  margin-top: 10px;
  color: white;
  text-align: center;
}