body {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.2;
  padding: 1.3em 1em 0 1em;
  background-color: hsl(275, 100%, 22%);
  color: lightgray;
}

a:link, a:visited {
  color: white;
}

.banner a:link, .banner a:visited {
  color: unset;
}

hr {
  margin-top: 2em;
}

hr.close {
  margin-top: unset;
}

.h1 {
  font-size: 32px;
  font-weight: bold;
  color: white;
}

.h2 {
  font-size: 23px;
  letter-spacing: 2.2px;
  color: white;
}

.h3 {
  font-size: 14px;
  margin-bottom: 28px;
}

#playing {
  font-size: 16px;
}

#playing span {
  color: white;
}

#artwork {
  position: relative;
}

.portrait {
  width: 64px;
  float: left;
  margin-right: 1em;
}

.quote {
  margin-top: 2em;
}

iframe {
  width: 100%;    /* large screen: 66% */
  /* float: left; */
  /* margin-right: 1em; */
}

.highlight {
  color: white;
}

.error {
  color: red;
}

.default {
  color: lightgray;
  background-color: hsl(205, 60%, 40%);
}

/* Spinner */

#spinner {
  position: absolute;
  display: none;
  top: 130px;
  left: 130px;
  width: 40px;
  height: 40px;
  background-image: url(spinner.svg);
  animation: rotate 0.75s linear infinite;
}

@keyframes rotate {
  from {transform: rotate(0deg);}
  to   {transform: rotate(360deg);}
}

/* Banner */

.banner {
  position: absolute;
  top: 40px;
  right: 20px;
  line-height: 1.5;
  background-color: hsl(58, 100%, 50%);
  color: black;
  padding: 10px 16px;
  transform: rotate(20deg);
  opacity: 0.92;
}

.banner b {
  font-size: 16px;
}