body {
  margin: 0;
  padding: 0;
  font-family: "roboto mono", monospace, sans-serif;
  background: #111;
  color: #fff;
  /* display: block; */
}

button {
  background: #333;
  border: 1px solid 10px #fff;
  color: #fff;
}

button:hover {
  color: #444;
  border-color: #444;
  cursor: pointer;
}

button:focus {
  outline: none;
}

#svgContainer {
  background: #000;
  /* padding: 20px; */
  /* background: linear-gradient(45deg, blue, yellow, red, purple); */
  /* transition: 500ms ease-in-out; */
  /* width: 100vw;
  height: 100vh; */
  /* display: none; */
  max-width: 1920px;
  max-height: 1080px;
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#svgContainer circle {
  /* transition: 500ms ease-in-out; */
}

svg circle:hover, #svgContainer rect:hover {
  /* fill: #444; */
  /* transform: scale(0.9); */
  cursor: pointer;
}

/* #svgContainer circle:hover::after {
  content: "id";
  color: #fff;
  background: #000;
} */
svg text.tooltip {
  font-size: 10px;
  display: none;
  margin-left: -60px;
}

#svgContainer text.tooltip.hover {
  display: block;
}

#svgContainer text::after {}

h1 {
  /* text-shadow: 2px 2px 1px #000; */
  /* background-image: linear-gradient(90deg, blue, yellow, red, purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 300px; */
  /* display: block;
  float: left;
  clear: right; */
}

svg rect {
  /* fill: url(#grad1); */
}

#spotifyFrame {
  width: 300px;
  height: 80px;
  position: absolute;
  bottom: 10px;
  left: calc(50% - 150px);
  border-radius: 5px;
  overflow: hidden;
  line-height: 0;
}

#spotifyFrame::after {
  content: "x";
  position: absolute;
  top: 5px;
  right: 1px;
  cursor: pointer;
  background: #000;
  opacity: 0.8;
  display: none;
}