/* 30 Second Life theme: black and gold, chunky arcade pixels */

@font-face {
  font-family: "30 Second Life";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(/games/30SecondLife.woff2) format("woff2"),
       url(/games/30SecondLife.ttf) format("truetype");
}

html, html[data-theme="light"], html[data-theme="dark"] {
  --accent-color: #000;
  --alt-accent-color: #1a1a1a;
  --game-dark: #000;
  --game-highlight: #cc9900;
  --game-showcase: #000;
  --game-button-bg: #f5c400;
  --game-button-fg: #000;
  --game-title-font: "30 Second Life", "Roboto Mono", monospace;
}

.page-header {
  border-bottom: 4px solid #cc9900;
}

/* Prose in Verdana, which was designed pixel-first for low-res screens. It runs
 * large, so it's a bit smaller than the site's usual 18px. */
article {
  font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Tahoma, Geneva, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* The pixel font is drawn on an 8px grid (1/8 em), so it stays crisp at
 * sizes that are multiples of 8px. Only titles and UI use it, not prose. */
article h1.title, article h2 {
  font-family: "30 Second Life", "Roboto Mono", monospace;
  font-weight: normal;
  -webkit-font-smoothing: none;
}

article h1.title {
  font-size: 40px;
  line-height: 1.2;
}

/* The font only has a straight apostrophe, so the markdown escapes it (\') to
 * keep pandoc from curling it */
article .subtitle {
  font-family: "30 Second Life", "Roboto Mono", monospace;
  font-style: normal;
  font-size: 24px;
  -webkit-font-smoothing: none;
}

article h2 {
  font-size: 24px;
  border-left-color: #cc9900;
}

/* The icon is already a circle on black, so show it square like a cartridge */
article .featured-image-wrapper {
  border-radius: 0;
  border: 3px solid #cc9900;
  box-shadow: 4px 4px 0 #000;
}

/* Hard-edged arcade buttons with an offset drop shadow */
.store-links a, .store-links a:visited {
  border-radius: 0;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-family: "30 Second Life", "Roboto Mono", monospace;
  font-weight: normal;
  font-size: 24px;
  -webkit-font-smoothing: none;
}

/* The small caption is too small for the pixel font, so keep it readable */
.store-links a[data-platform]::before {
  font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Tahoma, Geneva, sans-serif;
  font-size: 13px;
  margin-bottom: 4px;
}

.store-links a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

.store-links a:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

html[data-theme="dark"] .store-links a,
html[data-theme="dark"] article .featured-image-wrapper {
  border-color: #f5c400;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .store-links a,
  html:not([data-theme="light"]) article .featured-image-wrapper {
    border-color: #f5c400;
  }
}

.screenshots {
  border-radius: 0;
  border: 3px solid #cc9900;
}

.screenshots p {
  gap: 20px;
}

/* The screenshots are black-on-black, so frame each one like a little screen */
.screenshots img {
  border: 2px solid #555;
}

@media screen and (max-width: 700px) {
  article h1.title {
    font-size: 32px;
  }
}

.features li::before {
  content: "▶";
  font-size: 80%;
  top: .15em;
}