html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

h1 {
  margin-top: 0;
  max-width: 80ch;
}

:is(h2, h3) {
  scroll-margin-top: 0.5rem;
}

:is(h2, h3) a:hover {
  text-decoration: revert;
}

.toc-list {
  list-style: none;
  border-left: 0.25rem solid var(--color-blockquote-border);
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
  margin: 0 0 0 0.25rem;
  padding: 0.25rem 0 0.25rem 0.5rem;
}

pre {
  overflow-x: auto;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: var(--color-pre-bg);
  border: 1px solid var(--color-pre-border);
  color: var(--color-text);
}

code {
  background: var(--color-inline-code-bg);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

blockquote {
  margin: 0;
  padding-left: 0.5rem;
  border-left: 0.25rem solid var(--color-blockquote-border);
  color: var(--color-text);
  opacity: 0.85;
}

.callout {
  padding: 0.5rem;
  border-radius: 0 0.25rem 0.25rem 0;
  border-left: 0.25rem solid;
}

.callout :first-child {
  margin-top: 0;
}

.callout :last-child {
  margin-bottom: 0;
}

.callout-warning {
  background: var(--color-callout-warning-bg);
  border-color: var(--color-callout-warning-border);
}

.callout-info {
  background: var(--color-callout-info-bg);
  border-color: var(--color-callout-info-border);
}

.anchor-icon-link {
  text-decoration: none;
}

.anchor-icon {
  height: 0.9em;
  stroke-width: 1.67;
  vertical-align: middle;
}

#article-metadata {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem 1rem;
}

#table-of-contents {
  max-width: 30ch;
}

article > p {
  max-width: 65ch;
}

@media (width >= 40em) {
  body {
    display: grid;
    grid-template:
      'top-row top-row top-row' 2rem
      'heading heading heading' auto
      '. meta .' auto
      '. toc .' auto
      '. content .' auto
      '. footer .' auto / 1fr minmax(60ch, 65ch) 1fr;
    gap: 0.5rem 1rem;
  }

  #top-row {
    grid-area: top-row;
  }

  body header {
    grid-area: heading;
  }

  h1 {
    text-align: center;
  }

  #article-metadata {
    grid-area: meta;
  }

  #table-of-contents {
    grid-area: toc;
  }

  main {
    grid-area: content;
  }

  #contacts {
    grid-area: footer;
    margin-top: 1.5rem;
  }

  article {
    margin-bottom: 25vh;
  }
}

@media (width >= 80em) {
  body {
    padding-left: 2rem;
    display: grid;
    grid-template:
      '. top-row top-row top-row .' 2rem
      '. heading heading heading .' auto
      'toc toc meta . .' auto
      'toc toc content . .' auto
      '. . footer . .' auto
      / 1fr minmax(0, 10rem) 65ch minmax(0, 10rem) 1fr;
  }

  #table-of-contents {
    place-self: start end;
    position: sticky;
    top: 0.5rem;
  }

  #table-of-contents h2 {
    margin-top: 0;
  }

  article > :first-child {
    margin-top: 0;
  }
}

.language-java .syn-comment,
.language-java .syn-javadoc {
  color: #6a9955;
}

.language-java .syn-keyword {
  color: #c586c0;
}

.language-java .syn-string {
  color: #ce9178;
}

.language-java .syn-number {
  color: #b5cea8;
}

.language-java .syn-annotation {
  color: #d7ba7d;
}

.language-java .syn-type {
  color: #4ec9b0;
}

.language-java .syn-method {
  color: #dcdcaa;
}

.language-java .syn-constant {
  color: #569cd6;
}

.language-shell .syn-comment {
  color: #6a9955;
  font-style: italic;
}

.language-shell .syn-command {
  color: #4ec9b0;
  font-weight: 500;
}

.language-shell .syn-string {
  color: #ce9178;
}

.language-shell .syn-variable {
  color: #569cd6;
}

.shell-debug {
  color: #8a8a8a;
}

.shell-warning {
  color: #c8b84f;
}

.shell-error {
  color: #c01c28;
}

.language-xml .syn-comment {
  color: #6a9955;
  font-style: italic;
}

.language-xml .syn-tag {
  color: #569cd6;
}

.language-xml .syn-attr {
  color: #ce9178;
}

.language-xml .syn-string {
  color: #ce9178;
}

.language-xml .syn-punctuation {
  color: #808080;
}

.language-xml .syn-doctype {
  color: #d7ba7d;
}

.language-xml .syn-entity {
  color: #c586c0;
}

.language-xml .syn-cdata {
  color: #b5cea8;
}

.language-xml .syn-pi {
  color: #808080;
  font-style: italic;
}

@media (prefers-color-scheme: light) {
  .language-java .syn-comment,
  .language-java .syn-javadoc {
    color: #656d76;
  }

  .language-java .syn-keyword {
    color: #cf222e;
  }

  .language-java .syn-string {
    color: #0a3069;
  }

  .language-java .syn-number {
    color: #0550ae;
  }

  .language-java .syn-annotation {
    color: #8250df;
  }

  .language-java .syn-type {
    color: #0550ae;
  }

  .language-java .syn-method {
    color: #8250df;
  }

  .language-java .syn-constant {
    color: #953800;
  }

  .language-shell .syn-comment {
    color: #656d76;
    font-style: italic;
  }

  .language-shell .syn-command {
    color: #0550ae;
    font-weight: 500;
  }

  .language-shell .syn-string {
    color: #0a3069;
  }

  .language-shell .syn-variable {
    color: #953800;
  }

  .shell-debug {
    color: #656d76;
  }

  .shell-warning {
    color: #7d4e00;
  }

  .shell-error {
    color: #cf222e;
  }

  .language-xml .syn-comment {
    color: #656d76;
    font-style: italic;
  }

  .language-xml .syn-tag {
    color: #0550ae;
  }

  .language-xml .syn-attr {
    color: #0a3069;
  }

  .language-xml .syn-string {
    color: #0a3069;
  }

  .language-xml .syn-punctuation {
    color: #656d76;
  }

  .language-xml .syn-doctype {
    color: #8250df;
  }

  .language-xml .syn-entity {
    color: #cf222e;
  }

  .language-xml .syn-cdata {
    color: #0550ae;
  }

  .language-xml .syn-pi {
    color: #656d76;
    font-style: italic;
  }
}