html { color-scheme: light dark; }
body { width: 900px; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; }
h1 { text-align: center; }
.centerimg { margin-left: auto; margin-right: auto; display: block; }
.skunkin { width: 50%; }
#logo { position: absolute; top: 5px; left: 5px; width: calc(50% - 900px); }
figcaption { margin-top: 1em; text-align: center; }
audio { width: 100%; }
now-playing { outline: 1px solid; display: inline-block; padding: 5px; padding-bottom: unset; width: 95%; }
now-playing > div > strong { padding-left: 1em; }
#coverart { float: left; width: 20% }
np-metadata { display: flex; flex-direction: column; height: 10em; padding-left: 1em; margin-top: 1em; }
np-entry { flex: auto; }

@media (prefers-color-scheme: dark) {
  #logo { filter: invert(100%); }
}