/* https://www.swyx.io/css-100-bytes */
html {
  background-color: #d1e9f2;
  font-size: large;
}

main {
  max-width: 70ch;
  padding: 3em 1em;
  padding-bottom: 0; /* Reduce space between <main> and <footer> */
  margin: auto;
  line-height: 1.5;
}

h1 {
  font-size: 2em; /* Even when in containers like <article> or <section> */
  text-align: center;
}

.blurb {
  display: flex;
}

@media (max-width: 768px) {
  .blurb {
    flex-direction: column-reverse;
  }
}
.blurb > :first-child {
  text-align: center;
  flex-basis: 50%;
}

.blurb > img:nth-child(2) {
  flex-basis: 50%;
  max-width: 40%;
  max-height: auto;
}

.colored-list-container {
  display: flex;
  flex-direction: column;
  /* If the first child of a colored-list-container is a div, then it is
   * probably containing a header and an RSS image link. Style such that the
   * heading and the RSS image link are on the same horizontal row, above the
   * bordered list.
   */
}
.colored-list-container > div:first-child {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 10px;
}
.colored-list-container > div:first-child > a {
  /* Center vertically */
  margin-top: auto;
  margin-bottom: auto;
}
.colored-list-container > :nth-child(2) {
  margin-top: 0;
}

.links {
  background-color: moccasin;
  border: 2px solid tan;
  border-radius: 5px;
  padding-top: 0.5em;
  padding-right: 1em;
  padding-bottom: 0.5em;
}

img, video {
  max-width: 480px;
  max-height: 360px;
  width: auto;
  height: auto;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid grey;
  border-radius: 5px;
}

.unbordered, .rss-link > img {
  border: none;
}

pre {
  background-color: #282a36;
  color: white;
  border: 2px solid grey;
  border-radius: 5px;
  padding: 1em;
  overflow-x: scroll;
}

span.ps1 {
  font-weight: bold;
  color: #50fa7b;
}

hr {
  /* Different browsers respond to different attributes for this element.
   * As per this StackOverflow answer:
   * https://stackoverflow.com/questions/6382023/changing-the-color-of-an-hr-element/12399447#12399447
   */
  background-color: black;
  border-color: black;
  color: black;
}

footer {
  font-weight: bold;
  margin: auto;
  max-width: 70ch;
}

.blog-posts {
  background-color: skyblue;
  border: 2px solid cornflowerblue;
  border-radius: 5px;
  padding-top: 0.5em;
  padding-right: 1em;
  padding-bottom: 0.5em;
}

.blog-posts .date {
  float: right;
}

/* Background */
.bg {
  color: #f8f8f2;
  background-color: #282a36;
}

/* PreWrapper */
.chroma {
  color: #f8f8f2;
  background-color: #282a36;
}

/* Other */
/* Error */
/* CodeLine */
/* LineLink */
.chroma .lnlinks {
  outline: none;
  text-decoration: none;
  color: inherit;
}

/* LineTableTD */
.chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0;
}

/* LineTable */
.chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* LineHighlight */
.chroma .hl {
  background-color: #3d3f4a;
}

/* LineNumbersTable */
.chroma .lnt {
  white-space: pre;
  -webkit-user-select: none;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f;
}

/* LineNumbers */
.chroma .ln {
  white-space: pre;
  -webkit-user-select: none;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f;
}

/* Line */
.chroma .line {
  display: flex;
}

/* Keyword */
.chroma .k {
  color: #ff79c6;
}

/* KeywordConstant */
.chroma .kc {
  color: #ff79c6;
}

/* KeywordDeclaration */
.chroma .kd {
  color: #8be9fd;
  font-style: italic;
}

/* KeywordNamespace */
.chroma .kn {
  color: #ff79c6;
}

/* KeywordPseudo */
.chroma .kp {
  color: #ff79c6;
}

/* KeywordReserved */
.chroma .kr {
  color: #ff79c6;
}

/* KeywordType */
.chroma .kt {
  color: #8be9fd;
}

/* Name */
/* NameAttribute */
.chroma .na {
  color: #50fa7b;
}

/* NameBuiltin */
.chroma .nb {
  color: #8be9fd;
  font-style: italic;
}

/* NameBuiltinPseudo */
/* NameClass */
.chroma .nc {
  color: #50fa7b;
}

/* NameConstant */
/* NameDecorator */
/* NameEntity */
/* NameException */
/* NameFunction */
.chroma .nf {
  color: #50fa7b;
}

/* NameFunctionMagic */
/* NameLabel */
.chroma .nl {
  color: #8be9fd;
  font-style: italic;
}

/* NameNamespace */
/* NameOther */
/* NameProperty */
/* NameTag */
.chroma .nt {
  color: #ff79c6;
}

/* NameVariable */
.chroma .nv {
  color: #8be9fd;
  font-style: italic;
}

/* NameVariableClass */
.chroma .vc {
  color: #8be9fd;
  font-style: italic;
}

/* NameVariableGlobal */
.chroma .vg {
  color: #8be9fd;
  font-style: italic;
}

/* NameVariableInstance */
.chroma .vi {
  color: #8be9fd;
  font-style: italic;
}

/* NameVariableMagic */
/* Literal */
/* LiteralDate */
/* LiteralString */
.chroma .s {
  color: #f1fa8c;
}

/* LiteralStringAffix */
.chroma .sa {
  color: #f1fa8c;
}

/* LiteralStringBacktick */
.chroma .sb {
  color: #f1fa8c;
}

/* LiteralStringChar */
.chroma .sc {
  color: #f1fa8c;
}

/* LiteralStringDelimiter */
.chroma .dl {
  color: #f1fa8c;
}

/* LiteralStringDoc */
.chroma .sd {
  color: #f1fa8c;
}

/* LiteralStringDouble */
.chroma .s2 {
  color: #f1fa8c;
}

/* LiteralStringEscape */
.chroma .se {
  color: #f1fa8c;
}

/* LiteralStringHeredoc */
.chroma .sh {
  color: #f1fa8c;
}

/* LiteralStringInterpol */
.chroma .si {
  color: #f1fa8c;
}

/* LiteralStringOther */
.chroma .sx {
  color: #f1fa8c;
}

/* LiteralStringRegex */
.chroma .sr {
  color: #f1fa8c;
}

/* LiteralStringSingle */
.chroma .s1 {
  color: #f1fa8c;
}

/* LiteralStringSymbol */
.chroma .ss {
  color: #f1fa8c;
}

/* LiteralNumber */
.chroma .m {
  color: #bd93f9;
}

/* LiteralNumberBin */
.chroma .mb {
  color: #bd93f9;
}

/* LiteralNumberFloat */
.chroma .mf {
  color: #bd93f9;
}

/* LiteralNumberHex */
.chroma .mh {
  color: #bd93f9;
}

/* LiteralNumberInteger */
.chroma .mi {
  color: #bd93f9;
}

/* LiteralNumberIntegerLong */
.chroma .il {
  color: #bd93f9;
}

/* LiteralNumberOct */
.chroma .mo {
  color: #bd93f9;
}

/* Operator */
.chroma .o {
  color: #ff79c6;
}

/* OperatorWord */
.chroma .ow {
  color: #ff79c6;
}

/* Punctuation */
/* Comment */
.chroma .c {
  color: #6272a4;
}

/* CommentHashbang */
.chroma .ch {
  color: #6272a4;
}

/* CommentMultiline */
.chroma .cm {
  color: #6272a4;
}

/* CommentSingle */
.chroma .c1 {
  color: #6272a4;
}

/* CommentSpecial */
.chroma .cs {
  color: #6272a4;
}

/* CommentPreproc */
.chroma .cp {
  color: #ff79c6;
}

/* CommentPreprocFile */
.chroma .cpf {
  color: #ff79c6;
}

/* Generic */
/* GenericDeleted */
.chroma .gd {
  color: #f55;
}

/* GenericEmph */
.chroma .ge {
  text-decoration: underline;
}

/* GenericError */
/* GenericHeading */
.chroma .gh {
  font-weight: bold;
}

/* GenericInserted */
.chroma .gi {
  color: #50fa7b;
  font-weight: bold;
}

/* GenericOutput */
.chroma .go {
  color: #44475a;
}

/* GenericPrompt */
/* GenericStrong */
/* GenericSubheading */
.chroma .gu {
  font-weight: bold;
}

/* GenericTraceback */
/* GenericUnderline */
.chroma .gl {
  text-decoration: underline;
}

/* TextWhitespace */
.blog-post > header {
  font-weight: bold;
}
.blog-post > header div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

blockquote {
  font-style: italic;
}