:root { color-scheme: light; }
body {
  background: #ccc7ed;
  color: #241330;
  max-width: 760px;
  margin: 24px auto;
  padding: 0 12px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 16px;
}
header, nav, footer { text-align: center; }
h1 { color: #663399; }
a { color: #0000ee; }
a:visited { color: #551a8b; }
section { margin: 28px 0; }
.photo {
  border: 1px solid #777;
  width: 240px;
  max-width: 100%;
  padding: 55px 0;
  text-align: center;
  background: #eee;
}
.filters button[aria-pressed="true"] { font-weight: bold; }
.post { margin: 24px 0; }
.post-meta, .demo { font-size: 13px; }
.post h3 { margin: 8px 0; }
.post .body { white-space: pre-wrap; overflow-wrap: anywhere; }
footer { margin-top: 24px; }

.fursuit-photo { max-width: 100%; height: auto; border: 1px solid #777; }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  body { background: #201329; color: #eee0f8; }
  h1 { color: #d4a3ff; }
  a { color: #c5a5ff; }
  a:visited { color: #efa9dc; }
  hr { border: 0; border-top: 1px solid #745587; }
  .photo { background: #30203c; border-color: #745587; }
  .fursuit-photo { border-color: #745587; }
}

button { font-family: inherit; }
pre { font-family: monospace; }

#music { overflow-wrap: anywhere; }
#music details { margin-top: 16px; }
#music select { font: inherit; }

.wall-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.wall-trap { position: absolute; left: -10000px; }
#post textarea { width: 100%; max-width: 36em; box-sizing: border-box; }
#post input, #post textarea { font: inherit; max-width: 100%; }
.wall-button { display: inline-block; border: 1px solid currentColor; padding: 5px 9px; }

#site-player audio, #site-player select { max-width: 100%; }
#site-player select { font: inherit; }

.now-playing {
  width: 300px;
  max-width: 100%;
  margin: 8px auto;
  overflow: hidden;
  border: 1px solid currentColor;
  font: 10px/1.8 monospace;
  text-align: left;
}
.now-playing span {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: now-playing-scroll 22s linear infinite;
}
.now-playing:hover span { animation-play-state: paused; }
@keyframes now-playing-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .now-playing span { animation: none; padding: 0 4px; white-space: normal; overflow-wrap: anywhere; }
}