/* #### Fonts #### */

@font-face {
  font-family: "MackayBold";
  src: url('../fonts/mackaybold.woff2') format('woff2'););
  font-display: swap;
}

  /**
  * This is a variable font
  * You can controll variable axes as shown below:
  * font-variation-settings: 'wght' 700.0;
  *
  * available axes:

  * 'wght' (range from 200.0 to 700.0)

  */

@font-face {
  font-family: 'GeneralSans-Variable';
  src: url('../fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

  /**
  * This is a variable font
  * You can controll variable axes as shown below:
  * font-variation-settings: 'wght' 700.0;
  *
  * available axes:

  * 'wght' (range from 200.0 to 700.0)

  */

@font-face {
  font-family: 'GeneralSans-VariableItalic';
  src: url('../fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
  url('../fonts/GeneralSans-VariableItalic.woff') format('woff');
  font-weight: 200 700;
  font-display: swap;
  font-style: italic;
}

/* #### Variables #### */

:root {
  --font-serif: 'MackayBold', georgia, serif;
  --font-humanist: 'GeneralSans-Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-humanist-italic: 'GeneralSans-VariableItalic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* #### Base & Layout #### */

:root {
  --brand-bg: #fff;
  --brand-accent: #1B75BC;
  --brand-fontcolor: #151515;
  --brand-footer-fontcolor: var(--brand-bg);
  --warning-old-bg-color: #fcf2f2;
  --warning-old-color: var(--brand-fontcolor);


  --font-serif: 'MackayBold', georgia, serif;
  --font-sansserif: 'GeneralSans-Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-sansserif-italic: 'GeneralSans-VariableItalic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-boldvalue: 600;
}

html {
  scroll-padding: 2em;
}

body {
  background-color: var(--brand-bg);
  color: var(--brand-fontcolor);
  font-family: var(--font-sansserif);
  line-height: 1.75;
  grid-template-rows: repeat(3, auto);
  margin: 0;
  padding: 1rlh 0 0 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 1rem;

  @media (width >= 800px) {
    line-height: 1.95;
  }

  @media (width >= 400px) {
    padding: 2rlh 0 0 0;
    font-size: 1.15rem;
  }
}

.wrapper {
  margin: 0 auto;
  max-width: 120ch;
}

.warning-old-post {
  margin-bottom: 1em;
  padding: 1em;
  background-color: var(--warning-old-bg-color);
  color: var(--warning-old-color);
  border: 1px solid pink;
}



strong {
  font-weight: var(--font-boldvalue);
}

a {
  color: var(--brand-accent);
  font-weight: var(--font-boldvalue);
}




/* #### Titles #### */

.home-title, .page-title {
  margin-block-end: 1rlh;
  position: relative;


  &:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    background-color: var(--brand-accent);
    width: 50%;
    height: 4px;
  }
}


.page-title {
  margin-block-end: 3rlh;
  padding-block-end: 1rlh;
  font-size: 1.5rem;

  @media (width >= 400px) {
    font-size: 2em;
    line-height: 1.5;
  }

  @media (width >= 800px) {
    font-size: 2.5rem;
    padding-block-start: 2.5rlh;
    padding-inline-end: 5em;
  }
}


.home-title {

  h1 {
    font-size: 2.625rem;
    line-height: 1.2;
    margin: .24125em 0 1rlh 0;
  }

  p {
    font-weight: 500;
    margin-block-end: 2rlh;
    padding-block-end: 1rlh;

    @media (width >= 600px) {
      text-align: right;
      text-indent: 33%;
    }

    @media (width >= 800px) {
      padding-block-end: 2rlh;
    }
  }

  a {
    color: var(--brand-fontcolor);
  }
}

@media (width >= 600px) {
  .page-title:after { width: 12ch;}
}

@media (width >= 600px) {
  .home-title:after { width: 30ch;}
}

h1 {
  font-size: 2.5rem;
  line-height: 1.2;
}


header, main, footer {
  padding: 0 1rlh;

  @media (width >= 600px) {
    padding: 0 2rlh 2rlh 2rlh;
  }
}

.portrait {
  border-radius: 50%;
  float: right;
  margin: 0 0 1rlh 1rlh;
}


/* #### Typo #### */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;

  html[data-simpleheadlines="true"] & {
    font-family: var(--font-humanist);
    font-weight: 800;
  }
}


/* #### Header #### */

.sitename {
  font-family: var(--font-sansserif);
  font-weight: var(--font-boldvalue);

  @media (width >= 800px) {
    float: left;
  }

  a {
    padding: 0;
    line-height: 1rlh;
    display: block;
    text-decoration: none;
  }
}


/* #### Main navigation #### */

.main-menu {

  @media (width >= 800px) {
    float: right;
    display: block;
  }

  ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 1rlh 0 2rlh 0;
    font-weight: var(--font-boldvalue);

    @media (width >= 800px) {
      margin-block-start: 0;
    }

    li {
      line-height: 1rlh;
    }

    a {
      color: var(--brand-fontcolor);
      text-decoration: none;
      text-transform: lowercase;
      margin-inline-end: 1em;

      &[aria-current="page"], &[data-active] {
        text-decoration: underline;
      }
    }
  }
}

/* #### Template: Article #### */

blockquote {
  margin: 1.25rem 0;
  padding-inline-start: 2em;
  background-image: url(../images/quote.svg);
  background-repeat: no-repeat;
  background-size: 1em 1em;
  background-position: 0 .5em;

  [data-cursivequotes="true"] & {
    font-style: italic;
  }
}

.tag-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 .5ch;
  display: inline;

  li {
    display: inline-block;
    margin: 0 .5ch 0 0;
    font-style: italic;

    a {
      font-weight: 400;
    }
  }
}

.meta-bottom {
  position: relative;
  padding-top: 1rlh;
  margin-top: 2rlh;

  &:after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background-color: var(--brand-fontcolor);
    width: 50%;
    height: 4px;
  }
}

[data-template="article"] {

  h2, h3 {
    line-height: 1.2;
    margin-block-end: 0;
    margin-block-start: 1.5rlh;
  }

  h2 {
    font-size: 1.5rem;
  }

  h2 + h3, h2 + p {
    margin-block-start: 0.5rlh;
  }
}


/* #### Templates: Blog and Home #### */

.reading-room {
  display: none;

  @media (width >= 600px) {
    display: block;
  }
}

.article-date {
  font-style: italic;
}

.article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-teaser__title {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-block-end: .5rlh;
}

.article-list__item {
  margin-block-end: 3rlh;
}

.pagination, footer ul {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    padding: 0;
    margin: 0;
  }
}

.latest-blog-posts-headline {
  font-family: var(--font-sansserif);
  text-align: right;
  display: block;
  font-size: 1rem;

  a {
    font-weight: 500;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}


/* #### Footer #### */

footer {
  background-color: var(--brand-accent);
  margin-block-start: 4rlh;
  padding-block-start: .5rlh;
  padding-block-end: 2rlh;

  &, a {
    color: var(--brand-footer-fontcolor);
  }

  h2 {
    margin-block-end: 0;

    & + p {
      margin-block-start: 0;
    }
  }
}


/* #### Code styles #### */




pre {
  font-size: 1.15em !important;
  white-space: pre-wrap;
}

/* #### Helper #### */

.local-hint {
  display: block;
  position: absolute;
  right: 50%;
  top: 0;
  background: red;
  color: white;
  padding: .25em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: rect(0, 0, 0, 0);
  border: 0;
}



/* #### Third Party #### */

/* a11y-dark theme */
/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
/* @author: ericwbailey */

/* Comment */
.hljs-comment,
.hljs-quote {
  color: #d4d0ab;
}

/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
  color: #ffa07a;
}

/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  color: #f5ab35;
}

/* Yellow */
.hljs-attribute {
  color: #ffd700;
}

/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: #abe338;
}

/* Blue */
.hljs-title,
.hljs-section {
  color: #00e0e0;
}

/* Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: #dcc6e0;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: #2b2b2b;
  color: #f8f8f2;
  padding: 0.5em;
}

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

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

@media screen and (-ms-high-contrast: active) {
  .hljs-addition,
  .hljs-attribute,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-bullet,
  .hljs-comment,
  .hljs-link,
  .hljs-literal,
  .hljs-meta,
  .hljs-number,
  .hljs-params,
  .hljs-string,
  .hljs-symbol,
  .hljs-type,
  .hljs-quote {
    color: highlight;
  }

  .hljs-keyword,
  .hljs-selector-tag {
    font-weight: bold;
  }
}

/* #### Third Party EMD #### */

pre code.hljs {
padding: .5em 1em;
}

code {
  background: #6b6a6a;
  padding: .125em .25em;
  margin: 0 .15em;
  color: #fff;
  border-radius: 5px;
}

#settings_button, #settings_save {
  color: inherit;
  border: 1px solid;
  background: none;
  border-radius: 5px;
  padding: .25rem .5rem;
  font-family: var(--font-humanist);
  font-size: 1rem;
  margin-block-end: 1rlh;
}

h2:has(#settings_button[aria-expanded="true"]) + form {
  display: block;
}

h2:has(#settings_button[aria-expanded="false"]) + form {
  display: none;
}


h2:has(#settings_button) + form {
  line-height: 1.5rlh;

  fieldset {
    border: none;
    padding: 0 0 1rlh 0;
  }

  input[type="radio"] {
    accent-color: var(--brand-fontcolor);
    width: 1.15rem;
    height: 1.15rem;
  }

  input[type="checkbox"] {
    accent-color: var(--brand-fontcolor);
    width: 1.15rem;
    height: 1.15rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-fontcolor: #e5e5e5;
    --brand-bg: #2b2b2b;
    --brand-accent: #9a9afc;
    --brand-footer-fontcolor: var(--brand-bg);
    --warning-old-color: var(--brand-bg);
  }
  blockquote {
    background-image: url(../images/quote-ondark.svg);
  }
}

[data-theme-preference="dark"] {
    --brand-fontcolor: #e5e5e5;
    --brand-bg: #2b2b2b;
    --brand-accent: #9a9afc;
    --brand-footer-fontcolor: var(--brand-bg);
    --warning-old-color: var(--brand-bg);

  blockquote {
    background-image: url(../images/quote-ondark.svg);
  }
}

[data-theme-preference="light"] {
  --brand-bg: #fff;
  --brand-accent: #1B75BC;
  --brand-fontcolor: #151515;
  --brand-footer-fontcolor: var(--brand-bg);
  --warning-old-bg-color: #fcf2f2;
  --warning-old-color: var(--brand-fontcolor);

  blockquote {
    background-image: url(../images/quote.svg);
  }
}