:root {
  --background-color: rgb(30, 30, 46);
  --text-color: rgb(205, 214, 244);
  --subtext-color: rgba(205, 214, 244, 0.7);
  --accent-color: rgb(137, 180, 250);

  --accent-background-color: rgba(137, 180, 250, 0.125);
  --table-border-color: rgba(205, 214, 244, 0.376);

  --container-max-width: 960px;
  --content-max-width: 720px;
  --content-padding-x: 0px;
}

@media screen and (min-width: 960px) {
  :root {
    --content-padding-x: calc((var(--container-max-width) - var(--content-max-width)) / 2);
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace;
	font-size: 1em;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-color);
}

a:hover {
  font-weight: 600;
}

.container {
  margin: 0 auto;
  padding: 0 16px;
  max-width: var(--container-max-width);
  margin-bottom: 160px;
}

@media screen and (min-width: 960px) {
  .container {
    padding: 0;
  }
}

/* -------------------- HEADER -------------------- */
header {
  margin: 160px 0 80px;
  padding: 0 var(--content-padding-x);
}

header > ul {
  padding: 0;
  list-style: none;
}

header > ul > li {
  display: inline;
}

header > ul > li:not(:last-child)::after {
  content: '·'
}

/* -------------------- PAGE CONTENT -------------------- */
.page-content > p {
  padding: 0 var(--content-padding-x);

  text-align: justify;
  line-height: 1.625;
}

.page-content > h1,
.page-content > h2,
.page-content > h3,
.page-content > h4,
.page-content > h5,
.page-content > h6 {
  padding: 0 var(--content-padding-x);

  line-height: 1.625;
}

.page-content > blockquote {
  margin: 0 var(--content-padding-x);

  padding: 16px 40px;
  background-color: var(--accent-background-color);
  border-left: 4px solid var(--accent-color);
}

.page-content > blockquote > p {
  margin: 0;
}

.page-content > ol,
.page-content > ul {
  padding: 0 calc(var(--content-padding-x) + 40px);
}

/* -------------------- POST LIST -------------------- */
.post-list {
  padding: 0 var(--content-padding-x);
}

.post-list > div {
  display: flex;
  align-items: baseline;
  gap: 3em;
  margin-bottom: 1em;
}

.post-list > div > a {
  font-size: 1.5em;
}

.post-list > div > p {
  margin: 0;
  color: #585b70;
}

/* -------------------- POST CONTENT -------------------- */
.post-content > .post-header {
  margin-bottom: 64px;
  padding: 0 var(--content-padding-x);
}

.post-content > .post-header > h1 {
  margin-bottom: 8px;
}

.post-content > .post-header > p {
  margin-top: 0;
  color: #585b70;
}

.post-content > p {
  padding: 0 var(--content-padding-x);

  text-align: justify;
  line-height: 1.625;
}

.post-content > h1,
.post-content > h2,
.post-content > h3,
.post-content > h4,
.post-content > h5,
.post-content > h6 {
  padding: 0 var(--content-padding-x);

  line-height: 1.625;
}

.post-content > ol,
.post-content > ul {
  padding: 0 calc(var(--content-padding-x) + 40px);
}

.post-content > blockquote {
  margin: 0 var(--content-padding-x);

  padding: 16px 40px;
  background-color: var(--accent-background-color);
  border-left: 4px solid var(--accent-color);
}

.post-content > blockquote > p {
  margin: 0;
}

.post-content > table {
  margin: 0 var(--content-padding-x);

  width: calc(100% - (var(--container-max-width) - var(--content-max-width)));
  border-collapse: collapse;
  border: 2px solid var(--table-border-color);
}

.post-content > table thead {
  border-bottom: 2px solid var(--table-border-color);
}

.post-content > table th,
.post-content > table td {
  padding: 4px 8px;
  border: 1px solid var(--table-border-color);
}

.post-content > table th:not(:last-child),
.post-content > table td:not(:last-child) {
  border-right: 2px solid var(--table-border-color);
}

.post-content > p > code {
  padding: 2px 4px;
  background-color: var(--accent-background-color);
}

.post-content > pre {
  margin: 0 var(--content-padding-x);
  padding: 16px 24px;
  background-color: var(--accent-background-color);
}

.post-content > figure {
  margin: 0;
  text-align: center;
}

.post-content > figure > img {
  width: 100%;
  max-width: fit-content;
}

.post-content > figure > figcaption {
  padding-top: 4px;
  color: var(--subtext-color);
  /* font-size: 0.9em; */
}

.post-content > .footnotes {
  padding: 0 var(--content-padding-x);
}