@import url('https://fonts.cdnfonts.com/css/sf-mono');
@font-face {
  font-family: 'Exposure';
  src: url('assets/fonts/Exposure - Exposure VAR-205TF.ttf') format('truetype');
  font-weight: 100 900;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: #888; color: #fff; }
body {
  font: .8em/2.2 'SF Mono', monospace;
  padding: 15vh max(8vw, calc(50vw - 450px));
  background: #fff;
  color: #000;
}
.tip { cursor: pointer; }
.tip > span {
  display: none;
  color: #888;
  white-space: pre-wrap;
  font-size: .9em;
}
.tip:hover > span, .tip.open > span { display: block; }
.tip > span a { color: #000; }
@media (prefers-color-scheme: dark) { .tip > span a { color: #fff; } }
@media (prefers-color-scheme: dark) { .tip > span { color: #666; } }
h1 {
  font: 2.5em 'Exposure', sans-serif;
  font-variation-settings: 'EXPO' -20;
  letter-spacing: -.05em;
  margin-bottom: .5em;
}
a { color: inherit; text-decoration: underline; text-decoration-style: solid; }
.header-row + p a, .intro p > a, a[href^="mailto:"], a[href*="x.com/marvinvonhagen"], a[href*="poke.com"] { text-decoration: none; }
@media (hover:hover) { a:hover { font-weight: bold; } }
footer { margin-top: 4em; color: #888; border-top: 1px solid #ddd; padding-top: 1em; }
ul { list-style: none; }
li { margin: .3em 0; }
.sub { margin-left: 1.5em; }
.tag { color: #888; font-style: italic; }
.tag-black { color: #000; font-style: italic; }
.mobile { display: none; }
@media (max-width: 900px) { .desktop { display: none; } .mobile { display: inline; } }
.header-row + p { margin-bottom: 1em; }
.block { margin-bottom: 1em; }
.trigger { cursor: pointer; text-decoration: underline; text-decoration-style: solid; }
@media (hover:hover) { .trigger:hover { font-weight: bold; } }
.popup {
  display: none;
  color: #888;
  font-size: .9em;
  margin-top: .5em;
  padding-bottom: 2.2em;
  overflow: hidden;
}
.popup span.l {
  display: block;
  padding-left: 3ch;
  text-indent: -3ch;
}
.popup span.l2 {
  padding-left: 6ch;
  text-indent: -6ch;
}
.popup.open, .popup.closing {
  display: block;
}
.popup a { color: #000; text-decoration: none; }
.hide { color: #fff; }
.popup a .underline { text-decoration: underline; text-decoration-style: solid; }
@media (hover:hover) { .popup a:has(.underline):hover { font-weight: bold; } }
#vegas, #companies { color: #000; }
@media (prefers-color-scheme: dark) { #vegas, #companies { color: #fff; } }
@media (prefers-color-scheme: dark) {
  body { background: #000; color: #fff; }
  footer { color: #666; border-color: #333; }
  .tag { color: #666; }
  .tag-black { color: #fff; }
  .popup { color: #666; }
  .popup a { color: #fff; }
  .hide { color: #000; }
}
/* Manual dark mode */
body.dark { background: #000; color: #fff; }
body.dark footer { color: #666; border-color: #333; }
body.dark .tag { color: #666; }
body.dark .tag-black { color: #fff; }
body.dark .popup { color: #666; }
body.dark .popup a { color: #fff; }
body.dark .hide { color: #000; }
body.dark #vegas, body.dark #companies { color: #fff; }
/* Manual light mode */
body.light { background: #fff; color: #000; }
body.light footer { color: #888; border-color: #ddd; }
body.light .tag { color: #888; }
body.light .tag-black { color: #000; }
body.light .popup { color: #888; }
body.light .popup a { color: #000; }
body.light .hide { color: #fff; }
body.light #vegas, body.light #companies { color: #000; }
/* Header row */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
@media (hover:hover) { #theme-toggle:hover #theme-icon { background: #888; } }
#theme-icon {
  width: 1rem;
  height: 1rem;
  display: block;
  border-radius: 50%;
  background: #000;
}
@media (prefers-color-scheme: dark) {
  #theme-icon { background: #fff; }
}
body.dark #theme-icon { background: #fff; }
body.light #theme-icon { background: #000; }
.play-icon {
  height: 1em;
  vertical-align: middle;
  margin-bottom: 0.1em;
}
@media (prefers-color-scheme: dark) {
  .play-icon { filter: invert(1); }
}
body.dark .play-icon { filter: invert(1); }
body.light .play-icon { filter: invert(0); }