lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 720px;
}

/* gradient */
lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    width: 68px;
    height: 48px;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: none;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

/*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}

.hljs-comment,
.hljs-quote {
  color: #998;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #333;
  font-weight: bold;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: #008080;
}

.hljs-string,
.hljs-doctag {
  color: #d14;
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
  color: #900;
  font-weight: bold;
}

.hljs-subst {
  font-weight: normal;
}

.hljs-type,
.hljs-class .hljs-title {
  color: #458;
  font-weight: bold;
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
  color: #000080;
  font-weight: normal;
}

.hljs-regexp,
.hljs-link {
  color: #009926;
}

.hljs-symbol,
.hljs-bullet {
  color: #990073;
}

.hljs-built_in,
.hljs-builtin-name {
  color: #0086b3;
}

.hljs-meta {
  color: #999;
  font-weight: bold;
}

.hljs-deletion {
  background: #fdd;
}

.hljs-addition {
  background: #dfd;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

@charset "UTF-8";
body.hidden-scroll {
  overflow: hidden;
}

.sl-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  opacity: 0.7;
  display: none;
  z-index: 1035;
}

.sl-wrapper {
  z-index: 1040;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
}
.sl-wrapper * {
  box-sizing: border-box;
}
.sl-wrapper button {
  border: 0 none;
  background: transparent;
  font-size: 28px;
  padding: 0;
  cursor: pointer;
}
.sl-wrapper button:hover {
  opacity: 0.7;
}
.sl-wrapper .sl-close {
  display: none;
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 10060;
  margin-top: -14px;
  margin-right: -14px;
  height: 44px;
  width: 44px;
  line-height: 44px;
  font-family: Arial, Baskerville, monospace;
  color: #000;
  font-size: 3rem;
}
.sl-wrapper .sl-counter {
  display: none;
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 1060;
  color: #000;
  font-size: 1rem;
}
.sl-wrapper .sl-navigation {
  width: 100%;
  display: none;
}
.sl-wrapper .sl-navigation button {
  position: fixed;
  top: 50%;
  margin-top: -22px;
  height: 44px;
  width: 22px;
  line-height: 44px;
  text-align: center;
  display: block;
  z-index: 10060;
  font-family: Arial, Baskerville, monospace;
  color: #000;
}
.sl-wrapper .sl-navigation button.sl-next {
  right: 5px;
  font-size: 2rem;
}
.sl-wrapper .sl-navigation button.sl-prev {
  left: 5px;
  font-size: 2rem;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
  .sl-wrapper .sl-navigation button.sl-next {
    right: 10px;
    font-size: 3rem;
  }
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 10px;
    font-size: 3rem;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
  .sl-wrapper .sl-navigation button.sl-next {
    right: 20px;
    font-size: 3rem;
  }
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 20px;
    font-size: 3rem;
  }
}
.sl-wrapper.sl-dir-rtl .sl-navigation {
  direction: ltr;
}
.sl-wrapper .sl-image {
  position: fixed;
  touch-action: none;
  z-index: 10000;
}
.sl-wrapper .sl-image img {
  margin: 0;
  padding: 0;
  display: block;
  border: 0 none;
  width: 100%;
  height: auto;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
.sl-wrapper .sl-image iframe {
  background: #000;
  border: 0 none;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
.sl-wrapper .sl-image .sl-caption {
  display: none;
  padding: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  font-size: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-top {
  bottom: auto;
  top: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-outside {
  bottom: auto;
}
.sl-wrapper .sl-image .sl-download {
  display: none;
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #000;
  z-index: 1060;
}

.sl-spinner {
  display: none;
  border: 5px solid #333;
  border-radius: 40px;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -20px;
  opacity: 0;
  position: fixed;
  top: 50%;
  width: 40px;
  z-index: 1007;
  -webkit-animation: pulsate 1s ease-out infinite;
  animation: pulsate 1s ease-out infinite;
}

.sl-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.sl-transition {
  transition: transform ease 200ms;
}

@-webkit-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@media (prefers-color-scheme: dark) {
  pre code.hljs {
    opacity: 0.8;
    border-radius: 0.4rem;
  }

  /*

  Night Owl for highlight.js (c) Carl Baxter <carl@cbax.tech>

  An adaptation of Sarah Drasner's Night Owl VS Code Theme 
  https://github.com/sdras/night-owl-vscode-theme 

  Copyright (c) 2018 Sarah Drasner

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  SOFTWARE.

  */
  .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #011627;
    color: #d6deeb;
  }

  /* General Purpose */
  .hljs-keyword {
    color: #c792ea;
    font-style: italic;
  }

  .hljs-built_in {
    color: #addb67;
    font-style: italic;
  }

  .hljs-type {
    color: #82aaff;
  }

  .hljs-literal {
    color: #ff5874;
  }

  .hljs-number {
    color: #F78C6C;
  }

  .hljs-regexp {
    color: #5ca7e4;
  }

  .hljs-string {
    color: #ecc48d;
  }

  .hljs-subst {
    color: #d3423e;
  }

  .hljs-symbol {
    color: #82aaff;
  }

  .hljs-class {
    color: #ffcb8b;
  }

  .hljs-function {
    color: #82AAFF;
  }

  .hljs-title {
    color: #DCDCAA;
    font-style: italic;
  }

  .hljs-params {
    color: #7fdbca;
  }

  /* Meta */
  .hljs-comment {
    color: #637777;
    font-style: italic;
  }

  .hljs-doctag {
    color: #7fdbca;
  }

  .hljs-meta {
    color: #82aaff;
  }

  .hljs-meta-keyword {
    color: #82aaff;
  }

  .hljs-meta-string {
    color: #ecc48d;
  }

  /* Tags, attributes, config */
  .hljs-section {
    color: #82b1ff;
  }

  .hljs-tag,
.hljs-name,
.hljs-builtin-name {
    color: #7fdbca;
  }

  .hljs-attr {
    color: #7fdbca;
  }

  .hljs-attribute {
    color: #80cbc4;
  }

  .hljs-variable {
    color: #addb67;
  }

  /* Markup */
  .hljs-bullet {
    color: #d9f5dd;
  }

  .hljs-code {
    color: #80CBC4;
  }

  .hljs-emphasis {
    color: #c792ea;
    font-style: italic;
  }

  .hljs-strong {
    color: #addb67;
    font-weight: bold;
  }

  .hljs-formula {
    color: #c792ea;
  }

  .hljs-link {
    color: #ff869a;
  }

  .hljs-quote {
    color: #697098;
    font-style: italic;
  }

  /* CSS */
  .hljs-selector-tag {
    color: #ff6363;
  }

  .hljs-selector-id {
    color: #fad430;
  }

  .hljs-selector-class {
    color: #addb67;
    font-style: italic;
  }

  .hljs-selector-attr,
.hljs-selector-pseudo {
    color: #c792ea;
    font-style: italic;
  }

  /* Templates */
  .hljs-template-tag {
    color: #c792ea;
  }

  .hljs-template-variable {
    color: #addb67;
  }

  /* diff */
  .hljs-addition {
    color: #addb67ff;
    font-style: italic;
  }

  .hljs-deletion {
    color: #EF535090;
    font-style: italic;
  }
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/vendor/@fontsource/roboto/files/roboto-latin-ext-400-normal.woff2?c3dcdbd5bb4d4af80817dc0edc1cd888) format("woff2"), url(/fonts/vendor/@fontsource/roboto/files/roboto-all-400-normal.woff?376ea5d93f71583052f65de4e0c6a92c) format("woff");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/vendor/@fontsource/roboto/files/roboto-latin-ext-400-italic.woff2?7c8bfd16021e6a22cd41e9ec8483e371) format("woff2"), url(/fonts/vendor/@fontsource/roboto/files/roboto-all-400-italic.woff?7d428ea570621800bcd1a5627a8fecd0) format("woff");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/vendor/@fontsource/roboto/files/roboto-latin-ext-700-normal.woff2?bcf37d666ce10b3556cd04b17d96d68d) format("woff2"), url(/fonts/vendor/@fontsource/roboto/files/roboto-all-700-normal.woff?ef6d1d09b20b877fee4ee89fde70755b) format("woff");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/vendor/@fontsource/roboto/files/roboto-latin-ext-700-italic.woff2?2d57391ac313704193b93b2a7286a79d) format("woff2"), url(/fonts/vendor/@fontsource/roboto/files/roboto-all-700-italic.woff?505a9e3950ef25e1bdff1d02d192ab12) format("woff");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/**
 * Variables
 */
/** Default (light) theme */
:root {
  --aside-background: #302F4D;
  --aside-link-color: white;
  --code-background: #eaeaed;
  --link-color: #327B85;
  --content-background: #fff;
  --text-color: #000;
  --rest-articles-background: #eaeaed;
  --input-border-color: #c1c1ca;
  --input-background: white;
  --button-background: #d6d5db;
  --error-border: #ff000099;
  --notification-404-text: var(--text-color);
  --notification-404-border: rgba(255, 0, 0, .4);
  --notification-404-background: rgba(255, 0, 0, .1);
  --alert-background: rgba(222, 205, 102, 0.33);
}

/** Darko theme */
@media (prefers-color-scheme: dark) {
  :root {
    --aside-background: #222;
    --aside-link-color: white;
    --content-background: #2d2d2d;
    --code-background: #383838;
    --link-color: #fff;
    --text-color: #b9b9b9;
    --rest-articles-background: #383838;
    --input-border-color: #ffffff11;
    --input-background: #ffffff11;
    --button-background: #00000022;
    --error-border: #ff000066;
    --notification-404-text: var(--text-color);
    --notification-404-border: rgba(255, 0, 0, .4);
    --notification-404-background: rgba(255, 0, 0, .1);
    --alert-background: #22222299;
  }
}
/** Independent variables */
:root {
  --primary-10: #eaeaed ;
}

/** Elements */
* {
  box-sizing: border-box;
}

body, input, textarea, button {
  font: 1.2rem/1.4 "Roboto", Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--content-background);
}

lite-vimeo, lite-youtube, video {
  width: 100%;
  max-width: 100%;
}

picture, img {
  max-width: 100%;
}

figure {
  text-align: center;
  font-size: smaller;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
figure figcaption {
  opacity: 0.8;
}

blockquote {
  margin: 0;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  border-width: 0 0.5rem;
  border-style: solid;
  border-color: var(--input-border-color);
  background-color: var(--code-background);
  border-radius: 1rem;
  opacity: 0.8;
}

.expand-div {
  display: none;
}

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

a:hover, a:active {
  opacity: 0.7;
  text-decoration: none;
}

a[href*="web.archive.org/web"]:not([title*=noarch])::after {
  content: "💾";
  margin-left: 0.25rem;
  text-decoration: none;
  font-style: normal;
}

article code {
  background: var(--code-background);
  padding: 0.2rem 0.4rem;
}

table {
  border-collapse: collapse;
  font-size: 0.8rem;
}

/* Specifics */
svg.facebook {
  fill: #385C8E;
}

svg.twitter {
  fill: #3FA9F5;
}

svg.comments {
  fill: var(--link-color);
}

.entry-actions {
  text-align: center;
}
.entry-actions a {
  text-decoration: none;
  padding: 0 0.5rem;
}
.entry-actions a svg {
  height: 4rem;
}

.hl {
  background-color: rgba(255, 255, 0, 0.32);
}

.has-content-before::before {
  display: inline;
  content: "... ";
}

.has-content-after::after {
  display: inline;
  content: "... ";
}

table {
  margin: 0 auto;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 1rem;
}
table th, table td {
  border-style: solid;
  border-color: #000;
  padding: 0.5rem 0.75rem;
}
table th {
  border-width: 2px 0;
}
table td {
  border-width: 1px 0;
}

.notifications {
  font-size: smaller;
  border: 1px solid var(--link-color);
  background-color: var(--rest-articles-background);
}
.notifications > p:first-child {
  padding-top: 0;
}
.notifications:before {
  content: "Pievērs uzmanību";
  position: relative;
  top: -0.8rem;
  background-color: var(--link-color);
  color: var(--content-background);
  padding: 0.3rem 1rem 0.25rem 1rem;
  margin-left: 1rem;
  text-transform: uppercase;
}
.notifications p {
  padding: 0.75rem 1rem;
  margin: 0;
}

.hidden {
  display: none;
}

form {
  width: 50rem;
  max-width: 95%;
  margin: 0 auto;
}
form label {
  font-size: 1rem;
  padding: 0.5rem 0 0 0;
  color: var(--link-color);
}
form label .help {
  font-size: smaller;
  color: var(--text-color);
}
form label, form input[type=email], form input[type=text], form input[type=password], form textarea, form button {
  display: block;
  width: 100%;
  outline: 0;
}
form label:hover, form input[type=email]:hover, form input[type=text]:hover, form input[type=password]:hover, form textarea:hover, form button:hover {
  border-color: var(--text-color);
}
form label:focus, form input[type=email]:focus, form input[type=text]:focus, form input[type=password]:focus, form textarea:focus, form button:focus {
  border-color: var(--link-color);
}
form label.is-error, form input[type=email].is-error, form input[type=text].is-error, form input[type=password].is-error, form textarea.is-error, form button.is-error {
  border-color: var(--error-border);
}
form label.is-error {
  color: var(--link-color);
}
form .buttons {
  display: flex;
  flex-direction: row;
}
form .buttons button {
  width: auto;
  flex-grow: 1;
}
form input, form textarea, form button {
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--input-border-color);
  background-color: var(--input-background);
  color: var(--text-color);
}
form button:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}
form button:disabled:hover {
  border-color: var(--input-border-color);
}
form input:-webkit-autofill,
form input:-webkit-autofill:active,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus {
  font: 1.2rem/1.5 "Roboto", Arial, Helvetica, sans-serif;
  -webkit-box-shadow: 0 0 0 1000px var(--input-background) inset;
  -webkit-text-fill-color: var(--text-color);
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
form textarea {
  height: 12rem;
}
form button {
  margin: 0.5rem 0;
  background-color: var(--button-background);
}

/** Layout */
aside {
  border-top: 1px solid var(--aside-background);
  padding: 1.4rem;
  background-color: var(--aside-background);
  text-align: center;
}
aside h1 {
  margin: 0;
  padding: 0;
}
aside h1 a {
  display: block;
  padding: 0.5rem 0;
}
aside h1 a svg rect {
  fill: var(--aside-link-color);
}
aside form {
  width: 100%;
}
aside form input {
  max-width: 100%;
}
aside nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: inline-block;
}
aside nav ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
aside nav ul li a {
  display: block;
  padding: 0.25rem 0.5rem;
}
aside nav ul li a:link, aside nav ul li a:visited {
  color: var(--aside-link-color);
}
aside nav ul li a svg.twitter {
  vertical-align: middle;
  height: 2.5rem;
  padding-bottom: 0.5rem;
}
aside ul.admin-nav {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
}
aside ul.admin-nav li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
aside ul.admin-nav li a {
  padding: 0 0.5rem;
  color: yellow;
}

main {
  border-top: 1px solid transparent;
  background-color: var(--content-background);
  color: var(--text-color);
}
main section {
  padding: 1rem 0 2rem 0;
}
main section.alert {
  background-color: var(--alert-background);
  opacity: 0.8;
  margin: 0;
  padding: 0 1rem;
  font-size: 70%;
}
main section.alert p {
  margin-top: 0;
  padding: 1rem 0;
}
main section .author, main section [data-action] {
  font-size: 0.8rem;
  text-decoration: none;
  padding: 0.15rem 0.3rem;
  border-radius: 0.25rem;
  border-width: 0;
  font-variant: small-caps;
  text-transform: lowercase;
}
main section [data-action].accept {
  background-color: #007d6c;
}
main section [data-action].reject {
  background-color: #945400;
}
main section [data-action] {
  background-color: var(--button-background);
  color: var(--content-background);
}
main section .author {
  background-color: var(--text-color);
  color: var(--content-background);
}
main section > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  width: 50rem;
}
main section > * h1 {
  font-size: 1.6rem;
  margin-bottom: 0;
  color: var(--link-color);
}
main section > * .meta {
  margin-top: 0;
  font-size: smaller;
}
main #articles-rest, main #comments {
  border-top: 1px solid transparent;
  padding-top: 2rem;
  margin-top: 2rem;
  background-color: var(--rest-articles-background);
}
main #articles-rest article, main #comments article {
  font-size: smaller;
}
main #articles-rest article h1, main #comments article h1 {
  font-size: 1.5rem;
}
main #articles-rest article .meta, main #comments article .meta {
  margin-bottom: 0;
}
main #articles-rest article header + p, main #comments article header + p {
  margin-top: 0.5rem;
}
main #comments .reply-to {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
main #comments #replying-to {
  display: none;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: bold;
}
main #comments #in_reply_to_author {
  font-weight: bold;
}
main #comments form {
  margin-bottom: 2rem;
}
main #comments form button {
  display: block;
  width: 100%;
}
main #comments > .comment {
  margin: 0 auto;
}
main #comments .comment {
  width: 50rem;
  max-width: 93%;
  font-size: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}
main #comments .comment h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: normal;
  padding: 0;
  grid-area: author;
  color: var(--link-color);
}
main #comments .comment .meta {
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
}
main #comments .comment .meta a {
  opacity: 0.8;
}
main #comments .comment .comment-content {
  padding-left: 0;
  overflow-x: hidden;
}
main #comments .comment .gravatar-image {
  height: 1.5rem;
  float: right;
  border: 1px solid var(--input-border-color);
  margin: 0 0 -0.2rem 0;
  border-radius: 50%;
  vertical-align: baseline;
  background-color: var(--content-background);
}
main #comments .comment .replies {
  margin: 1rem 0 1rem 0.5rem;
  border-left: 2px solid var(--input-border-color);
  width: 100%;
}
main #comments .comment .replies .comment {
  padding-left: 1.5rem;
  width: 100%;
  max-width: calc(100% - .5rem);
}

#container > footer {
  background-color: var(--content-background);
  color: var(--text-color);
  font-size: 70%;
  padding: 1rem 0;
}
#container > footer * {
  opacity: 0.8;
}
#container > footer p {
  margin: 0 auto;
  padding: 0.5rem 0;
  width: 50rem;
  max-width: 95%;
}

#container {
  min-height: 100vh;
}

.years {
  display: flex;
  padding: 0 0 1rem 0;
  list-style: none;
  flex-wrap: wrap;
}
.years li {
  margin: 0;
  padding: 0;
  display: block;
  text-align: center;
}
.years li.is-active a {
  background-color: var(--text-color);
  color: var(--content-background);
}
.years li a {
  display: block;
  padding: 0.5rem 1rem;
}

.hidden-text {
  font-size: 0;
}

@media screen and (min-width: 800px) {
  body, input, textarea, button {
    font-size: 1.4rem;
  }

  main h1 {
    font-size: 1.87rem;
  }
}
@media screen and (min-width: 1400px) {
  #container {
    display: grid;
    grid-template-areas: "aside main" "aside footer";
    grid-template-columns: 1fr minmax(800px, calc(50vw + 25rem));
  }
  #container aside {
    grid-area: aside;
    text-align: right;
    padding: 1.4rem 0;
  }
  #container aside form {
    width: 15rem;
    margin: 0 0 0 auto;
  }
  #container aside > * {
    padding-right: 2rem;
  }
  #container aside h1 a {
    background-position: 100% 50%;
  }
  #container aside nav ul {
    display: block;
    margin-bottom: 1rem;
  }
  #container aside nav ul li {
    display: block;
  }
  #container main {
    grid-area: main;
  }
  #container main article h1 {
    font-size: 2rem;
  }
  #container main > section {
    padding-left: 1rem;
    padding-top: 0;
  }
  #container main > section section, #container main > section article {
    margin: 0 1.5rem;
    width: 50rem;
    max-width: 50rem;
  }
  #container main > section > * {
    margin-left: 1.5rem;
  }
  #container > footer {
    grid-area: footer;
    align-self: end;
  }
  #container > footer p {
    margin-left: 1.5rem;
  }
  #container #comments > .comment {
    margin-left: 1.5rem;
  }
}