/**************** FONTS ****************/

/* material-icons-sharp-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Material Icons Sharp';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material-icons-sharp-v110-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* press-start-2p-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/press-start-2p-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/**************** COLORS ****************/

/* Tema base segons sistema */
:root {
  color-scheme: light dark;
  /* Tema clar */
  --bg: light-dark(#c3f9c3, #162416);
  --fg: light-dark(#2a2e28, #f8fff4);
  --dark-panel-bg: #1b1e1a;
  --dark-panel-fg: #fffdfa;
  --golden: #ffce00;
  --border: light-dark(#00703c, #138808);
  --heading: #009149;
  --link: light-dark(#257200, #45d300);
  --dl-btn-bg: var(--link);
  --dl-btn-fg: black;
}

:root.light {
  /* forces light color-scheme */
  color-scheme: light;
}

:root.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}

/**************** GENERAL ****************/

body {
  background: var(--bg);
  color: var(--fg);
  font-family: Verdana, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header {
  background: var(--dark-panel-bg);
  color: var(--dark-panel-fg);
  border-bottom: 4px solid var(--golden);
  padding: 1.5rem;
  text-align: center;
}

main {
  margin: auto;
  padding: 1.5rem;
  max-width: 900px;
}

footer {
  background: var(--dark-panel-bg);
  color: var(--dark-panel-fg);
  font-size: 0.8rem;
  padding: 1rem;
  text-align: center;
}

/**************** HEADER ****************/

h1 {
  color: var(--golden);
  font-family: 'Press Start 2P', cursive;
  font-size: 1.5rem;
}

.subtitle {
  margin-top: 1rem;
}

/* Botó del tema */
#theme-toggle {
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--border);
  cursor: pointer;
  font-family: 'Material Icons Sharp';
  font-size: xx-large;
  padding: .5rem 1rem;
}

#theme-toggle:hover {
  background: var(--border);
}

/**************** MAIN ****************/

h2 {
  border-bottom: 2px solid var(--heading);
  color: var(--heading);
  padding-bottom: 0.3rem;
}

a {
  border-bottom: 2px dotted var(--link);
  color: var(--link);
  text-decoration: none;
}

a:focus {
  outline: 2px solid var(--golden);
  outline-offset: 2px;
}

a:hover {
  border-color: var(--golden);
}

a::after {
  content: " ↗";
  font-size: 0.8em;
}

ul {
  list-style: square;
  padding-left: 1.5rem;
}

#download {
  color-scheme: dark;
  background: var(--dark-panel-bg);
  color: var(--dark-panel-fg);
  margin-top: 2rem;
  padding: 2rem 1rem;
  text-align: center;
}

#dl-btn {
  background: var(--dl-btn-bg);
  color: var(--dl-btn-fg);
  border: 3px solid var(--dl-btn-fg);
  display: inline-block;
  font-weight: bold;
  padding: 1rem 2rem;
  text-decoration: none;
}

#dl-btn:hover {
  border-color: var(--golden);
}

.note {
  font-size: smaller;
}

.screenshots {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.screenshots img {
  border: 3px solid var(--border);
  image-rendering: pixelated;
  width: 100%;
}