/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* Reset básico */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* Fondo con imagen */
body {
  background: url("fondo-meme.png") center / cover no-repeat fixed;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
  color: #111;
}

/* Oscurece ligeramente el fondo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
}

/* Contenedor principal del blog */
.content {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px;

  background: rgba(255, 255, 255, 0.88);
  border-radius: 14px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Título con protagonismo */
h1 {
  margin-top: 0;
  font-size: 2.2em;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

/* Links */
a {
  color: #1a4ed8;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

/* Imágenes */
img {
  max-width: 100%;
  display: block;
  margin: 20px 0;
}

/* Blog list */
.post-list {
  list-style: none;
  padding-left: 0;
}

.post-list li {
  margin-bottom: 12px;
}

.post-list a {
  font-size: 1.1em;
}

/* Fechas */
.date {
  display: block;
  font-size: 0.85em;
  color: #666;
}

/* Lore del gato */
.lore {
  margin-top: 30px;
  padding-left: 15px;
  border-left: 4px solid #999;
  font-style: italic;
  color: #444;
}

/* Subtítulo */
.subtitle {
  font-style: italic;
  color: #555;
}

.lang-switch {
  position: fixed;
  top: 16px;
  right: 20px;
  font-size: 14px;
  font-family: monospace;
}

.lang-switch a {
  text-decoration: none;
  color: inherit;
}

.lang-switch a:hover {
  text-decoration: underline;
}

.lang-switch span {
  opacity: 0.6;
}

<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>