/* -----------------------------------
Variables
-------------------------------------- */

:root {
  --font-serif: ff-tisa-web-pro, -apple-system-ui-serif, ui-serif, Georgia,
    serif;
  --font-sans: proxima-nova, -apple-system, ui-sans-serif, Helvetica, Arial,
    sans-serif;
  --font-mono: -apple-system-ui-monospace, -ui-monospace, SFMono-Regular, Menlo,
    Consolas, Inconsolatas, monospace;

  --font-default: 18px;
  --font-s: 0.85rem;
  --font-m: 1rem;
  --font-l: 1.5rem;
  --font-xl: 1.85rem;

  --font-line-height: calc(var(--font-default) * 1.6);
  --font-letter-spacing: -0.02rem;

  --spacing-xs: calc(var(--font-line-height) * 0.25);
  --spacing-s: calc(var(--font-line-height) * 0.5);
  --spacing-m: calc(var(--font-line-height) * 1);
  --spacing-l: calc(var(--font-line-height) * 3);
  --spacing-xl: calc(5rem + 10vh);

  --spacing-maxwidth: 38rem;

  --border-radius: 0.25rem;

  --rgb-accent: 30, 159, 211;
  --rgb-defaut: 19, 19, 20;

  --color-bg: #fefeff;
  --color-code-bg: #f8f8f8;

  --color-default: #131314;
  --color-mid: #4e4f53;
  --color-dim: #7f8088;
  --color-link: #269FD3;
  --color-accent: #269FD3;
  --color-link-underline: rgba(var(--rgb-accent), 0.7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --rgb-defaut: 254, 254, 255;

    --color-bg: #0b0012;

    --color-default: rgba(var(--rgb-defaut), 1);
    --color-mid: rgba(var(--rgb-defaut), 0.5);
    --color-dim: rgba(var(--rgb-defaut), 0.3);
    --color-link: rgba(var(--rgb-accent), 1);
  }
}

/* -----------------------------------
Layout
-------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  font-size: var(--font-default);
  line-height: var(--font-line-height);
  font-family: var(--font-sans);
}

body {
  background-color: var(--color-bg);
  color: var(--color-default);
  padding: var(--spacing-m);
  max-width: var(--spacing-maxwidth);
  margin: 0 auto;
}

main p,
main blockquote,
main ol,
main ul,
main h2,
main h3 {
  max-width: var(--spacing-maxwidth);
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------
Header / Footer
-------------------------------------- */

body > header,
body > footer {
  text-align: center;
}

body > header a,
body > footer a,
body > footer p,
.pagination > a {
  font-family: var(--font-sans);
  font-size: var(--font-s);
  color: var(--color-mid);
  background: none;
  margin: 0;
  text-decoration: none;
}
body > header a:not(:last-of-type),
body > footer a:not(:last-of-type) {
  margin-right: var(--spacing-s);
}

body > header > nav > a.active {
  color: var(--color-link);
}

footer {
  margin-top: var(--spacing-l);
}

footer > p > a {
  border: none;
  font-weight: bold;
}

footer .cc {
  font-size: 0.8em;
}

/* -----------------------------------
Headings
-------------------------------------- */

h1 {
  font-size: var(--font-xl);
  font-family: var(--font-serif);
  margin: 0 auto var(--spacing-s);
  line-height: 1.25;
  letter-spacing: var(--font-letter-spacing);
}

h2 {
  font-size: var(--font-l);
  font-family: var(--font-serif);
  margin-top: var(--spacing-l);
  letter-spacing: var(--font-letter-spacing);
}

h3,
h4,
h5,
h6 {
  font-size: var(--font-m);
  font-weight: bold;
  font-family: var(--font-sans);
  margin-top: var(--spacing-s);
}

ul,
ol {
  padding-left: var(--spacing-m);
}

/*
 main > ul,
article > ul,
main > ol,
article > ol {
  padding-left: 0;
} */

time, time > a {
  font-family: var(--font-sans);
  font-size: var(--font-s);
  color: var(--color-mid);
}

blockquote {
  font-style: italic;
  padding-left: var(--spacing-s);
  border-left: 2px solid var(--color-accent);
}

blockquote em {
  font-style: normal;
}

blockquote + p.small {
  padding-left: var(--spacing-m);
  font-size: var(--font-s);
  color: var(--color-mid);
  margin-top: -(var(--spacing-xs));
}

small {
  font-family: var(--font-sans);
  font-size: var(--font-s);
  color: var(--color-mid);
}

.serif {
  font-family: var(--font-sans);
}

figcaption {
  font-family: var(--font-sans);
  font-size: var(--font-s);
  color: var(--color-mid);
  text-align: center;
}

figcaption a {
  color: var(--color-mid);
  border-color: var(--color-mid) !important;
}

a {
  color: var(--color-default);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-link);
}

a.external {
  color: var(--color-link);
}

p {
  hanging-punctuation: first;
}

p a,
li a,
figcaption a {
  border-bottom: 1px solid var(--color-link-underline);
}

hr {
  max-width: 10rem;
  border: none;
  border-top: 1px solid var(--color-mid);
  opacity: 0.5;
  margin: var(--spacing-m) auto;
}

dt {
  font-family: var(--font-serif);
  font-weight: bold;
}

dd {
  margin-left: var(--spacing-m);
  color: var(--color-mid);
}

pre {
  font-family: var(--font-mono);
  overflow: scroll;
  font-size: 16px;
}

pre.highlight {
  padding: var(--spacing-s);
  margin: var(--spacing-m) auto;
}

div .highlight {
  color: black;
  border-radius: var(--border-radius);
}

code {
  font-family: var(--font-mono);
  font-feature-settings: "liga" 0;
}

p code,
var,
kbd {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 80%;
  background: var(--color-code-bg);
  color: black;
  border-radius: var(--border-radius);
  padding: 0.1em 0.25em;
}

mark {
  background: rgba(var(--rgb-accent), 0.3);
  color: inherit;
  border-radius: var(--border-radius);
  padding: 0.197em 0.25em;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: none;
  cursor: help;
  border-bottom: 1px dotted var(--color-mid);
}

address {
  font-style: normal;
}

main > header {
  text-align: center;
  padding: var(--spacing-m) 0;
}

main > header h1,
article > header h1 {
  /* max-width: 18em; */
  margin-bottom: 0;
}

main > header img.avatar {
  max-width: 8rem;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

label {
  margin-right: var(--spacing-xs);
  font-weight: bold;
  color: var(--color-mid);
  font-size: var(--font-s);
}

/* -----------------------------------
Pagination
-------------------------------------- */

.pagination {
  margin-bottom: var(--spacing-l);
  display: flex;
}

.pagination > a {
  color: var(--color-mid);
  font-weight: bold;
}

.pagination #newer {
  margin-left: auto;
}

/* -----------------------------------
Articles
-------------------------------------- */

article {
  margin-bottom: var(--spacing-l);
}

article > header {
  padding: 0;
}

article > header h1 {
  font-size: var(--font-l);
  margin: 0 0 var(--spacing-xs);
  line-height: 1.25;
}

.read-more a {
  color: var(--color-link);
  font-weight: bold;
}

p.tags,
p.tags a {
  border-bottom: none;
  color: var(--color-mid);
  font-size: var(--font-s);
}

p.tags a:hover {
  color: var(--color-link);
}

/* -----------------------------------
Media
-------------------------------------- */

img {
  margin: var(--spacing-s) 0;
  width: 100%;
  height: auto;
}

audio {
  width: 100%;
  display: block;
  max-width: var(--spacing-max-width);
  margin: var(--spacing-s) auto;
}

video {
  width: 100%;
  height: auto !important;
  margin-top: var(--spacing-l);
  margin-bottom: var(--spacing-l);
  margin-left: auto;
  margin-right: auto;
}

.video-wrapper {
  margin: var(--spacing-s) auto;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  border: none;
}

/* -----------------------------------
Tables
-------------------------------------- */

table {
  border-collapse: collapse;
  margin: var(--spacing-m) 0;
}

th {
  background-color: var(--color-link);
  color: white;
}

th,
td {
  padding: 0.5em;
  text-align: left;
  border-bottom: 1px solid var(--color-dim);
}

caption {
  font-weight: bold;
}

/* -----------------------------------
Archive
-------------------------------------- */

section.archive {
  margin-bottom: var(--spacing-xl);
}

/* -----------------------------------
Date List
-------------------------------------- */

section.date-list {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

section.date-list ul {
  list-style: none;
  padding: 0;
}

section.date-list li {
  display: flex;
  align-items: baseline;
  margin-bottom: calc(0.25 * var(--spacing-s));
}

section.date-list li time {
  order: 1;
  width: 5em;
  font-variant-numeric: tabular-nums;
}

section.date-list li a {
  display: inline-block;
  order: 2;
  width: calc(100% - 7em);
  border: none;
  font-family: var(--font-sans);
}

section.date-list h2:first-child {
  margin-top: 0;
}

/* -----------------------------------
Pinboard
-------------------------------------- */

.pin-title {
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  color: var(--color-link);
  border-bottom: none;
}

.pin-description {
  font-size: var(--font-s);
  color: var(--color-mid);
}

.pin-tag {
  color: var(--color-dim);
  text-decoration: none;
  font-size: var(--font-s);
  border-bottom: none;
}

.pin-tag::before {
  content: "#";
}

/* -----------------------------------
Goodreads
-------------------------------------- */

.gr_grid_container {
  /* customize grid container div here. eg: width: 500px; */
}

.gr_grid_book_container {
  display: inline-block;
  width: 98px;
  height: 160px;
  margin: 0px 1rem 0px 0px;
  overflow: hidden;
}