html {
  overflow-y: scroll;
}

:root {
  --bgcolor: #fafafa;
  --fontcolor: #444;
  --linkcolor: #1a0dab;
  --visitedcolor: #551a8b;
  --highlightcolor: #444;
  --precolor: #fff;
  --prebgcolor: #000;
  --articlecolor: #f2f2f2;
  --brandcolor: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bgcolor: #101010;
    --fontcolor: white;
    --linkcolor: #149414;
    --visitedcolor: #0e6b0e;
    --highlightcolor: #17ac17;
    --precolor: #fff;
    --prebgcolor: #383838;
    --articlecolor: #202020;
    --brandcolor: #fff;
  }
}

body {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 10px;
  /* font-size: 14px; */
  /* line-height: 1.5; */
  /* font-family: Fira Code,Monaco,Consolas,Ubuntu Mono,monospace; */
  font: 14px/1.5 monospace;
  color: var(--fontcolor);
  background: var(--bgcolor);
}

a:link {
  color: var(--linkcolor);
  text-decoration: none;
}

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

a:active {
  color: var(--highlightcolor);
  text-decoration: underline;
}

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

h1,h2,h3 {
  line-height: 1.2;
}

p > code {
  color: var(--precolor);
  background: var(--prebgcolor);
  padding: 2px;
}

pre {
  color: var(--precolor);
  background: var(--prebgcolor);
  padding: 12px; /*24px;*/
  overflow-x: auto;
}

article {
  padding: 4px 12px; /*24px 0;*/
  background: var(--articlecolor);
  margin-top: 20px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figcaption {
  color: #888;
  font: 12px/1.5 monospace;
  text-align: center;
}

figure {
  margin: auto;
}

.site-title {
  line-height: 1.2;
  font: 28px/1.5 monospace;
  font-weight: 700;
}

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

article > h1 {
  font-size: 28px;
}

i.fa, i.fab, i.far, i.fas {
  padding-right: 2pt;
}

.post-list {
  list-style-type: none;
}

.post-list li.list-tag {
  padding-left: 1pt;
}

.post-list li.list-post {
  padding-left: 5pt;
}

.post-list li.list-post::marker {
  content: "📧";
  font-family: "Font Awesome 5 Free";
}

.post-list li.list-tag::marker {
  content: "#";
  color: var(--linkcolor);
}

.font-size-large {
  font-size: large;
}

details.easteregg {
  display: inline;
}

details.easteregg:hover {
  cursor: pointer;
}

details.easteregg > summary::marker {
  content: "\f1f9";
  font-family: "Font Awesome 5 Free";
  padding-right: 4px;
}

details.easteregg[open] > summary::marker {
  content: "\f59c";
  font-family: "Font Awesome 5 Free";
  padding-right: 4px;
}

.fab, .brand-logo {
  color: var(--brandcolor);
}

.grow {
  transition: all .2s ease-in-out;
}

.grow:hover {
  transform: scale(1.1);
}

code {
  font-family: 'Courier New', Courier, monospace;
}