/* ==========================================================================
   screen implosion — hoja de estilos única
   Transcrita del CSS que styled-components generaba en el build de Gatsby
   (src/theme/global-style.js + src/components/styled/styledLayout.js).
   Los nombres de clase sustituyen a los hashes del tipo .erEGmo; las
   declaraciones son las mismas, por lo que el resultado visual es idéntico.
   ========================================================================== */

/* --- reset (styled-reset) ------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, main, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header,
hgroup, main, menu, nav, section { display: block; }

*[hidden] { display: none; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

*, *:before, *:after { box-sizing: border-box; }

/* --- tipografías ---------------------------------------------------------
   Todo el sitio en Helvetica Neue. Se declara una sola familia,
   'HelveticaNeue', con los tres cortes que hay en fonts/ mapeados a peso,
   de modo que los `font-weight` que ya usaba el diseño eligen el corte:
   100/200 -> Thin, 400 -> Roman, 500/700 -> Medium.
   La pila de reserva usa la Helvetica Neue del sistema, que en macOS
   existe, antes de caer en Helvetica o Arial.                             */
@font-face {
  font-family: 'HelveticaNeue';
  src: url('../fonts/HelveticaNeue-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeue';
  src: url('../fonts/HelveticaNeue-Thin.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeue';
  src: url('../fonts/HelveticaNeue-Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeue';
  src: url('../fonts/HelveticaNeue-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeue';
  src: url('../fonts/HelveticaNeue-Medium.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- estilos globales ---------------------------------------------------- */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: var(--font);
  /* el original traía `color: '#1a202c'` entre comillas, que es CSS
     inválido y el navegador descartaba; se omite para no cambiar nada */
}

body {
  font-family: var(--font);
  line-height: 1.5;
  letter-spacing: 0;
  background-color: black;
  justify-content: space-around;
  display: flex;
  flex-flow: column wrap;
}

h1 { font-family: var(--font); font-weight: 500; }
h2 { font-family: var(--font); font-weight: 500; }
h3 { font-family: var(--font); font-weight: 500; }

p {
  font-family: var(--font);
  font-size: 0.8em;
  font-variant: slashed-zero;
  font-stretch: normal;
  font-weight: 100;
  font-kerning: normal;
  padding: 1em 0;
}

/* --- estructura (styledLayout.js) ---------------------------------------- */

/* Body */
.body-wrap {
  /* `width: 100%` no estaba en el original y hace falta aqui: en Gatsby
     este div colgaba de dos divs normales (#___gatsby y
     #gatsby-focus-wrapper) y por tanto se estiraba al ancho disponible.
     Al colgar ahora directamente de `body`, que es flex, el `margin: 0
     auto` anularia el stretch y la caja se encogeria al ancho de su
     contenido: la home se veria mas estrecha que el resto y la nav
     juntaria los enlaces. Con esto la geometria es la de antes. */
  width: 100%;
  margin: 0 auto;
  max-width: 900px;
  padding: 2rem 1.0875rem 1.45rem;
}

/* LogoWrapper */
.logo {
  padding: 0;
  margin: 0 0 0 -20px;
}

/* HeaderWrapper */
.nav {
  list-style-type: none;
  padding: 1em 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

@media (max-width: 425px) {
  .nav {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

.nav a {
  color: darkgrey;
  text-decoration: none;
  font-family: var(--font);
  font-size: 0.8em;
  /* el original iba en 100 (Thin); 400 es el corte Roman, un punto mas de
     cuerpo sin llegar al Medium de los titulos */
  font-weight: 400;
  padding: 0 0.4em;
}

.nav a:hover { color: lightgrey; }
.nav a.selected { color: white; }

/* ThreeColumns — en el original `flexflow` y `flex: 1 1 1` eran inválidos
   y el navegador los descartaba, así que sólo quedaban estas dos reglas */
.three-columns {
  display: flex;
  color: white;
}

@media (max-width: 425px) {
  .three-columns {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

/* CentroStyle */
.centro {
  text-align: center;
  overflow: visible;
  flex: 1 1 60%;
  padding: 0.5em 0.5em;
}

/* Esta regla es la que manda sobre el ancho de todas las imágenes de la
   columna central: es más específica que .pic o .img, igual que antes */
.centro img { width: 100%; }

/* SideMenuStyle */
.side-menu {
  color: #dedede;
  flex: 1 1 20%;
  padding: 0.5em 0.5em;
}

/* FooterStyle — el color y el padding venían de un style inline */
.footer {
  max-width: 300px;
  color: white;
  padding: 10px 10px;
}

/* --- piezas de contenido ------------------------------------------------- */

/* Grid */
.grid { column-count: 2; }

/* ImageStyle */
.img { max-width: 100%; }

/* Pic */
.pic { width: 49%; padding: 0 6px; }

/* GridWithPics — llevaba grid-template-* sin `display: grid`, así que no
   tenía ningún efecto; se deja como contenedor sin estilo, como estaba */
.grid-with-pics { }

/* GamesList */
.games-list {
  display: grid;
  /* la columna central centra todo su contenido; la lista entera de
     /output/ se lee alineada a la izquierda: encabezado, entradas,
     separadores y las lineas de contacto */
  text-align: left;
}

/* encabezado de la lista de /output/: el texto iba suelto dentro del grid,
   ahora va envuelto para poder separarlo de la primera entrada */
.list-heading { padding-bottom: 1em; }

/* SimpleLink */
.simple-link {
  display: block;
  color: white;
  text-decoration: none;
  font-family: var(--font);
  font-weight: 100;
  padding: 0 0.4em;
}

.simple-link:hover { color: yellow; }

/* el enlace suelto dentro de una frase (el "screenimplosion" del pie de
   /output/) va en linea, no como bloque: asi la direccion se lee seguida */
.simple-link.inline { display: inline; padding: 0; }

/* GameTitle */
.game-title {
  color: yellow;
  text-decoration: none;
  font-weight: 200;
  padding: 0 0.4em;
  font-style: italic;
  font-family: var(--font);
}

.game-title:hover { color: yellow; }

/* DownloadButton */
.download-button {
  padding: 12px 24px;
  margin: 20px 24px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  background-color: grey;
  text-decoration: none;
  border: 0px;
  border-radius: 3px;
  appearance: none;
  cursor: pointer;
}

/* LinkBox */
.link-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* --- reproductor de vídeo -----------------------------------------------
   react-player renderizaba un contenedor de 100% x 360px con el iframe de
   Vimeo dentro; se reproduce con esas mismas medidas                      */
.player-wrapper {
  width: 100%;
  height: 360px;
}

.player-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}