html {
  font-family: "Inter", sans-serif;
}
body {
  margin: 0;
  display: flex;
  background: black;
}

#toolbar {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

#title {
  background: yellow;
}

#title p {
  margin: -3px 0px;
  font-size: 20px;
}

#title p a {
  color: black;
  text-decoration: none;
}

#title p a:hover {
  background-color: blue;
}

#title p:nth-child(2) {
  margin-top: -6px;
  color: #4a4a4a;
}

#title p:nth-child(2) a {
  color: #4a4a4a;
}

#mute-toggle {
  background: yellow;
  border: none;
}

#mute-toggle:hover {
  background-color: blue;
}

#hyperimage {
  position: absolute;
  background-color: hsl(0deg 0% 0% / 10%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent;
}

#hyperimage:hover,
#hyperimage:focus-visible {
  background-color: hsl(0deg 0% 0% / 70%);
}

@keyframes flash-blue {
  0% {
    border-color: lightskyblue;
  }

  100% {
    border-color: none;
  }
}

#hyperimage.highlight-clickable {
  animation: flash-blue 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}