/*
initial styles taken from barf
https://git.sr.ht/~bt/barf/tree/8bdd163d69369316be145ac9a2e1d45b633d5d43/item/header.html#L10-111
*/

:root {
  --black: #18181b;
  --gray: #4b5563;
  --white: #f9fafb;
  --off-white: #e9eaeb;
  --link: royalblue;
  --link-visited: hsl(261.0, 45%, 43%);
  --thick-border-width: 3px;
}

* {
  box-sizing: border-box;
}

html {
  /* this makes 1rem = 10px; I don't have a handy link for reference 😢 */
  font-size: 62.5%;
}

body {
  line-height: 1.45;
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--black);
  font-size: 1.6rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

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

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

hr {
  background-color: var(--gray);
  border: 0;
  height: 1px;
  margin: 2rem 0;
}

nav {
  margin: 2rem 0 0;
}

main, article {
  hyphens: auto;
  margin: 0 auto;
  max-width: 64rem;
  padding: 2rem 15px 0;
}

p {
  font-size: 1.8rem;
  margin: 3.2rem 0;
  line-height: 1.6em;
}

li {
  font-size: 1.8rem;
  margin: 1rem 0;
  line-height: 1.6em;
}

.homepage-article-list,
.micro-blog-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.homepage-article-list li,
.micro-blog-list li {
  padding: 1.6rem 0 0;
}

/* "border" between list elements.
this would be simpler as an actual 'border' property, but leaving this as-is in case
I want to reduce the width in the future */
.homepage-article-list li:after,
.micro-blog-list li:after {
  content: '';
  border-bottom: 1px solid var(--gray);
  width: 100%;
  display: block;
  /* 2.6rem = 1rem + 1.6rem to "center" between list elements
     1rem comes from li margin-top
     1.6rem comes from .homepage-article-list li padding-top */
  margin: 2.6rem auto 0;
}

.homepage-article-list li a {
  display: block;
}

h2,h3,h4 {
  margin: 2rem 0 0;
}

h1 {
  font-size: 3.6rem;
  margin: 0 0 0.5rem;
}

h1 small {
  font-size: 0.72em;
  font-weight: 400;
  display: block;
}

span.created {
  display: block;
  margin: 4px 15px;
}
img {
  border: 1px solid var(--gray);
  height: auto;
  max-width: 100%;
  width: auto;
}

img.album-art-img {
  max-width: 20em;
  margin: 0 auto;
  display: flex;
}

/* from https://cdn.infoq.com/statics_s1_20230530072659/styles/style.css */
blockquote {
  display: block;
  position: relative;
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
  line-height: 1.5rem;
  margin:20px 0;
  font-style:normal;
  border-radius: 0.2rem;
  border-left: 0.4rem solid var(--gray);
  background: var(--off-white);
  color: var(--black);
}
blockquote::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14'%3e %3cpath fill='currentColor' fill-rule='evenodd' d='M0.107526882%2c9.3415 C0.107526882%2c11.867625 2.12064516%2c13.9153437 4.60408602%2c13.9153437 C7.08752688%2c13.9153437 9.10064516%2c11.867625 9.10064516%2c9.3415 C9.10064516%2c6.8464375 7.13569892%2c4.81928125 4.6944086%2c4.7700625 C5.82967742%2c3.63759375 7.38451613%2c2.93803125 9.10064516%2c2.93803125 L9.10064516%2c0.1938125 C4.13397849%2c0.1938125 0.107526882%2c4.28946875 0.107526882%2c9.3415 L0.107526882%2c9.3415 Z M19.8924731%2c0.1938125 C14.9258065%2c0.1938125 10.8993548%2c4.28946875 10.8993548%2c9.3415 C10.8993548%2c11.867625 12.9126882%2c13.9153437 15.395914%2c13.9153437 C17.8793548%2c13.9153437 19.8924731%2c11.867625 19.8924731%2c9.3415 C19.8924731%2c6.8464375 17.9275269%2c4.81928125 15.4862366%2c4.7700625 C16.6215054%2c3.63759375 18.1765591%2c2.93803125 19.8924731%2c2.93803125 L19.8924731%2c0.1938125 L19.8924731%2c0.1938125 Z'/%3e %3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  content: '';
  width: 2rem;
  height: 2rem;
  display: block;
}
blockquote p {
  display: block;
  margin: 0;
}


figure {
  margin: 2rem 0;
}

figcaption {
  color: slategrey;
}

code {
  border: 1px solid;
  border-radius: 2px;
  padding: 0.1rem 0.3rem;
  tab-size: 4;
}

pre {
  border: 1px solid;
  white-space: break-spaces;
}

pre code,
.svg-wrapper {
  border: 0;
  display: block;
  overflow-x: auto;
  padding: 0.3rem 0.6rem;
}

table {
  border-collapse: collapse;
  margin: 2rem 0;
  text-align: left;
  width: 100%;
}

tr {
  border-bottom: 1px solid lightgrey;
}

tr:nth-of-type(odd) td {
  background-color: #f8f8f8;
}

th,td {
  padding: 0.6rem;
}

footer {
  border-top: 1px dashed grey;
  margin: 2rem 0;
  padding: 1rem 15px;
}

.center-column {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--gray);
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.border {
  border: var(--thick-border-width) solid var(--black);
}

.border-top {
  border-top: var(--thick-border-width) solid var(--black);
}

.border-right {
  border-right: var(--thick-border-width) solid var(--black);
}

.padding-1 {
  padding: 1em;
}

/* To keep thing lean-n-mean, none of these fonts are shipped with the site. They are just included in case the user has interesting monospace fonts available */
.monospace {
  font-family: "Inconsolata", "Source Code Pro", "IBM Plex Mono", "Andale Mono", "DejaVu Sans Mono", "Consolas", "Roboto Mono", "Hack", monospace;
}

.flex-basis-50 {
  flex-basis: 50%;
}

.flex-basis-100 {
  flex-basis: 100%;
}

.w-100 {
  width: 100%;
}

.h-123 {
  height: 123px;
}

.h-100 {
  height: 100%;
}

.margin-05 {
  margin: 0.5em;
}

.abs-w-360 {
  max-width: 360px;
  min-width: 360px;
  margin: 0 auto;
}

.text-align-center {
  text-align: center;
}

.font-weight-400 {
  font-weight: 400;
}

.font-size-24 {
  font-size: 2.4rem;
}

.bg-custom-img {
  background: url('./header.svg') repeat;
}

.header-anchor {
  text-decoration: none !important;
  color: var(--black) !important;
  position: relative;
  padding-left: 2.5rem;
  margin-left: -2.5rem;
}

.header-anchor:hover::before {
  /* content: '#'; */
  content: url("data:image/svg+xml,%3csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' %3e %3cpath fill='currentColor' d='m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z'%3e%3c/path%3e %3c/svg%3e");
  position: absolute;
  left: 0.8em;
  top: 0.6em;
  color: var(--gray);
  font-size: 0.8rem;
}

@supports (color-scheme: dark light) {
  @media screen and (prefers-color-scheme: dark) {
    :root {
      /* https://github.com/ericyd/loop-supreme/blob/bd22ed519dbf633d8ba67792f2fd6aa704d92f87/tailwind.config.js#L29-L31 */
      --black: #f9fafb;
      --white: #18181b;
      --gray: #a1a1aa;
      --off-white: #48484b;
      --link: #9e9eff;
      --link-visited: #d0adf0;
    }
  }
}