Closes #2420191230

5 files changed, 868 insertions, 421 deletions

diff --git a/layouts/partials/single_footer.html b/layouts/partials/single_footer.html
index 46b6012..42cbaaa 100644
--- a/layouts/partials/single_footer.html
+++ b/layouts/partials/single_footer.html
@@ -13,6 +13,9 @@
         {{ end }}
     </ul>
 </section>
+    {{ if .Site.Params.UtterancesRepo }}
+        {{ partial "utterances" . }}
+    {{ end }}
     {{ if .Site.DisqusShortname }}
         {{ partial "disqus" . }}
     {{ end }}
diff --git a/layouts/partials/utterances.html b/layouts/partials/utterances.html
new file mode 100644
index 0000000..edf5d46
--- /dev/null
+++ b/layouts/partials/utterances.html
@@ -0,0 +1,20 @@
+<div id="utterances"></div>
+<script>
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        let s = document.createElement("script");
+        s.setAttribute("repo", "{{ .Site.Params.UtterancesRepo }}");
+        s.src = "https://utteranc.es/client.js";
+        s.setAttribute("issue-term", "{{ .Site.Params.UtterancesIssueTerm }}");
+        s.setAttribute("theme", "{{ .Site.Params.UtterancesDarkTheme }}")
+        document.getElementById("utterances").innerHTML = "";
+        document.getElementById("utterances").appendChild(s);
+    } else {
+        let s = document.createElement("script");
+        s.setAttribute("repo", "{{ .Site.Params.UtterancesRepo }}");
+        s.src = "https://utteranc.es/client.js";
+        s.setAttribute("issue-term", "{{ .Site.Params.UtterancesIssueTerm }}");
+        s.setAttribute("theme", "{{ .Site.Params.UtterancesLightTheme }}")
+        document.getElementById("utterances").innerHTML = "";
+        document.getElementById("utterances").appendChild(s);
+    }
+</script>
diff --git a/static/css/styles-dark.css b/static/css/styles-dark.css
new file mode 100644
index 0000000..837928e
--- /dev/null
+++ b/static/css/styles-dark.css
@@ -0,0 +1,422 @@
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  font-family: "Roboto Slab", serif;
+  color: #ffffff;
+  background: #2A2829;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+time {
+  font-family: "Ruda", sans-serif;
+}
+
+#container {
+  margin: 0;
+  padding: 0;
+  max-width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+#container > * {
+  width: 700px;
+  margin: 0 auto;
+}
+
+@media only screen and (max-width: 800px) {
+  #container > * {
+    width: auto;
+    margin: 0 1.2em;
+  }
+}
+
+#container header {
+  margin-bottom: 1em;
+}
+
+#container header h1 {
+  font-size: 2.4rem;
+}
+
+#container header h1 a {
+  color: #ffffff;
+}
+
+#container header ul {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  float: right;
+}
+
+#container header ul li {
+  margin-left: 1em;
+}
+
+@media only screen and (max-width: 800px) {
+  #container header ul {
+    float: none;
+  }
+  #container header ul li {
+    margin: 0 1em 0 0;
+  }
+}
+
+#container nav {
+  border-bottom: solid 3px #cecece;
+  padding-bottom: 0.5em;
+  font-family: "Ruda", sans-serif;
+}
+
+#container nav ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  justify-content: flex-end;
+}
+
+#container nav ul li {
+  margin-left: 1em;
+}
+
+#container nav ul li a.active {
+  border-bottom: 0.5em solid #ffffff;
+}
+
+#container main {
+  flex: 1 0 0;
+  line-height: 1.5;
+  font-size: 1.2rem;
+}
+
+#container main section#home ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+#container main section#home ul li {
+  margin: 0.5em 0;
+  padding-bottom: 0.5em;
+}
+
+#container main section#home ul li h2 {
+  margin: 0.2em 0;
+}
+
+#container main section#home span {
+  color: #666666;
+}
+
+#container main section#list ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+#container main section#list ul li {
+  padding: 0.5em 0;
+  border-bottom: 1px solid #cecece;
+}
+
+#container main section#list ul li time, #container main section#list ul li span.count {
+  float: right;
+}
+
+#container main section#list ul li:last-child {
+  border-bottom: none;
+}
+
+#container main section.post-nav ul {
+  margin: 0.5em 0;
+  padding: 0.5em 0 0;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #f7f7f7;
+  font-size: 0.9em;
+}
+
+#container main article > pre {
+  background-color: #ffffcc;
+  overflow-x: auto;
+  padding: 0.8em;
+  font-size: 0.9em;
+  box-shadow: 0 -1px 0 #bbbbbb inset;
+}
+
+#container main article pre code {
+  font-size: 0.9em;
+}
+
+#container main article p code {
+  padding: 0.2em;
+  background-color: #ffcccc;
+  font-size: 0.9em;
+}
+
+#container main article p kbd {
+  display: inline-block;
+  padding: 0.2em 0.3em;
+  font-size: 0.8em;
+  line-height: 1em;
+  color: #555555;
+  vertical-align: middle;
+  background-color: #fcfcfc;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #cccccc #cccccc #bbbbbb;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: 0 -1px 0 #bbbbbb inset;
+}
+
+#container main h1 {
+  margin-bottom: 1rem;
+}
+
+#container footer {
+  border-top: solid 1px #cecece;
+}
+
+#container footer h6 {
+  font-size: 0.8em;
+}
+
+#container textarea, input {
+-webkit-box-align: center;
+-ms-flex-align: center;
+align-items: center;
+background-color: #fff;
+border: 1px solid #cecece;
+border-radius: 3px;
+color: #000000;
+/*display: -webkit-inline-box;*/
+display: -ms-inline-flexbox;
+display: inline-flex;
+font-size: 14px;
+-webkit-box-pack: start;
+-ms-flex-pack: start;
+justify-content: flex-start;
+line-height: 24px;
+padding: 8px;
+position: relative;
+box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.1);
+max-width: 100%;
+width: 100%;
+}
+
+#container button {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 1px solid #d3d6db;
+  border-radius: 3px;
+  color: #666666;
+  /*display: -webkit-inline-box;*/
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 10px;
+  text-align: center;
+}
+
+#container button:hover {
+ border: solid #cecece 2px;
+ text-decoration: none;
+}
+
+.meta-aside, #container main section#home ul li aside, #container main article aside {
+  margin: 0.5em 0;
+  font-family: "Ruda", sans-serif;
+  color: #909090;
+  font-size: 0.8em;
+}
+
+.meta-aside ul, #container main section#home ul li aside ul, #container main article aside ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.meta-aside ul li, #container main section#home ul li aside ul li, #container main article aside ul li {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.image, figure img, img {
+  width: 100%;
+  box-shadow: 0 3px 3px #bbbbbb;
+}
+
+.full-image, figure.full img, img[src*="full"] {
+  width: 100%;
+  box-shadow: 0 3px 3px #bbbbbb;
+}
+
+@supports (width: 100vw) {
+  .full-image, figure.full img, img[src*="full"] {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+  }
+}
+
+.mid-image, figure.mid img, img[src*="mid"] {
+  width: 100%;
+  box-shadow: 0 3px 3px #bbbbbb;
+}
+
+@supports (width: 100vw) {
+  .mid-image, figure.mid img, img[src*="mid"] {
+    width: 800px;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -400px;
+    margin-right: -400px;
+  }
+  @media only screen and (max-width: 800px) {
+    .mid-image, figure.mid img, img[src*="mid"] {
+      width: 100%;
+      left: 0;
+      right: 0;
+      margin: 0;
+    }
+  }
+}
+
+.float-image, figure.float img, img[src*="float"] {
+  width: 300px;
+  float: left;
+  margin: 0 1em 1em -3em;
+  box-shadow: 0 3px 3px #bbbbbb;
+}
+
+@media only screen and (max-width: 800px) {
+  .float-image, figure.float img, img[src*="float"] {
+    float: none;
+    margin: 0;
+    width: 100%;
+  }
+}
+
+.float-image-right, figure.float-right img, img[src*="float-right"] {
+  width: 300px;
+  float: right;
+  margin: 0 -3em 1em 1em;
+  box-shadow: 0 3px 3px #bbbbbb;
+}
+
+@media only screen and (max-width: 800px) {
+  .float-image-right, figure.float-right img, img[src*="float-right"] {
+    float: none;
+    margin: 0;
+    width: 100%;
+  }
+}
+
+figure {
+  margin: 0;
+}
+
+figure figcaption p {
+  margin-top: 0.3em;
+  font-size: 0.8em;
+  font-style: italic;
+}
+
+figure.full {
+  margin: 0;
+}
+
+figure.mid {
+  margin: 0;
+}
+
+figure.float {
+  margin: 0;
+  float: left;
+}
+
+figure.float-right {
+  margin: 0;
+  float: right;
+}
+
+figure.float-right figcaption {
+  margin-left: 1em;
+}
+
+table {
+  width: 100%;
+  border-bottom: solid 1px #cecece;
+}
+
+table thead {
+  background-color: #cecece;
+}
+
+blockquote {
+  margin: 1em;
+  border-left: solid 0.1em #cecece;
+  padding: 0.5em 2em;
+  position: relative;
+  background-color: #efefef;
+  box-shadow: 0 -1px 0 #bbbbbb inset;
+}
+
+blockquote::before {
+  content: "\f10d";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  font-size: 3em;
+  color: rgba(192, 192, 192, 0.3);
+  position: absolute;
+  left: 6px;
+  top: 0;
+}
+
+@media only screen and (max-width: 800px) {
+  blockquote {
+    margin: 1em 0;
+    padding: 0.5em;
+  }
+}
+
+dl dd {
+  font-style: italic;
+}
+
+ul.pagination {
+  display: flex;
+  justify-content: center;
+  margin: 1em 0 0;
+  padding: 0.5em 0;
+  list-style: none;
+}
+
+ul.pagination li {
+  padding: 0 1em;
+}
diff --git a/static/css/styles-light.css b/static/css/styles-light.css
new file mode 100644
index 0000000..e280684
--- /dev/null
+++ b/static/css/styles-light.css
@@ -0,0 +1,421 @@
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  font-family: "Roboto Slab", serif;
+  color: #333333;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+time {
+  font-family: "Ruda", sans-serif;
+}
+
+#container {
+  margin: 0;
+  padding: 0;
+  max-width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+#container > * {
+  width: 700px;
+  margin: 0 auto;
+}
+
+@media only screen and (max-width: 800px) {
+  #container > * {
+    width: auto;
+    margin: 0 1.2em;
+  }
+}
+
+#container header {
+  margin-bottom: 1em;
+}
+
+#container header h1 {
+  font-size: 2.4rem;
+}
+
+#container header h1 a {
+  color: #000000;
+}
+
+#container header ul {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  float: right;
+}
+
+#container header ul li {
+  margin-left: 1em;
+}
+
+@media only screen and (max-width: 800px) {
+  #container header ul {
+    float: none;
+  }
+  #container header ul li {
+    margin: 0 1em 0 0;
+  }
+}
+
+#container nav {
+  border-bottom: solid 3px #cecece;
+  padding-bottom: 0.5em;
+  font-family: "Ruda", sans-serif;
+}
+
+#container nav ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  justify-content: flex-end;
+}
+
+#container nav ul li {
+  margin-left: 1em;
+}
+
+#container nav ul li a.active {
+  border-bottom: 0.5em solid #666666;
+}
+
+#container main {
+  flex: 1 0 0;
+  line-height: 1.5;
+  font-size: 1.2rem;
+}
+
+#container main section#home ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+#container main section#home ul li {
+  margin: 0.5em 0;
+  padding-bottom: 0.5em;
+}
+
+#container main section#home ul li h2 {
+  margin: 0.2em 0;
+}
+
+#container main section#home span {
+  color: #666666;
+}
+
+#container main section#list ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+#container main section#list ul li {
+  padding: 0.5em 0;
+  border-bottom: 1px solid #cecece;
+}
+
+#container main section#list ul li time, #container main section#list ul li span.count {
+  float: right;
+}
+
+#container main section#list ul li:last-child {
+  border-bottom: none;
+}
+
+#container main section.post-nav ul {
+  margin: 0.5em 0;
+  padding: 0.5em 0 0;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #f7f7f7;
+  font-size: 0.9em;
+}
+
+#container main article > pre {
+  background-color: #ffffcc;
+  overflow-x: auto;
+  padding: 0.8em;
+  font-size: 0.9em;
+  box-shadow: 0 -1px 0 #bbbbbb inset;
+}
+
+#container main article pre code {
+  font-size: 0.9em;
+}
+
+#container main article p code {
+  padding: 0.2em;
+  background-color: #ffcccc;
+  font-size: 0.9em;
+}
+
+#container main article p kbd {
+  display: inline-block;
+  padding: 0.2em 0.3em;
+  font-size: 0.8em;
+  line-height: 1em;
+  color: #555555;
+  vertical-align: middle;
+  background-color: #fcfcfc;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #cccccc #cccccc #bbbbbb;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: 0 -1px 0 #bbbbbb inset;
+}
+
+#container main h1 {
+  margin-bottom: 1rem;
+}
+
+#container footer {
+  border-top: solid 1px #cecece;
+}
+
+#container footer h6 {
+  font-size: 0.8em;
+}
+
+#container textarea, input {
+-webkit-box-align: center;
+-ms-flex-align: center;
+align-items: center;
+background-color: #fff;
+border: 1px solid #cecece;
+border-radius: 3px;
+color: #000000;
+/*display: -webkit-inline-box;*/
+display: -ms-inline-flexbox;
+display: inline-flex;
+font-size: 14px;
+-webkit-box-pack: start;
+-ms-flex-pack: start;
+justify-content: flex-start;
+line-height: 24px;
+padding: 8px;
+position: relative;
+box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.1);
+max-width: 100%;
+width: 100%;
+}
+
+#container button {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 1px solid #d3d6db;
+  border-radius: 3px;
+  color: #666666;
+  /*display: -webkit-inline-box;*/
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 10px;
+  text-align: center;
+}
+
+#container button:hover {
+ border: solid #cecece 2px;
+ text-decoration: none;
+}
+
+.meta-aside, #container main section#home ul li aside, #container main article aside {
+  margin: 0.5em 0;
+  font-family: "Ruda", sans-serif;
+  color: #909090;
+  font-size: 0.8em;
+}
+
+.meta-aside ul, #container main section#home ul li aside ul, #container main article aside ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.meta-aside ul li, #container main section#home ul li aside ul li, #container main article aside ul li {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: #666666;
+  text-decoration: none;
+}
+
+.image, figure img, img {
+  width: 100%;
+  box-shadow: 0 3px 3px #bbbbbb;
+}
+
+.full-image, figure.full img, img[src*="full"] {
+  width: 100%;
+  box-shadow: 0 3px 3px #bbbbbb;
+}
+
+@supports (width: 100vw) {
+  .full-image, figure.full img, img[src*="full"] {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+  }
+}
+
+.mid-image, figure.mid img, img[src*="mid"] {
+  width: 100%;
+  box-shadow: 0 3px 3px #bbbbbb;
+}
+
+@supports (width: 100vw) {
+  .mid-image, figure.mid img, img[src*="mid"] {
+    width: 800px;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -400px;
+    margin-right: -400px;
+  }
+  @media only screen and (max-width: 800px) {
+    .mid-image, figure.mid img, img[src*="mid"] {
+      width: 100%;
+      left: 0;
+      right: 0;
+      margin: 0;
+    }
+  }
+}
+
+.float-image, figure.float img, img[src*="float"] {
+  width: 300px;
+  float: left;
+  margin: 0 1em 1em -3em;
+  box-shadow: 0 3px 3px #bbbbbb;
+}
+
+@media only screen and (max-width: 800px) {
+  .float-image, figure.float img, img[src*="float"] {
+    float: none;
+    margin: 0;
+    width: 100%;
+  }
+}
+
+.float-image-right, figure.float-right img, img[src*="float-right"] {
+  width: 300px;
+  float: right;
+  margin: 0 -3em 1em 1em;
+  box-shadow: 0 3px 3px #bbbbbb;
+}
+
+@media only screen and (max-width: 800px) {
+  .float-image-right, figure.float-right img, img[src*="float-right"] {
+    float: none;
+    margin: 0;
+    width: 100%;
+  }
+}
+
+figure {
+  margin: 0;
+}
+
+figure figcaption p {
+  margin-top: 0.3em;
+  font-size: 0.8em;
+  font-style: italic;
+}
+
+figure.full {
+  margin: 0;
+}
+
+figure.mid {
+  margin: 0;
+}
+
+figure.float {
+  margin: 0;
+  float: left;
+}
+
+figure.float-right {
+  margin: 0;
+  float: right;
+}
+
+figure.float-right figcaption {
+  margin-left: 1em;
+}
+
+table {
+  width: 100%;
+  border-bottom: solid 1px #cecece;
+}
+
+table thead {
+  background-color: #cecece;
+}
+
+blockquote {
+  margin: 1em;
+  border-left: solid 0.1em #cecece;
+  padding: 0.5em 2em;
+  position: relative;
+  background-color: #efefef;
+  box-shadow: 0 -1px 0 #bbbbbb inset;
+}
+
+blockquote::before {
+  content: "\f10d";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  font-size: 3em;
+  color: rgba(192, 192, 192, 0.3);
+  position: absolute;
+  left: 6px;
+  top: 0;
+}
+
+@media only screen and (max-width: 800px) {
+  blockquote {
+    margin: 1em 0;
+    padding: 0.5em;
+  }
+}
+
+dl dd {
+  font-style: italic;
+}
+
+ul.pagination {
+  display: flex;
+  justify-content: center;
+  margin: 1em 0 0;
+  padding: 0.5em 0;
+  list-style: none;
+}
+
+ul.pagination li {
+  padding: 0 1em;
+}
diff --git a/static/css/styles.css b/static/css/styles.css
index 5f04c1f..0144300 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,421 +1,2 @@
-body {
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  font-family: "Roboto Slab", serif;
-  color: #333333;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-time {
-  font-family: "Ruda", sans-serif;
-}
-
-#container {
-  margin: 0;
-  padding: 0;
-  max-width: 100vw;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-#container > * {
-  width: 700px;
-  margin: 0 auto;
-}
-
-@media only screen and (max-width: 800px) {
-  #container > * {
-    width: auto;
-    margin: 0 1.2em;
-  }
-}
-
-#container header {
-  margin-bottom: 1em;
-}
-
-#container header h1 {
-  font-size: 2.4rem;
-}
-
-#container header h1 a {
-  color: #000000;
-}
-
-#container header ul {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  float: right;
-}
-
-#container header ul li {
-  margin-left: 1em;
-}
-
-@media only screen and (max-width: 800px) {
-  #container header ul {
-    float: none;
-  }
-  #container header ul li {
-    margin: 0 1em 0 0;
-  }
-}
-
-#container nav {
-  border-bottom: solid 3px #cecece;
-  padding-bottom: 0.5em;
-  font-family: "Ruda", sans-serif;
-}
-
-#container nav ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  justify-content: flex-end;
-}
-
-#container nav ul li {
-  margin-left: 1em;
-}
-
-#container nav ul li a.active {
-  border-bottom: 0.5em solid #666666;
-}
-
-#container main {
-  flex: 1 0 0;
-  line-height: 1.5;
-  font-size: 1.2rem;
-}
-
-#container main section#home ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-#container main section#home ul li {
-  margin: 0.5em 0;
-  padding-bottom: 0.5em;
-}
-
-#container main section#home ul li h2 {
-  margin: 0.2em 0;
-}
-
-#container main section#home span {
-  color: #666666;
-}
-
-#container main section#list ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-#container main section#list ul li {
-  padding: 0.5em 0;
-  border-bottom: 1px solid #cecece;
-}
-
-#container main section#list ul li time, #container main section#list ul li span.count {
-  float: right;
-}
-
-#container main section#list ul li:last-child {
-  border-bottom: none;
-}
-
-#container main section.post-nav ul {
-  margin: 0.5em 0;
-  padding: 0.5em 0 0;
-  list-style: none;
-  display: flex;
-  justify-content: space-between;
-  border-top: 1px solid #f7f7f7;
-  font-size: 0.9em;
-}
-
-#container main article pre {
-  background-color: #ffffcc;
-  overflow-x: auto;
-  padding: 0.8em;
-  font-size: 0.9em;
-  box-shadow: 0 -1px 0 #bbbbbb inset;
-}
-
-#container main article pre code {
-  font-size: 0.9em;
-}
-
-#container main article p code {
-  padding: 0.2em;
-  background-color: #ffcccc;
-  font-size: 0.9em;
-}
-
-#container main article p kbd {
-  display: inline-block;
-  padding: 0.2em 0.3em;
-  font-size: 0.8em;
-  line-height: 1em;
-  color: #555555;
-  vertical-align: middle;
-  background-color: #fcfcfc;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #cccccc #cccccc #bbbbbb;
-  border-image: none;
-  border-radius: 3px;
-  box-shadow: 0 -1px 0 #bbbbbb inset;
-}
-
-#container main h1 {
-  margin-bottom: 1rem;
-}
-
-#container footer {
-  border-top: solid 1px #cecece;
-}
-
-#container footer h6 {
-  font-size: 0.8em;
-}
-
-#container textarea, input {
--webkit-box-align: center;
--ms-flex-align: center;
-align-items: center;
-background-color: #fff;
-border: 1px solid #cecece;
-border-radius: 3px;
-color: #000000;
-display: -webkit-inline-box;
-display: -ms-inline-flexbox;
-display: inline-flex;
-font-size: 14px;
--webkit-box-pack: start;
--ms-flex-pack: start;
-justify-content: flex-start;
-line-height: 24px;
-padding: 8px;
-position: relative;
-box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.1);
-max-width: 100%;
-width: 100%;
-}
-
-#container button {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: 1px solid #d3d6db;
-  border-radius: 3px;
-  color: #666666
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  position: relative;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 10px;
-  text-align: center;
-}
-
-#container button:hover {
- border: solid #cecece 2px;
- text-decoration: none;
-}
-
-.meta-aside, #container main section#home ul li aside, #container main article aside {
-  margin: 0.5em 0;
-  font-family: "Ruda", sans-serif;
-  color: #909090;
-  font-size: 0.8em;
-}
-
-.meta-aside ul, #container main section#home ul li aside ul, #container main article aside ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.meta-aside ul li, #container main section#home ul li aside ul li, #container main article aside ul li {
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  color: #666666;
-  text-decoration: none;
-}
-
-.image, figure img, img {
-  width: 100%;
-  box-shadow: 0 3px 3px #bbbbbb;
-}
-
-.full-image, figure.full img, img[src*="full"] {
-  width: 100%;
-  box-shadow: 0 3px 3px #bbbbbb;
-}
-
-@supports (width: 100vw) {
-  .full-image, figure.full img, img[src*="full"] {
-    width: 100vw;
-    position: relative;
-    left: 50%;
-    right: 50%;
-    margin-left: -50vw;
-    margin-right: -50vw;
-  }
-}
-
-.mid-image, figure.mid img, img[src*="mid"] {
-  width: 100%;
-  box-shadow: 0 3px 3px #bbbbbb;
-}
-
-@supports (width: 100vw) {
-  .mid-image, figure.mid img, img[src*="mid"] {
-    width: 800px;
-    position: relative;
-    left: 50%;
-    right: 50%;
-    margin-left: -400px;
-    margin-right: -400px;
-  }
-  @media only screen and (max-width: 800px) {
-    .mid-image, figure.mid img, img[src*="mid"] {
-      width: 100%;
-      left: 0;
-      right: 0;
-      margin: 0;
-    }
-  }
-}
-
-.float-image, figure.float img, img[src*="float"] {
-  width: 300px;
-  float: left;
-  margin: 0 1em 1em -3em;
-  box-shadow: 0 3px 3px #bbbbbb;
-}
-
-@media only screen and (max-width: 800px) {
-  .float-image, figure.float img, img[src*="float"] {
-    float: none;
-    margin: 0;
-    width: 100%;
-  }
-}
-
-.float-image-right, figure.float-right img, img[src*="float-right"] {
-  width: 300px;
-  float: right;
-  margin: 0 -3em 1em 1em;
-  box-shadow: 0 3px 3px #bbbbbb;
-}
-
-@media only screen and (max-width: 800px) {
-  .float-image-right, figure.float-right img, img[src*="float-right"] {
-    float: none;
-    margin: 0;
-    width: 100%;
-  }
-}
-
-figure {
-  margin: 0;
-}
-
-figure figcaption p {
-  margin-top: 0.3em;
-  font-size: 0.8em;
-  font-style: italic;
-}
-
-figure.full {
-  margin: 0;
-}
-
-figure.mid {
-  margin: 0;
-}
-
-figure.float {
-  margin: 0;
-  float: left;
-}
-
-figure.float-right {
-  margin: 0;
-  float: right;
-}
-
-figure.float-right figcaption {
-  margin-left: 1em;
-}
-
-table {
-  width: 100%;
-  border-bottom: solid 1px #cecece;
-}
-
-table thead {
-  background-color: #cecece;
-}
-
-blockquote {
-  margin: 1em;
-  border-left: solid 0.1em #cecece;
-  padding: 0.5em 2em;
-  position: relative;
-  background-color: #efefef;
-  box-shadow: 0 -1px 0 #bbbbbb inset;
-}
-
-blockquote::before {
-  content: "\f10d";
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  font-size: 3em;
-  color: rgba(192, 192, 192, 0.3);
-  position: absolute;
-  left: 6px;
-  top: 0;
-}
-
-@media only screen and (max-width: 800px) {
-  blockquote {
-    margin: 1em 0;
-    padding: 0.5em;
-  }
-}
-
-dl dd {
-  font-style: italic;
-}
-
-ul.pagination {
-  display: flex;
-  justify-content: center;
-  margin: 1em 0 0;
-  padding: 0.5em 0;
-  list-style: none;
-}
-
-ul.pagination li {
-  padding: 0 1em;
-}
+@import url(./styles-light.css);
+@import url(./styles-dark.css) (prefers-color-scheme: dark);