/* colors */
/* typography */
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box; }

/*
  2. Remove default margin
*/
* {
  margin: 0; }

/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%; }

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; }

/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%; }

/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit; }

/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; }

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate; }

/* colors */
/* typography */
html {
  --header-background-color: #f7b303;
  --menu-text-color: #222222;
  --background-color: #fffefa;
  --foreground-color: #222222;
  --midtone-color: #666666;
  --link-color: #df2f0c;
  --img-filter: none; }

@media (prefers-color-scheme: dark) {
  html {
    --header-background-color: #f7b303;
    --background-color: #222222;
    --foreground-color: white;
    --midtone-color: #fffefa;
    --link-color: #ff724f;
    --img-filter: invert(0.865); } }

html {
  font-family: "Source Serif Pro", "Iowan Old Style", "Apple Garamond", "Palatino Linotype", "georgia", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  color: var(--foreground-color);
  background-color: var(--background-color); }
  html body {
    overflow-x: hidden;
    text-rendering: optimizeSpeed; }
  html p, html ul, html img {
    margin: 0 0 1rem 0;
    line-height: 1.6; }
    html p code, html ul code, html img code {
      background-color: #EEEEEE;
      padding: 0 0.2rem; }
  html h1, html h2, html h3, html h4, html h5, html h6 {
    margin: 0 0 1rem 0;
    font-family: Ubuntu, "Trebuchet MS", Verdana, sans-serif; }
  html figure, html pre {
    margin: 1rem 0; }
  html code {
    overflow-x: auto; }

/* colors */
/* typography */
/* colors */
/* typography */
nav#nav {
  min-width: 400px;
  overflow: hidden;
  display: block; }
  nav#nav ul {
    font-family: Ubuntu, "Trebuchet MS", Verdana, sans-serif;
    list-style: none;
    margin: 0.25rem 0 0 0;
    padding: 0; }
    nav#nav ul li {
      display: inline-block;
      margin: 0;
      padding: 0; }
      nav#nav ul li:first-of-type {
        margin: 0; }
      nav#nav ul li:last-of-type {
        margin: 0; }
      nav#nav ul li a, nav#nav ul li a:visited, nav#nav ul li a:active {
        display: inline-block;
        position: relative;
        padding: 0.5rem 1rem;
        color: var(--menu-text-color);
        text-decoration: none; }
        nav#nav ul li a.active, nav#nav ul li a:visited.active, nav#nav ul li a:active.active {
          background-color: var(--background-color);
          color: var(--foreground-color); }
        nav#nav ul li a:hover:after, nav#nav ul li a:visited:hover:after, nav#nav ul li a:active:hover:after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          margin: 0 auto;
          width: 0;
          height: 0;
          border-bottom: 0.5rem solid var(--background-color);
          border-left: 0.5rem solid transparent;
          border-right: 0.5rem solid transparent; }

header {
  background-color: var(--header-background-color);
  font-family: Ubuntu, "Trebuchet MS", Verdana, sans-serif;
  padding: 10px 0 0 0 !important;
  overflow-x: auto; }

/* colors */
/* typography */
/*
 * Original source: https://ryanmulligan.dev/blog/layout-breakouts/
 */
.content {
  font-family: "Source Serif Pro", "Iowan Old Style", "Apple Garamond", "Palatino Linotype", "georgia", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(100ch, 100% - var(--gap) * 2);
  --popout: minmax(0, 2rem);
  --feature: minmax(0, 5rem);
  display: grid;
  grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end]; }

.content > * {
  grid-column: content; }

.popout {
  grid-column: popout; }

.feature, article.content .highlight, main.content .highlight {
  grid-column: feature; }

.full, article.content div#portfolio, main.content div#portfolio {
  grid-column: full; }

/*
 * Other.
 */
article.content, main.content {
  padding: 2rem 0 1rem 0;
  /**
 * Hugo code block.
 */
  /*
   * List of posts.
   */ }
  article.content h1[aria-hidden="true"], main.content h1[aria-hidden="true"] {
    display: none; }
  article.content a, article.content a:visited, article.content a:active, main.content a, main.content a:visited, main.content a:active {
    color: var(--link-color);
    text-decoration: none; }
  article.content .metadata, main.content .metadata {
    font-size: 0.8rem;
    color: var(--midtone-color); }
    article.content .metadata + aside, main.content .metadata + aside {
      margin: 0 0 0.5rem 0; }
  article.content figure, main.content figure {
    justify-content: center;
    align-content: center;
    display: flex;
    flex-direction: column; }
    article.content figure img, main.content figure img {
      margin: 0 auto 1rem auto; }
    article.content figure img.dark-enabled, main.content figure img.dark-enabled {
      filter: var(--img-filter); }
    article.content figure figcaption, main.content figure figcaption {
      text-align: center;
      color: var(--midtone-color);
      font-size: 0.8rem; }
  article.content blockquote, main.content blockquote {
    color: #666666;
    margin: 0 1rem 1rem 1rem; }
    article.content blockquote p, main.content blockquote p {
      display: inline; }
  article.content blockquote:before, main.content blockquote:before {
    content: open-quote; }
  article.content blockquote:after, main.content blockquote:after {
    content: close-quote; }
  article.content div.landing-page img#kinow-photo, main.content div.landing-page img#kinow-photo {
    filter: grayscale(100%); }
    article.content div.landing-page img#kinow-photo:hover, main.content div.landing-page img#kinow-photo:hover {
      filter: none; }
    @media (max-width: 380px) {
      article.content div.landing-page img#kinow-photo, main.content div.landing-page img#kinow-photo {
        width: auto;
        margin: 0 auto; } }
    @media (min-width: 380px) {
      article.content div.landing-page img#kinow-photo, main.content div.landing-page img#kinow-photo {
        max-height: 200px;
        float: right;
        margin: 0 auto .5rem auto;
        padding-left: .5rem;
        border-radius: 0; } }
  article.content code, article.content pre, main.content code, main.content pre {
    font-family: "Noto Sans Mono", "Ubuntu Mono", "Courier New", monospace;
    font-size: 0.8rem; }
  article.content .highlight, main.content .highlight {
    margin: 0 0 1rem 0;
    justify-content: center;
    align-items: center;
    border: 1px solid #c8c8c8; }
    article.content .highlight div table tbody tr td:first-of-type, main.content .highlight div table tbody tr td:first-of-type {
      border-right: 1px solid #c8c8c8 !important; }
      article.content .highlight div table tbody tr td:first-of-type pre, main.content .highlight div table tbody tr td:first-of-type pre {
        padding: 0 0.2rem !important; }
    article.content .highlight pre, main.content .highlight pre {
      font-family: "Noto Sans Mono", "Ubuntu Mono", "Courier New", monospace;
      font-size: 0.8rem;
      padding: 0 1rem;
      /*overflow-x: scroll;
      white-space: pre;*/
      /* border: 1px solid rgb(200, 200, 200); */
      /* border-radius: 12px; */ }
  article.content div#portfolio, main.content div#portfolio {
    display: flex;
    flex-flow: row wrap;
    padding: .5vw;
    align-content: center;
    align-items: center;
    justify-content: center; }
    article.content div#portfolio img, main.content div#portfolio img {
      flex: auto;
      object-fit: contain;
      max-width: 450px;
      width: auto;
      height: auto;
      margin: .5vw; }
  article.content .post-link, main.content .post-link {
    margin: 0 0 0.5rem 0; }
    article.content .post-link .metadata, main.content .post-link .metadata {
      font-size: 0.8rem; }
  article.content aside.links, main.content aside.links {
    display: flex; }
    article.content aside.links *:nth-child(2), main.content aside.links *:nth-child(2) {
      display: flex;
      margin-left: auto; }

/*
 * Search
 */
search {
  margin: 0 0 1rem 0; }
  search form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0; }
    search form input {
      flex-grow: 1;
      border-radius: 10px 0 0 10px;
      height: 2rem;
      padding: 0 0.5rem;
      border: 1px solid #AAAAAA;
      border-right: 0 none; }
      search form input:focus-visible {
        border: 1px solid #000000;
        border-right: 0 none;
        outline: none; }
    search form button {
      flex-grow: 0.25;
      border-radius: 0 10px 10px 0;
      height: 2rem;
      padding: 0;
      cursor: pointer;
      border: 1px solid #AAAAAA;
      border-left: 0 none; }

footer {
  display: inline-block;
  width: 100%;
  padding: 0 1rem; }
  footer ul#social-media-icons {
    display: inline-block;
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 1rem 0 1rem 0;
    padding: 0; }
    footer ul#social-media-icons li {
      display: inline-block;
      margin: 0;
      padding: 0; }
      @media (prefers-color-scheme: dark) {
        footer ul#social-media-icons li img {
          filter: invert(0.5); } }
    footer ul#social-media-icons li:not(:last-child) {
      margin-right: 0.5rem; }

@media print {
  * {
    font-size: 1rem !important; }
  .content > * {
    grid-column: feature !important; }
  header {
    display: none !important; }
  h1[aria-hidden="true"] {
    display: block !important; }
  search {
    display: none !important; }
  footer {
    display: none !important; } }