@charset "UTF-8";
/*
 * Base CSS Reset.
 *
 * inspired by several resets going around, e.g.
 * https://andy-bell.co.uk/a-more-modern-css-reset/
 * https://meyerweb.com/eric/tools/css/reset/
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-block-size: var(--body-block-min, 100vh);
  max-inline-size: var(--body-inline-max, 60rem);
  margin-block: 0;
  margin-inline: auto;
  padding: 0;
  font-family: var(--body-font-family, system-ui, sans-serif);
  text-rendering: optimizeSpeed;
}

h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

:first-child {
  margin-block-start: 0;
}

:last-child {
  margin-block-end: 0;
}

[id] {
  scroll-margin-block-start: 2rem;
}

:focus,
:focus-visible {
  scroll-margin-block-end: 10vh;
}

a,
button {
  transition: all 0.3s ease;
}

img,
picture,
svg {
  display: block;
  max-inline-size: 100%;
}
img[width],
picture[width],
svg[width] {
  block-size: auto;
}
p img, li img,
p picture,
li picture,
p svg,
li svg {
  display: inline;
  vertical-align: text-bottom;
}

svg {
  pointer-events: none;
  fill: currentColor;
}

input,
button,
textarea,
select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

.illustration-code {
  --illustration-code-browser: var(--primary-light);
  --illustration-code-laptop: var(--secondary-light);
  --illustration-code-pants: var(--tertiary-light);
  --illustration-code-person: var(--neutral-light);
  --illustration-code-pointer: var(--secondary-light);
  --illustration-code-close: var(--neutral-light);
  --illustration-code-code: var(--neutral-light);
}

img.icon,
picture.icon,
svg.icon {
  display: inline;
  vertical-align: -0.25em;
}

/* 🛑 STOP!
  Do not change this file directly.
  Modify colors in ./source/_data/colors.js
 */
/* 🛑 STOP!
  Do not change this file directly.
  Modify colors in ./source/_data/colorsChristmas.js
 */
:root {
  --primary-light: #006685;
  --on-primary-light: #B8DEE9;
  --secondary-light: #006a60;
  --on-secondary-light: #ACE1DC;
  --tertiary-light: #7f5700;
  --on-tertiary-light: #E7D7B3;
  --error-light: #ac303b;
  --on-error-light: #F7CDD1;
  --neutral-light: #181212;
  --on-neutral-light: #857B7B;
  --background-light: #fffbff;
  --on-background-light: #7A727A;
  --foreground-light: #201a1a;
  --on-foreground-light: #898181;
  --primary-dark: #6bd3ff;
  --on-primary-dark: #1C5973;
  --secondary-dark: #54dcca;
  --on-secondary-dark: #0E5E54;
  --tertiary-dark: #fbbb4a;
  --on-tertiary-dark: #714B08;
  --error-dark: #ffb3b2;
  --on-error-dark: #873C3B;
  --neutral-dark: #e4d7d7;
  --on-neutral-dark: #6A5C5C;
  --background-dark: #201a1a;
  --on-background-dark: #898181;
  --foreground-dark: #ece0df;
  --on-foreground-dark: #706260;
}

body {
  background-color: var(--body-background, var(--background-light));
  color: var(--body-color, var(--foreground-light));
  font-size: 1.25rem;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color, var(--primary-light));
}

a {
  color: var(--link-color, var(--secondary-light));
  font-weight: 600;
}
a:hover, a:focus, a:active {
  --link-color: var(--link-hover-color, var(--tertiary-light));
}
a:focus {
  outline-color: currentColor;
  outline-offset: 0.125em;
  text-decoration: none;
}

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