blog/resources/_gen/assets/sass/styles.scss_f3a5364e991a57c56f5dcd8d7251924a.content

:root {
  --color-brand: #333333;
  --color-brand-alt: #999999;
  --color-brand-light: #cccccc;
  --color-brand-dark: #666666;
  --color-text: #000;
  --color-text-bg: #fff;
  --color-text-meta: #666666;
  --color-link: #333333;
  --color-link-visited: #333333;
  --color-link-hover: #999999;
  --color-link-active: #c00;
  --color-link-inverted: #fff;
  --color-link-visited-inverted: #fff;
  --color-link-hover-inverted: #fff;
  --color-link-active-inverted: #c00;
  --color-border: #333333;
  --color-border-light: #cccccc;
  --color-border-dark: #666666;
  --color-autocomplete: #000;
  --color-autocomplete-bg: #fff;
  --color-autocomplete-select: #fff;
  --color-autocomplete-select-bg: #0072b9;
  --color-body-bg: #fff;
  --color-header-bg: #fff;
  --color-footer-bg: #fff;
  --color-backdrop: #eeeeee;
  --color-mobile-menu: #333333;
  --color-mobile-menu-cover: rgba(0, 0, 0, 0.2);
  --color-button: #333333;
  --color-button-hover: #999999;
  --color-button-text: #fff;
  --color-button-text-hover: #fff;
  --color-button-disabled: #999999;
  --color-mark-highlight: #c00;
  --color-mark-bg: #fd0;
  --color-menu-active: #000;
  --color-preview-bg: #fffadb;
  --color-row-header: transparent;
  --color-row-odd: #f7f7f7;
  --color-row-even: transparent;
  --color-status: #43a808;
  --color-status-bg: #f4feee;
  --color-warning: #000;
  --color-warning-bg: #fffce6;
  --color-warning-border: #fd0;
  --color-error: #c00;
  --color-error-bg: #fff0f0;
  --color-watermark: #eeeeee;
  --color-headings: #333333;
  --color-code: #333333;
  --color-highlight: #999999;
  --fs-xxxxl: 3rem;
  --fs-xxxl: 2.5rem;
  --fs-xxl: 2rem;
  --fs-xl: 1.5rem;
  --fs-l: 1.25rem;
  --fs-m: 1rem;
  --fs-s: 0.889rem;
  --fs-xs: 0.778rem;
  --fw-headings: 700;
  --fw-bolder: 900;
  --fw-bold: 700;
  --fw-medium: 500;
  --fw-normal: 400;
  --fw-light: 300;
  --fw-lighter: 200;
  --ff-body: ui-serif, Charter, Bitstream Charter, Sitka Text, Cambria, serif;
  --ff-headings: ui-sans-serif, system-ui, sans-serif;
  --ff-alt: system-ui, sans-serif;
  --ff-monospace: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
  --radius-xl: 1rem;
  --radius-l: 0.75rem;
  --radius-m: 0.5rem;
  --radius-s: 0.3rem;
  --radius-xs: 0.125rem;
  --breakout: calc(5px + 1.5625vw);
  --gutters-reverse: calc(0px - (5px + 1.5625vw));
  --gutters: calc(5px + 1.5625vw);
  --heading-line-height: 1.3;
  --indent-amount: 2rem;
  --max-content-width: 1111px;
  --max-line-width: 70ch;
  --max-page-width: 1111px; }

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  min-height: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

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

body {
  margin: 0;
  padding: 0; }

img,
svg,
picture,
audio,
video,
canvas,
iframe,
embed,
object {
  display: block; }

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

figure {
  margin-inline: 0; }

input,
button,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit; }

@media (min-width: 666px) {
  [type='search'] {
    -webkit-appearance: textfield; } }

code,
kbd,
samp {
  font-family: var(--ff-monospace); }

html {
  font-family: var(--ff-body);
  font-size: calc(18 / 16 * 100%);
  line-height: 1.5;
  color: var(--color-text); }

form {
  margin-block: 0 1.5rem; }

input,
textarea,
select {
  margin-block: 0 1.5rem; }

label {
  display: block;
  font-weight: var(--fw-bold); }
  label:has(+ :required)::after {
    content: '*';
    color: var(--color-mark-highlight); }

input,
label,
textarea,
select {
  max-width: var(--max-line-width); }

fieldset {
  border: 1px solid var(--color-border); }

input {
  width: Min(20em, 100%); }

[type='text'],
textarea {
  width: Min(30em, 100%); }

input:not(:only-of-type) + [type='submit'],
textarea + [type='submit'] {
  display: block; }

@media (min-width: 666px) {
  input:only-of-type:has(+ [type='submit']) {
    margin-right: .5rem; } }

blockquote {
  margin-block: 0 1.5rem;
  margin-inline: var(--indent-amount); }

dl,
ol,
ul,
menu {
  margin-block: 0 1.5rem; }

dd {
  margin: 0;
  margin-inline-start: var(--indent-amount); }

ol,
ul,
menu {
  padding: 0;
  padding-inline-start: var(--indent-amount); }
  ol ol,
  ol ul,
  ol menu,
  ul ol,
  ul ul,
  ul menu,
  menu ol,
  menu ul,
  menu menu {
    margin: 0; }

.main li {
  max-width: var(--max-line-width); }

header {
  margin-block: 0 0.495rem; }

hr {
  height: 0; }

p {
  margin-block: 0 1.5rem;
  text-wrap: pretty; }
  .main p {
    max-width: var(--max-line-width); }

pre {
  margin-block: 0 1.5rem;
  font-family: var(--ff-monospace); }

code:not([data-lang]),
kbd,
samp {
  color: var(--color-code); }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 1.5em 0.495em;
  color: var(--color-headings);
  font-family: var(--ff-headings);
  font-weight: var(--fw-headings);
  line-height: var(--heading-line-height);
  text-wrap: balance; }
  h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6,
  h2 + h1,
  h2 + h2,
  h2 + h3,
  h2 + h4,
  h2 + h5,
  h2 + h6,
  h3 + h1,
  h3 + h2,
  h3 + h3,
  h3 + h4,
  h3 + h5,
  h3 + h6,
  h4 + h1,
  h4 + h2,
  h4 + h3,
  h4 + h4,
  h4 + h5,
  h4 + h6,
  h5 + h1,
  h5 + h2,
  h5 + h3,
  h5 + h4,
  h5 + h5,
  h5 + h6,
  h6 + h1,
  h6 + h2,
  h6 + h3,
  h6 + h4,
  h6 + h5,
  h6 + h6 {
    margin-block-start: 0.75em; }
  .main h1, .main h2, .main h3, .main h4, .main h5, .main h6 {
    max-width: var(--max-line-width); }

h1 {
  margin-block: 1.5rem 0.75rem;
  font-size: var(--fs-xxl);
  letter-spacing: -.01em; }

h2 {
  font-size: var(--fs-xl);
  letter-spacing: -.01em; }

h3 {
  font-size: var(--fs-l);
  letter-spacing: -.01em; }

h4 {
  font-size: var(--fs-m); }

h5 {
  font-size: var(--fs-s); }

h6 {
  font-size: var(--fs-xs); }

figure.image,
img.image {
  --image-padding: .75rem; }
  @media (min-width: 666px) {
    figure.image.center,
    img.image.center {
      margin-inline: auto; }
    figure.image.left,
    img.image.left {
      padding-inline-end: var(--image-padding);
      padding-block-end: var(--image-padding);
      margin: 0;
      float: left;
      clear: both; }
    figure.image.right,
    img.image.right {
      padding-inline-start: var(--image-padding);
      padding-block-end: var(--image-padding);
      margin: 0;
      float: right;
      clear: both; } }
figure {
  margin-block: 0 1.5rem; }
  figure.image figcaption {
    padding-block-start: var(--image-padding); }
    @media (min-width: 666px) {
      figure.image figcaption {
        display: table-caption;
        caption-side: bottom;
        padding-block-start: 0; } }
    figure.image figcaption p {
      margin: 0; }
  @media (min-width: 666px) {
    figure.image {
      display: table; }
      figure.image.left figcaption {
        padding-inline-end: var(--image-padding);
        padding-block-end: var(--image-padding); }
      figure.image.right figcaption {
        padding-inline-start: var(--image-padding);
        padding-block-end: var(--image-padding); } }
  figure.podcast audio {
    width: 95%; }

img.image {
  margin-block: 0 1.5rem; }

a {
  color: var(--color-link); }

:visited {
  color: var(--color-link-visited); }

a:hover,
a:focus {
  color: var(--color-link-hover); }

a:active {
  color: var(--color-link-active); }

[aria-current] {
  text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--gutters); } }

.link-nav a,
.pagination a,
.pager a {
  text-decoration: none; }
  .link-nav a:hover, .link-nav a:focus,
  .pagination a:hover,
  .pager a:hover,
  .pagination a:focus,
  .pager a:focus {
    text-decoration: underline; }

.link-inverted a,
.card--inverted a,
.box--inverted a {
  color: var(--color-link-inverted); }
  .link-inverted a:visited,
  .card--inverted a:visited,
  .box--inverted a:visited {
    color: var(--color-link-visited-inverted); }
  .link-inverted a:hover, .link-inverted a:focus,
  .card--inverted a:hover,
  .box--inverted a:hover,
  .card--inverted a:focus,
  .box--inverted a:focus {
    color: var(--color-link-hover-inverted); }
  .link-inverted a:active,
  .card--inverted a:active,
  .box--inverted a:active {
    color: var(--color-link-active-inverted); }

table {
  margin-block: 0 1.5rem;
  border-collapse: collapse;
  width: 100%; }

td,
th {
  padding: 0;
  vertical-align: text-top; }

th {
  vertical-align: bottom; }

caption,
th {
  text-align: start; }

.layout__page {
  max-width: var(--max-page-width); }
  @media (min-width: 666px) {
    .layout__page {
      margin-inline: auto;
      min-height: 100vh;
      min-height: 100svh; } }
.layout__header, .layout__footer, .layout__main, .layout__navigation, .layout__first-sidebar, .layout__second-sidebar, .layout__page-top, .layout__page-bottom, .layout__cookieconsent {
  padding-inline: var(--gutters);
  min-width: 0; }

.layout__page {
  display: grid;
  grid-template-areas: 'head' 'nav' 'top' 'main' 'side1' 'side2' 'bottom' 'foot' 'notice';
  grid-template-rows: auto auto auto 1fr auto auto auto auto auto;
  grid-template-columns: 1fr; }

@media (min-width: 999px) {
  .layout__page {
    grid-template-rows: auto auto auto 1fr auto auto auto; }
  .layout__sidebar-first {
    grid-template-areas: 'head head' 'nav nav' 'side1 top' 'side1 main' 'side1 bottom' 'foot foot' 'notice notice';
    grid-template-columns: 1fr 2fr; }
  .layout__sidebar-second {
    grid-template-areas: 'head head' 'nav nav' 'top side2' 'main side2' 'bottom side2' 'foot foot' 'notice notice';
    grid-template-columns: 2fr 1fr; }
  .layout__sidebar-two {
    grid-template-areas: 'head head head' 'nav nav nav' 'side1 top side2' 'side1 main side2' 'side1 bottom side2' 'foot foot foot' 'notice notice notice';
    grid-template-columns: 1fr 2fr 1fr; } }

.layout__header {
  grid-area: head; }

.layout__navigation {
  grid-area: nav; }

.layout__page-top {
  grid-area: top; }

.layout__main {
  grid-area: main; }

.layout__first-sidebar {
  grid-area: side1; }

.layout__second-sidebar {
  grid-area: side2; }

.layout__page-bottom {
  grid-area: bottom; }

.layout__footer {
  grid-area: foot; }

.layout__cookieconsent {
  grid-area: notice; }

.box {
  margin-block: 1.5rem;
  padding: 0.75rem;
  border: 5px solid var(--color-border); }
  .box__title,
  .box .title {
    margin-top: 0; }
  .box--highlight {
    border-color: var(--color-highlight); }
  .box--fit {
    width: fit-content; }
  .box--gutter {
    padding-inline: var(--gutters); }
  .box--inverted {
    background: var(--color-border);
    color: var(--color-text-bg); }
    .box--inverted * {
      color: var(--color-text-bg); }
  .box > *:first-child {
    margin-top: 0; }
  .box > *:last-child {
    margin-bottom: 0; }

.button,
button,
[type='button'],
[type='reset'],
[type='submit'] {
  display: inline-block;
  font-family: var(--ff-headings);
  text-decoration: none;
  text-align: center;
  width: fit-content;
  margin-right: 1rem;
  margin-bottom: 1rem;
  padding: .2rem 1rem;
  cursor: pointer;
  color: var(--color-button-text);
  background-color: var(--color-button);
  border: 1px solid var(--color-button);
  border-radius: var(--radius-s); }
  .button:hover, .button:focus-visible, .button:active,
  button:hover,
  button:focus-visible,
  button:active,
  [type='button']:hover,
  [type='button']:focus-visible,
  [type='button']:active,
  [type='reset']:hover,
  [type='reset']:focus-visible,
  [type='reset']:active,
  [type='submit']:hover,
  [type='submit']:focus-visible,
  [type='submit']:active {
    text-decoration: none;
    color: var(--color-button-text-hover);
    background-color: var(--color-button-hover); }

.button--small {
  font-size: var(--fs-xs);
  margin-right: .5rem;
  margin-bottom: .5rem;
  padding: .2rem .75rem; }

.button--alt {
  color: var(--color-button-text-hover);
  background-color: var(--color-button-hover); }
  .button--alt:hover, .button--alt:focus-visible, .button--alt:active {
    color: var(--color-button-text);
    background-color: var(--color-button); }

.button--outline {
  color: var(--color-button);
  background-color: var(--color-button-text);
  border-color: var(--color-button); }
  .button--outline:hover, .button--outline:focus-visible, .button--outline:active {
    color: var(--color-button-text);
    background-color: var(--color-button); }

.button--shadow:hover,
main button:hover {
  box-shadow: 2px 2px 5px 1px var(--color-button-hover); }

.button--shadow:active,
main button:active {
  box-shadow: inset 2px 2px 5px 1px var(--color-button); }

[disabled].button,
button[disabled],
[disabled][type='button'],
[disabled][type='reset'],
[disabled][type='submit'] {
  background-color: var(--color-grey-extra-light);
  border: 1px solid var(--color-button-disabled);
  background-image: none;
  text-shadow: none; }

.cards {
  margin-block: 1.5rem; }

.card {
  padding: 0.75rem;
  border: 1px solid var(--color-border); }
  .card--highlight {
    border-color: var(--color-highlight); }
  .card--featured {
    grid-row: span 2;
    grid-column: span 2; }
  .card--gutter {
    padding-inline: var(--gutters); }
  .card--inverted {
    background: var(--color-border);
    color: var(--color-text-bg); }
  .card > *:first-child {
    margin-top: 0; }
  .card > *:last-child {
    margin-bottom: 0; }

.grid-center {
  display: grid;
  place-items: center; }

.text-center {
  text-align: center; }

.margin-center {
  margin-inline: auto; }

.clearfix::before {
  content: '';
  display: table; }

.clearfix::after {
  content: '';
  display: table;
  clear: both; }

.cookieconsent {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  gap: .5rem;
  position: sticky;
  bottom: 0;
  width: 100%;
  padding-block-start: .5rem;
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  border-top: 4px solid var(--color-warning-border);
  font-size: var(--fs-s);
  transform: translateY(100vh);
  transition: all 130ms ease-out;
  z-index: 99; }

.button--accept {
  border-color: var(--color-status); }

.button--decline {
  border-color: var(--color-warning-border); }

.js-cookieconsent-open {
  transform: translateY(0); }

.divider,
hr {
  margin-block: 1.5rem;
  border: 0;
  border-top: 1px solid var(--color-border); }
  .divider > :first-child,
  hr > :first-child {
    margin-top: 1.5rem; }

.disabled,
.pagination .disabled .page-link,
.pager .disabled .page-link,
[disabled].button,
button[disabled],
[disabled][type='button'],
[disabled][type='reset'],
[disabled][type='submit'] {
  cursor: default;
  color: var(--color-button-disabled); }
  .disabled:hover, .disabled:focus, .disabled:active,
  .pagination .disabled .page-link:hover,
  .pager .disabled .page-link:hover,
  [disabled].button:hover,
  button[disabled]:hover,
  [disabled][type='button']:hover,
  [disabled][type='reset']:hover,
  [disabled][type='submit']:hover,
  .pagination .disabled .page-link:focus,
  .pager .disabled .page-link:focus,
  [disabled].button:focus,
  button[disabled]:focus,
  [disabled][type='button']:focus,
  [disabled][type='reset']:focus,
  [disabled][type='submit']:focus,
  .pagination .disabled .page-link:active,
  .pager .disabled .page-link:active,
  [disabled].button:active,
  button[disabled]:active,
  [disabled][type='button']:active,
  [disabled][type='reset']:active,
  [disabled][type='submit']:active {
    color: var(--color-button-disabled);
    text-decoration: none; }

.flex-group {
  gap: 1.5rem;
  display: flex;
  flex-wrap: wrap; }
  .flex-group > * {
    flex: 1;
    flex-basis: 100%;
    flex-grow: 0; }
  .flex-group--grow {
    flex-grow: 1; }
  @media (min-width: 666px) {
    .flex-group--2 > * {
      flex-basis: calc(100% / 2 - 1.5rem); }
    .flex-group--3 > * {
      flex-basis: calc(100% / 3 - 1.5rem); }
    .flex-group--4 > * {
      flex-basis: calc(100% / 4 - 1.5rem); }
    .flex-group--5 > * {
      flex-basis: calc(100% / 5 - 1.5rem); }
    .flex-group--6 > * {
      flex-basis: calc(100% / 6 - 1.5rem); } }
.flex-inline,
.pagination,
.pager,
.navbar,
.tags ul {
  --gap: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: 0;
  text-align: start; }
  .flex-inline__item,
  .flex-inline li,
  .pagination li,
  .pager li,
  .navbar li,
  .tags ul li {
    list-style: none; }
  .flex-inline--inline,
  .tags ul {
    display: inline-flex; }

.footer {
  padding-block: var(--gutters);
  background-color: var(--color-footer-bg);
  text-align: center; }
  .footer p {
    margin: 0; }

.grid-group,
.cards {
  --column-min: 200px;
  --gap: 1.5rem;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(Min(var(--column-min), 100%), 1fr)); }
  .grid-group--fill {
    grid-template-columns: repeat(auto-fill, minmax(Min(var(--column-min), 100%), 1fr)); }
  .grid-group--100 {
    --column-min: 100px; }
  .grid-group--150 {
    --column-min: 150px; }
  .grid-group--200 {
    --column-min: 200px; }
  .grid-group--250 {
    --column-min: 250px; }
  .grid-group--300 {
    --column-min: 300px; }
  .grid-group--350 {
    --column-min: 350px; }
  .grid-group--400 {
    --column-min: 400px; }
  .grid-group--500 {
    --column-min: 500px; }
  .grid-group--600 {
    --column-min: 600px; }

.grid-stack {
  display: grid; }
  .grid-stack > * {
    grid-column: 1 / 2;
    grid-row: 1 / 2; }

.header {
  padding-block: var(--gutters);
  display: flex;
  flex-direction: column;
  gap: var(--gutters);
  background-color: var(--color-header-bg); }
  @media (min-width: 666px) {
    .header {
      flex-direction: row; } }
  .header__logo {
    width: fit-content; }
  .header__logo-image {
    vertical-align: bottom; }
  .header__site-name {
    margin: 0;
    line-height: 1; }
  .header__site-link:link, .header__site-link:visited {
    color: var(--color-text);
    text-decoration: none; }
  .header__site-link:hover, .header__site-link:focus {
    text-decoration: underline; }
  @media (min-width: 666px) {
    .header__region {
      margin-inline-start: auto; } }
.hidden,
html.nojs .nojs-hidden,
html.js .js-hidden {
  display: none; }

.icon-inline .icon-link {
  opacity: 0;
  transition: all 130ms ease-in;
  text-decoration: none; }

.icon-inline:focus-visible .icon-link, .icon-inline:hover .icon-link {
  opacity: .3; }
  .icon-inline:focus-visible .icon-link:focus-visible, .icon-inline:focus-visible .icon-link:hover, .icon-inline:hover .icon-link:focus-visible, .icon-inline:hover .icon-link:hover {
    opacity: 1; }

.icon-inline svg {
  display: inline;
  vertical-align: middle; }

.language-selector {
  display: flex; }

.language-icon {
  margin-inline-end: 0.75rem;
  fill: var(--color-text); }

.ul-straight-left,
article > ul,
aside > ul {
  display: table;
  list-style: none;
  padding: 0; }
  .ul-straight-left > li,
  article > ul > li,
  aside > ul > li {
    display: table-row; }
    .ul-straight-left > li::before,
    article > ul > li::before,
    aside > ul > li::before {
      padding-inline-end: 0.75rem;
      display: table-cell;
      content: '\2981';
      font-size: var(--fs-s); }

.ol-straight-left,
article > ol,
aside > ol {
  display: table;
  list-style: none;
  padding: 0; }
  .ol-straight-left > li,
  article > ol > li,
  aside > ol > li {
    display: table-row;
    counter-increment: table-ol; }
    .ol-straight-left > li::before,
    article > ol > li::before,
    aside > ol > li::before {
      padding-inline-end: 0.75rem;
      display: table-cell;
      content: counter(table-ol) ".";
      font-size: var(--fs-s);
      text-align: end; }

.ul-straight-left--off {
  display: block;
  list-style: inherit; }
  .ul-straight-left--off > li {
    display: list-item; }
    .ul-straight-left--off > li::before {
      content: '';
      display: inline;
      padding: inherit; }

.message {
  padding: .5rem;
  outline-width: 2px;
  outline-style: solid;
  width: 95%; }
  .message.status {
    background-color: var(--color-status-bg);
    color: var(--color-status);
    outline-color: var(--color-status); }
  .message.warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    outline-color: var(--color-warning-border); }
  .message.error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    outline-color: var(--color-error); }
  .message--highlight {
    animation: 2s linear infinite outline-highlight; }

@keyframes outline-highlight {
  50% {
    outline-width: .3rem; } }

.meta {
  font-family: var(--ff-headings);
  font-size: var(--fs-xs);
  color: var(--color-text-meta); }

.responsive-video {
  --aspect-ratio: 9 / 16;
  position: relative;
  padding-bottom: calc(var(--aspect-ratio) * 100%);
  padding-top: 25px;
  height: 0; }
  .responsive-video__embed,
  .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .responsive-video--4-3 {
    --aspect-ratio: 3 / 4; }

.mt--xxl {
  margin-block-start: 4.5rem; }

.mb--xxl {
  margin-block-end: 4.5rem; }

.mtb--xxl {
  margin-block: 4.5rem; }

.mt--xl {
  margin-block-start: 3rem; }

.mb--xl {
  margin-block-end: 3rem; }

.mtb--xl {
  margin-block: 3rem; }

.mt--l {
  margin-block-start: 2.25rem; }

.mb--l {
  margin-block-end: 2.25rem; }

.mtb--l {
  margin-block: 2.25rem; }

.mt--m {
  margin-block-start: 1.5rem; }

.mb--m {
  margin-block-end: 1.5rem; }

.mtb--m {
  margin-block: 1.5rem; }

.mt--s {
  margin-block-start: 1.125rem; }

.mb--s {
  margin-block-end: 1.125rem; }

.mtb--s {
  margin-block: 1.125rem; }

.mt--xs {
  margin-block-start: 0.75rem; }

.mb--xs {
  margin-block-end: 0.75rem; }

.mtb--xs {
  margin-block: 0.75rem; }

.mt--xxs {
  margin-block-start: 0.45rem; }

.mb--xxs {
  margin-block-end: 0.45rem; }

.mtb--xxs {
  margin-block: 0.45rem; }

.mt--0 {
  margin-block-start: 0; }

.mb--0 {
  margin-block-end: 0; }

.mtb--0 {
  margin-block: 0; }

.zebra-table {
  --cell-padding: .5rem; }
  @media (max-width: 666px) {
    .zebra-table {
      --cell-padding: .3rem; } }
  .zebra-table th,
  .zebra-table td {
    padding: var(--cell-padding); }
  .zebra-table thead tr {
    background-color: var(--color-row-header); }
  .zebra-table tbody tr:nth-child(odd) {
    background-color: var(--color-row-odd); }
  .zebra-table tbody tr:nth-child(even) {
    background-color: var(--color-row-even); }

.responsive-table {
  --gap: .5rem; }
  @media (max-width: 666px) {
    .responsive-table th {
      display: none; }
    .responsive-table td {
      display: grid;
      gap: var(--gap);
      grid-template-columns: 12ch auto; }
      .responsive-table td::before {
        content: attr(aria-label) ":";
        font-weight: var(--fw-bold); }
      .responsive-table td:first-of-type {
        padding-block-start: var(--gap); }
      .responsive-table td:last-of-type {
        padding-block-end: var(--gap); } }
.tags ul {
  margin-block: 0; }

.visually-hidden:not(:focus, :active) {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap; }

.navbar {
  margin-block: 0; }

.pagination,
.pager {
  margin-block: 1.5rem;
  justify-content: center; }
  .pagination__item,
  .pagination .page-link,
  .pager__item,
  .pager .page-link {
    padding-inline: 2px; }
  .pagination .active,
  .pager .active {
    font-weight: var(--fw-bold); }

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

.page {
  background-color: var(--color-body-bg); }

.footer {
  border-top: 2px solid var(--color-border); }

th,
label,
legend,
figcaption {
  font-size: var(--fs-s); }

.language-selector,
.footer {
  font-size: var(--fs-xs); }

th,
label,
legend,
.main-menu,
.header,
.footer {
  color: var(--color-headings);
  font-family: var(--ff-headings); }

th,
label {
  font-weight: var(--fw-headings); }

@media (min-width: 666px) {
  article .submitted,
  article .tags {
    display: inline-block;
    padding-inline-end: 1rem; } }

article code {
  font-size: var(--fs-xs);
  overflow-wrap: break-word; }

article pre {
  border-radius: var(--radius-xs);
  padding: 5px;
  border: 1px solid var(--color-border-light);
  background-color: var(--color-text-bg);
  overflow: auto;
  max-height: 300px;
  max-width: 90vw; }
  article pre.chroma {
    max-height: initial;
    overflow-x: scroll; }
  article pre > code {
    display: inline-block;
    white-space: pre; }

.content-dates {
  text-align: end; }

.main-menu {
  margin-top: .75rem;
  outline: 0; }
  .main-menu li {
    margin-bottom: .75rem;
    padding: 0; }
  .main-menu a {
    display: block;
    background-color: var(--color-button);
    color: var(--color-text-bg);
    padding: 2px 8px;
    text-decoration: none; }
    .main-menu a:hover, .main-menu a:focus {
      background-color: var(--color-button-hover); }
    .main-menu a:active, .main-menu a[aria-current] {
      background-color: var(--color-button);
      text-decoration: underline; }

.search-text {
  font-size: var(--fs-l); }

main input:not(:placeholder-shown):valid,
main textarea:not(:placeholder-shown):valid {
  background-color: var(--color-status-bg); }

main input:not(:placeholder-shown):invalid,
main textarea:not(:placeholder-shown):invalid {
  background-color: var(--color-error-bg); }

main input:focus:invalid,
main textarea:focus:invalid {
  background-color: var(--color-warning-bg); }

.js-submitted input:valid,
.js-submitted textarea:valid {
  background-color: var(--color-status-bg); }

.js-submitted input:invalid,
.js-submitted textarea:invalid {
  background-color: var(--color-error-bg); }

/*# sourceMappingURL=styles.css.map */