/* 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-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;
}

/* Frame the itch.io widget like the screenshot box */
.store-links iframe {
  box-sizing: content-box;
  max-width: calc(100% - 6px);
  border-radius: 0;
  border: 3px solid #cc9900;
}

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

@media (prefers-color-scheme: dark) {
  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;
}