@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ibm-plex-mono.woff2") format("woff2");
}

* { box-sizing: border-box; }

:root {
  --font: "IBM Plex Mono", ui-monospace, monospace;
  --background-color: #fefefe;
  --main-text-color: #333;
  --dim-text-color: #888;
  --dimmer-text-color: #bababa;
  --dimmest-text-color: #ddd;
  --link-color: #000;
  --theme: #d57100;
  --code-background: color-mix(in srgb, var(--theme), transparent 90%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222;
    --main-text-color: #ccc;
    --dim-text-color: #666;
    --dimmer-text-color: #444;
    --dimmest-text-color: #333;
    --link-color: #fff;
  }
}

html { color-scheme: light dark; }

body {
  font: 18px/1.6 var(--font);
  color: var(--main-text-color);
  margin: 5vw;
  background: var(--background-color);
}

main, .c { max-width: 80ch; }

/* Links */
a, a:visited { color: var(--link-color); }
a:hover { color: var(--theme); }
p a[href^="http"]::after {
  content: "✈︎";
  vertical-align: super;
  text-decoration: none;
  display: inline-block;
}

a.logo {
  transition: border-color 0.3s;
  border: 2px solid var(--main-text-color);
  border-radius: 0.35rem;
  padding: 0.25rem;
  text-decoration: none;
  display: inline-block;
}
a.logo:hover { border-color: var(--theme); }

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

blockquote {
  border-left: 2px solid;
  padding: 0.5rem 1rem;
  margin: 2rem 0;
}

code { color: var(--theme); }

pre {
  background: var(--code-background);
  border-radius: 0.3rem;
  margin: 0.5rem 0;
  padding: 0.5rem;
  overflow: auto;
}
pre > code { background: none; border: none; padding: 0; color: inherit; }
:not(pre) > code {
  background: var(--code-background);
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
}

ul li, ol li {
  margin-top: 0.5rem;
  list-style-position: inside;
}
ol { padding-left: 0; }
ul { padding-left: 0; list-style: none; }
li > ul { padding-left: 1rem; }
article ul:not(.pl) li::before { content: "* "; font-size: 1.2em; }

h1, h2, h3, h4, h5 { color: var(--link-color); }
h1 { font-size: 1.1rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.9rem; }

header {
  margin-bottom: 4rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Saisho post list (.pl) */
.pl {
  list-style: none;
  padding-left: 0;
}
.pl li {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 1ch;
  margin-top: 0.5rem;
}
.pl a { overflow: hidden; white-space: nowrap; }
.g {
  color: var(--dim-text-color);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

.meta { color: var(--dim-text-color); font-size: 0.85em; margin-top: 2rem; }

/* Tables */
table { border-collapse: collapse; }
th, td {
  border: 1px solid var(--dimmest-text-color);
  padding: 0.5rem 1rem;
  vertical-align: baseline;
}

@media screen and (max-width: 600px) {
  body { margin: 1rem; font-size: 14px; }
}