:root {
  --main-width: 50%;
  --main-padding: 1rem 0;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-mono: "Source Code Pro", "SF Mono", Menlo, monospace;
}

[data-theme="light"] {
  --font-color: #333; --bg-color: #fff;
  --link-color: #1d60a3; --link-state-color: #a31d1d;
  --thead-bg-color: lightgrey; --tbody-bg-color: transparent;
  --table-border-color: lightgrey;
  --nav-bg-color: #fafafa; --nav-link-color: #696969;
  --pre-bg-color: #f1f1f1; --hr-color: #ccc; --post-info-color: grey;
  --code-border: #ddd;
}
[data-theme="dark"] {
  --font-color: rgba(255, 255, 255, .8); --bg-color: #212121;
  --link-color: #D65A61; --link-state-color: #D65A31;
  --thead-bg-color: #343a40; --tbody-bg-color: transparent;
  --table-border-color: #555;
  --nav-bg-color: #242424; --nav-link-color: #b6b6b6;
  --pre-bg-color: #272822; --hr-color: #333; --post-info-color: grey;
  --code-border: #444;
}
[data-theme="papyrus"] {
  --font-color: #EAC696; --bg-color: #65451F;
  --link-color: #C8AE7D; --link-state-color: #f0d9b5;
  --thead-bg-color: #765827; --tbody-bg-color: rgba(234, 198, 150, .15);
  --table-border-color: rgba(255,255,255,.3);
  --nav-bg-color: #765827; --nav-link-color: #EAC696;
  --pre-bg-color: #4a3216; --hr-color: rgba(234, 198, 150, .3);
  --post-info-color: #cbb287; --code-border: rgba(234,198,150,.3);
}

* { box-sizing: border-box; color: var(--font-color); }

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

a { text-decoration: none; color: var(--link-color); overflow-wrap: break-word; }
a:hover { color: var(--link-state-color); }

h1 { font-weight: 400; }
h2, h3 { font-weight: 500; }
h4, h5, h6, b, strong { font-weight: 500; }

hr { margin: 1.5rem 0; border: none; border-top: 1px solid var(--hr-color); }

/* Navigation -------------------------------------------------------------- */
.nav { width: var(--main-width); margin: 0 auto; padding: 1rem; }
.nav-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
}
.nav-top .left { display: flex; align-items: center; gap: 0.75rem; }
.nav-social a { margin: 0 .5rem; color: var(--font-color); }
.lang-switcher { font-size: 0.9rem; }
.lang-switcher .sep { color: var(--post-info-color); margin: 0 .2rem; }
.lang.active { color: var(--post-info-color); }
.theme-switcher {
  background: transparent; color: var(--font-color);
  border: 1px solid var(--hr-color); border-radius: 4px; padding: .15rem .3rem;
  font-size: 0.85rem;
}
.nav-bottom {
  display: flex; justify-content: center; align-items: center;
  height: 50px; background-color: var(--nav-bg-color);
}
.nav-bottom a { margin: 0 1rem; color: var(--font-color); }

/* Main -------------------------------------------------------------------- */
.content { width: var(--main-width); margin: 0 auto; padding: var(--main-padding); }

/* Post list --------------------------------------------------------------- */
.post-item { width: 100%; margin-bottom: 1.5rem; }
.post-item .title {
  font-size: 1.25rem; font-weight: 400; margin: .5rem 0; color: var(--font-color);
}
.post-item .title:hover { color: var(--link-state-color); }
.post-item .date { font-size: .9rem; font-style: italic; color: var(--font-color); }
.post-item .description { text-align: justify; margin-bottom: .3rem; }
.post-item .tags { display: flex; flex-wrap: wrap; padding: 0; margin: .3rem 0 0; list-style: none; }
.post-item .tags li { font-weight: 300; font-size: .8rem; margin-right: .5rem; }

/* Post -------------------------------------------------------------------- */
.post { text-align: justify; }
.post .heading { margin-bottom: 2rem; }
.post .heading h1 { margin-bottom: 0; text-align: left; }
.post .heading .date { font-size: .9rem; font-style: italic; color: var(--post-info-color); }
.post-content a { color: var(--link-color); }

/* Categories -------------------------------------------------------------- */
.category-index { list-style: none; padding: 0; }
.category-index li { margin: .5rem 0; }
.category-index .count { color: var(--post-info-color); font-size: .85rem; }

/* Content elements -------------------------------------------------------- */
.post-content img, figure img { max-width: 100%; height: auto; }
figure { margin: 1.5rem 0; text-align: center; }
figcaption { color: var(--post-info-color); font-size: .85rem; margin-top: .4rem; }

code { font-family: var(--font-mono); font-size: .9em; }
p code, li code {
  background-color: var(--bg-color); border: 1px solid var(--code-border);
  padding: 1.5px 3px; border-radius: 3px;
}
pre { overflow-x: auto; padding: 1rem; border-radius: 6px; background: var(--pre-bg-color); }
pre code { background: none; border: none; padding: 0; }
/* Pygments wraps code in <div class="highlight"><pre>...; let it own bg+padding. */
.highlight { border-radius: 6px; overflow-x: auto; margin: 1rem 0; }
.highlight pre { background: none; padding: 1rem; margin: 0; border-radius: 6px; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
table thead { background: var(--thead-bg-color); }
table tbody { background: var(--tbody-bg-color); }
th, td { border: 1px solid var(--table-border-color); padding: .4rem .6rem; text-align: left; }

blockquote {
  border-left: 3px solid var(--hr-color); margin: 1rem 0; padding: .3rem 1rem;
  color: var(--post-info-color);
}

/* Pagination -------------------------------------------------------------- */
.pagination { text-align: center; margin: 2rem auto; }
.pagination span, .pagination a { margin: 0 .7rem; }

/* Comments & footer ------------------------------------------------------- */
.comments { width: var(--main-width); margin: 2rem auto; }
.footer {
  text-align: center; padding: 1.5rem 0; margin-top: 1rem;
  color: var(--post-info-color); font-size: .9rem;
}

/* Responsive widths to match the original ---------------------------------- */
@media only screen and (max-width: 600px) {
  :root { --main-width: 100%; --main-padding: 1rem; }
  .nav { padding: 1rem; }
  .nav-social { display: none; }
  .nav-top { flex-direction: column; gap: .5rem; }
}
@media only screen and (min-width: 600px) and (max-width: 992px) {
  :root { --main-width: 80%; }
}