/** --- Reset --- */

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/** --- End reset --- */

/* --- Global tokens --- */

:root {
  --space0: 4px;
  --space1: 8px;
  --space2: 12px;
  --space3: 16px;
  --space4: 28px;
  --space5: 36px;
  --space6: 56px;
  --space7: 80px;
  --space8: 100px;

  --content-max-width: 1000px;

  color-scheme: light dark; /* both supported */
}

.theme-blue {
  --slate1: hsl(206 30% 98.8%);
  --slate2: hsl(210 16.7% 97.6%);
  --slate3: hsl(209 13.3% 95.3%);
  --slate4: hsl(209 12.2% 93.2%);
  --slate5: hsl(208 11.7% 91.1%);
  --slate6: hsl(208 11.3% 88.9%);
  --slate7: hsl(207 11.1% 85.9%);
  --slate8: hsl(205 10.7% 78%);
  --slate9: hsl(206 6% 56.1%);
  --slate10: hsl(206 5.8% 52.3%);
  --slate11: hsl(206 6% 43.5%);
  --slate12: hsl(206 24% 9%);

  --body-background: #fff;
}

.theme-blue.dark-mode {
  --slate1: hsl(200 7% 8.8%);
  --slate2: hsl(195 7.1% 11%);
  --slate3: hsl(197 6.8% 13.6%);
  --slate4: hsl(198 6.6% 15.8%);
  --slate5: hsl(199 6.4% 17.9%);
  --slate6: hsl(201 6.2% 20.5%);
  --slate7: hsl(203 6% 24.3%);
  --slate8: hsl(207 5.6% 31.6%);
  --slate9: hsl(206 6% 43.9%);
  --slate10: hsl(206 5.2% 49.5%);
  --slate11: hsl(206 6% 63%);
  --slate12: hsl(210 6% 93%);

  --body-background: var(--slate1);
}

/* --- End global tokens --- */

body {
  -webkit-font-smoothing: antialiased;
  font-family: SOEHNE_BUCH, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 16px;
  line-height: 25px;
  color: var(--slate12);
  overscroll-behavior: none;
  overflow-y: scroll;

  padding-left: var(--space3);
  padding-right: var(--space3);

  max-width: 100%;
  overflow-x: hidden;

  background-color: var(--body-background);
}

::selection {
  background: var(--blue6);
}

main {
  padding-bottom: var(--space8);
}

/** --- Header --- */

.site-header {
  display: flex;
  max-width: var(--content-max-width);
  justify-content: space-between;
  margin: auto;
  margin-top: var(--space3);
  border-radius: 4px;

  flex-direction: column;
  align-items: center;
}

@media only screen and (min-width: 600px) {
  .site-header {
    flex-direction: row;
    align-items: normal;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  position: relative;
}

.site-header a {
  color: var(--blue12);
  padding: var(--space0) var(--space3);
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 0.9em;
}

@media (hover: hover) {
  .site-header a:hover {
    border-radius: 4px;
    background-color: var(--slate4);
    background: linear-gradient(20deg, var(--slate3), var(--slate4));
  }

  .dark-mode .site-header a:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.site-header a.logo {
  font-size: 1em;
  padding-top: var(--space2);
  padding-bottom: var(--space2);
  border-radius: 5px;
  position: relative;
  letter-spacing: 0.5px;
}
@media only screen and (min-width: 600px) {
  .site-header a.logo {
    margin-left: calc(-1 * var(--space3));
  }
}

.logo-avatar img {
  display: block;
  margin-right: var(--space3);
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.dark-mode-switcher {
  background-color: transparent;
  border: none;
  outline: none;
  padding: var(--space2);

  border-radius: 4px;
  width: 42px;
  height: 42px;
  color: var(--blue12);
  margin-left: var(--space3);
}
@media only screen and (min-width: 600px) {
  .dark-mode-switcher {
    margin-right: calc(-1 * var(--space2));
  }
}

@media (hover: hover) {
  .dark-mode-switcher:hover {
    background-color: var(--blue12);
    color: var(--blue1);
  }
}

.dark-mode-switcher svg {
  width: 100%;
  height: 100%;
}

.dark-mode .sun-icon {
  display: none;
}
.moon-icon {
  display: none;
}
.dark-mode .moon-icon {
  display: block;
}

/** --- Article --- */

article {
  max-width: var(--content-max-width);
  margin: auto;
}

.article-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--space3);
  margin-bottom: var(--space5);
}
@media only screen and (min-width: 600px) {
  .article-header {
    padding-top: var(--space3);
    margin-top: var(--space6);
    margin-bottom: 40px;
  }
}

/** --- Headlines --- */

h1 {
  max-width: 690px;
  font-size: 1.9em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';
  font-weight: 200;
  letter-spacing: -0.2px;
  line-height: 1.05;
  color: var(--blue12);
  border-radius: 6px 6px 6px 0;

  margin-left: -1px;

  position: relative;
}
@media only screen and (min-width: 600px) {
  h1 {
    font-size: 2.25em;
  }
}

.by-line {
  margin-top: var(--space1);
  margin-left: 0.5px;
  font-size: 0.8em;
  color: var(--slate11);
  letter-spacing: 1px;
}

h2 {
  font-size: 1.5em;
  color: var(--blue12);
  margin-top: var(--space6);
  margin-bottom: var(--space3);
  letter-spacing: -0.3px;
  line-height: 1.05;
  font-weight: 200;
}
@media only screen and (min-width: 600px) {
  h2 {
    font-size: 1.6em;
    margin-top: var(--space7);
    margin-bottom: var(--space4);
  }
}

h3 {
  font-size: 1.1em;
  color: var(--slate12);
  margin-top: var(--space5);
  margin-bottom: var(--space1);
  letter-spacing: -0.1px;
  font-weight: 500;
}
@media only screen and (min-width: 600px) {
  h3 {
    font-size: 1.25em;
  }
}

h2 + p,
h3 + p,
p:first-of-type {
  margin-top: 0;
}

/** --- Link --- */

p a {
  color: var(--blue12);
  text-decoration: none;
  padding-bottom: 1px;
  box-shadow: 0px 1px 0px 0px var(--blue8);
  /* border-bottom: 1px solid var(--blue8); */
  /* border-top: 1px solid transparent; */
}

@media (hover: hover) {
  p a:hover {
    color: var(--slate1);
    background: linear-gradient(70deg, var(--blue11), var(--blue10));
    box-shadow: none;
    border-radius: 2px;
  }
}

/** --- Paragraph --- */

p {
  margin-top: var(--space4);
  margin-bottom: var(--space4);
  letter-spacing: 0.2px;
  font-size: 1em;
  max-width: 720px;
}

@media only screen and (min-width: 600px) {
  p {
    margin-top: var(--space4);
    margin-bottom: var(--space4);
  }
}

/** --- Lists --- */
ol {
  padding-left: var(--space3);
  max-width: 720px;
}

li {
  margin-top: var(--space4);
  margin-bottom: var(--space4);
}

/** --- Image --- */

article img {
  display: block;
  border-radius: 5px;
  margin-top: var(--space6);
  margin-bottom: var(--space6);
}

p code {
  font-family: SOEHNE_MONO_BUCH, -ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;
  font-size: 0.9em;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
  border: 1px solid var(--slate6);
  border-radius: 4px;
  background-color: var(--slate2);
  color: var(--blue11);
}

/** --- Footer --- */

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--space6);
}