:root {
  --fondo: #faf8f4;
  --tinta: #2b2b2b;
  --tenue: #8a8a8a;
  --acento: #c0392b;
  --borde: #e3ded4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #1d1d1f;
    --tinta: #e8e6e1;
    --tenue: #8f8d88;
    --acento: #e07868;
    --borde: #3a3a3c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 40px 20px 60px;
  max-width: 560px;
  font: 18px/1.55 Georgia, "Times New Roman", serif;
  background: var(--fondo);
  color: var(--tinta);
}

a { color: inherit; }
a:hover { color: var(--acento); }

#cabecera { text-align: center; margin-bottom: 3rem; }
#cabecera .marca { display: inline-block; }
#cabecera .logo {
  margin: .2rem 0 0;
  font-size: 2.4rem;
  letter-spacing: -1px;
}
#cabecera .logo a { text-decoration: none; }
#cabecera .lema { margin: .3rem 0 1rem; color: var(--tenue); font-style: italic; }
#cabecera nav a {
  margin: 0 .6rem;
  font-size: .85rem;
  text-transform: lowercase;
  color: var(--tenue);
  text-decoration: none;
}
#cabecera nav a:hover { color: var(--acento); }

.chiste { margin-bottom: 3.2rem; }
.chiste h2 { margin: 0 0 .6rem; font-size: 1.35rem; }
.chiste h2 a { text-decoration: none; }
.chiste .cuerpo img { max-width: 100%; }
.chiste .meta {
  margin-top: .8rem;
  padding-top: .5rem;
  border-top: 1px solid var(--borde);
  font: .78rem/1.6 Helvetica, Arial, sans-serif;
  color: var(--tenue);
}
.chiste .meta .tag { margin-left: .7rem; text-decoration: none; }
.chiste .meta .tag:hover { color: var(--acento); }

.paginacion, .vecinos {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font: .85rem Helvetica, Arial, sans-serif;
  color: var(--tenue);
}
.vecinos a { text-decoration: none; }
.vecinos .der { margin-left: auto; text-align: right; }

.archivo, .archivo ul { list-style: none; padding: 0; }
.archivo .anio h3 { margin: 1.4rem 0 .4rem; color: var(--tenue); }
.archivo li time {
  font: .75rem Helvetica, Arial, sans-serif;
  color: var(--tenue);
  margin-right: .5rem;
}
.archivo a { text-decoration: none; }
.archivo a:hover { color: var(--acento); }

.nube { list-style: none; padding: 0; }
.nube li { display: inline-block; margin: 0 .8rem .5rem 0; }
.nube a { text-decoration: none; }
.nube .n { color: var(--tenue); font-size: .75rem; }

#pie {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  text-align: center;
  font: .75rem Helvetica, Arial, sans-serif;
  color: var(--tenue);
}