@import url(https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs.css) (prefers-color-scheme: light);
@import url(https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.css) (prefers-color-scheme: dark);

:root {
  --content-background-color: white;
  --content-radius: 12px;
  --content-padding: 18px;
  --content-margin: 18px;
  --content-shadow-offset: 8px;
  --content-shadow-radius: 8px;
  --content-shadow-color: rgba(0, 0, 0, 0.3);
  --nav-width: 300px;
  --font-body: "Libertinus Serif", "Cambria", serif;
  --font-header: "Libertinus Sans", "Calibri", sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --site-background-color: steelblue;
    --content-background-color: white;
    --content-foreground-color: black;
  }

  :link {
    color: #00e;
  }

  :visited {
    color: #551a8b;
  }

  :link:active, :visited:active {
    color: red;
  }

  blockquote {
    border-left: 5px solid #c1c9df;
  }

  .hljs {
    background-color: #f9fafc !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-background-color: #112354;
    --content-background-color: #202228;
    --content-foreground-color: white;
  }

  :link {
    color: #6495ed;
  }

  :visited {
    color: orchid;
  }

  :link:active, :visited:active {
    color: tomato;
  }

  blockquote {
    border-left: 5px solid #535865;
  }
}

code, pre, tt {
  font-family: "Libertinus Mono", Consolas, monospace;
  line-height: 1.25em;
}

body {
  font-family: var(--font-body);
  background-color: var(--site-background-color);
  margin: 0;
  padding: 0;
  line-height: 1.5em;
}

body > header, h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-header);
}

body > article, body > footer, body > header, body > nav {
  padding: var(--content-padding);
  color: var(--content-foreground-color);
  background-color: var(--content-background-color);
  border-radius: var(--content-radius);
  box-shadow: var(--content-shadow-offset) var(--content-shadow-offset)
    var(--content-shadow-radius) var(--content-shadow-color);
}

body > header {
  font-size: xx-large;
  font-weight: 700;
  line-height: 1.2em;
}

body > footer > p {
  text-align: center;
}

body > * :first-child {
  margin-top: 0;
}

body > * :last-child {
  margin-bottom: 0;
}

body > nav ol, body > nav ul {
  list-style-type: none;
  padding: 0;
}

blockquote {
  margin-left: 0.5em;
  margin-right: 1em;
  padding-left: 0.5em;
}

img[alt="Powered by DigitalOcean"] {
  width: 200px;
  aspect-ratio: 40/13;
}

img[alt="Codewars Profile Badge"] {
  width: 300px;
  height: 20px;
}

.portrait {
  aspect-ratio: 620/791;
}

.float-left, .portrait {
  float: left;
  margin-right: 0.4em;
}

@media screen and (min-width: 1001px) {
  p {
    text-align: justify;
  }

  body > article {
    width: calc(
      100% - var(--nav-width) - var(--content-padding) * 3 -
        var(--content-margin) * 4
    );
  }

  body > footer, body > header {
    margin: var(--content-margin);
  }

  body > article {
    margin-top: var(--content-margin);
    margin-left: var(--content-margin);
    margin-right: var(--content-margin);
  }

  body > nav {
    position: relative;
    right: var(--content-padding);
    float: right;
    width: var(--nav-width);
  }

  body > .clear-float, body > footer {
    clear: both;
  }

  body > .clear-float {
    display: flow-root;
  }

  .portrait {
    height: 200px;
  }

  .logo {
    width: 160px;
  }
}
@media screen and (max-width: 1000px) {
  body {
    font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1000 - 300)));
  }

  body > article, body > footer, body > header, body > nav {
    margin: var(--content-margin);
  }

  body > nav > ul {
    text-align: center;
    line-height: 2em;
  }

  body > nav li {
    display: inline flow-root list-item;
  }

  body > nav > ul > li:not(:last-child)::after {
    content: "|";
    margin: 0 0.4em;
    padding-left: 0.24em;
  }

  .portrait {
    height: calc(120px + (180 - 120) * ((100vw - 300px) / (1000 - 300)));
  }

  .logo {
    width: calc(130px + (130 - 80) * ((100vw - 300px) / (1000 - 300)));
  }

  img[alt="Codewars Profile Badge"] {
    width: 450px;
    height: 30px;
  }
}