/* Lo que comparten la web, el kit de prensa y las cápsulas: colores, fuentes y el logo (la palabra en
   letra fileteada, marca/chanta-logo.svg, el mismo del menú del juego). */

@font-face {
  font-family: 'Cabin Sketch';
  font-weight: 400;
  font-display: swap;
  src: url('./fuentes/cabin-sketch-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cabin Sketch';
  font-weight: 700;
  font-display: swap;
  src: url('./fuentes/cabin-sketch-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Zilla Slab';
  font-weight: 500;
  font-display: swap;
  src: url('./fuentes/zilla-slab-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Zilla Slab';
  font-weight: 700;
  font-display: swap;
  src: url('./fuentes/zilla-slab-700.woff2') format('woff2');
}

:root {
  --pizarra: #25322b;
  --tiza: #f1ecdd;
  --tiza-amarilla: #ffe08a;
  --madera: #93602f;
  --madera-clara: #b07a42;
  --madera-oscura: #4f2f16;
  --tabla: #2a180c;
  --estraza: #dcc497;
  --papel: #f7ecd4;
  --tinta: #2b1b0f;
  --pintura-roja: #b3362b;
  --pintura-verde: #3f7b3b;
  --tiza-fuente: 'Cabin Sketch', 'Chalkboard SE', 'Comic Sans MS', cursive;
  --letra: 'Zilla Slab', Rockwell, Georgia, serif;
}

/* El logo: la palabra en letra fileteada (marketing/logo; lo copia `node marketing/scripts/logo.mjs`). El
   ancho lo pone cada página. */
.logo {
  margin: 0;
  line-height: 0;
}
.logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 16px rgb(0 0 0 / 0.55));
}