@charset "UTF-8";
@import url(props.media.css);
:root {
  --light-text: #ffffff;
  --muted-text: #ADB5B6;
  --dark-text: #80808A;
  --light-line:var(--gray-2);
  --dark-line:var(--gray-6);
  --light-background: #FFFFFF;
  --muted-background: #D8EADC;
  --dark-background: #b5cbbb;
  --text-color: var(--dark-text);
  --link-color: var(--dark-text);
  --accent-color: #b5cbbb;
  --font-bold: 600;
  --max-width: 100%;
  --max-width-head: 100%;
  --header-height: 4.5rem;
  --header-padding: 1.2rem;
  --space-top: var(--size-6);
  --space-bottom: var(--size-8);
  --responsive-flex: column; }
  @media only screen and (min-width: 750px) {
    :root {
      --max-width: min(100%, var(--size-md));
      --max-width-head: min(100%, var(--size-md));
      --responsive-flex: row;
      --header-height: 6rem;
      --header-padding: 1.9rem; } }
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Media queries
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Document
 * ========================================================================== */
/**
 * Add border box sizing in all browsers (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box; }

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit;
  /* 1 */
  vertical-align: inherit;
  /* 2 */ }

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */
html {
  cursor: default;
  /* 1 */
  line-height: 1.5;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  tab-size: 4;
  /* 3 */
  -webkit-tap-highlight-color: transparent;
  -ms-text-size-adjust: 100%;
  /* 5 */
  -webkit-text-size-adjust: 100%;
  /* 5 */
  word-break: break-word;
  /* 6 */ }

/* Sections
 * ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0; }

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */
ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0; }

/**
 * 1. Add the correct sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */
hr {
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * Add the correct display in IE.
 */
main {
  display: block; }

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
nav ol,
nav ul {
  list-style: none;
  padding: 0; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
 * ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Remove the border on iframes in all browsers (opinionated).
 */
iframe {
  border-style: none; }

/**
 * Remove the border on images within links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
svg:not([fill]) {
  fill: currentColor; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Tabular data
 * ========================================================================== */
/**
 * Collapse border spacing in all browsers (opinionated).
 */
table {
  border-collapse: collapse; }

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
button,
input,
select {
  margin: 0; }

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */
button {
  overflow: visible;
  /* 1 */
  text-transform: none;
  /* 2 */ }

/**
 * Correct the inability to style buttons in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */
fieldset {
  border: 1px solid #a0a0a0;
  /* 1 */
  padding: 0.35em 0.75em 0.625em;
  /* 2 */ }

/**
 * Show the overflow in Edge 18- and IE.
 */
input {
  overflow: visible; }

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */
legend {
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  white-space: normal;
  /* 1 */ }

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Remove the inheritance of text transform in Firefox.
 */
select {
  text-transform: none; }

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */
textarea {
  margin: 0;
  /* 1 */
  overflow: auto;
  /* 2 */
  resize: vertical;
  /* 3 */ }

/**
 * Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  padding: 0; }

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto; }

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54; }

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */
::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */
:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Remove the additional :invalid styles in Firefox.
 */
:-moz-ui-invalid {
  box-shadow: none; }

/* Interactive
 * ========================================================================== */
/*
 * Add the correct display in Edge 18- and IE.
 */
details {
  display: block; }

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */
dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content; }

dialog:not([open]) {
  display: none; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Scripting
 * ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

/* User interaction
 * ========================================================================== */
/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  /* 1 */
  touch-action: manipulation;
  /* 2 */ }

/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none; }

/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
[aria-busy="true"] {
  cursor: progress; }

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */
[aria-controls] {
  cursor: pointer; }

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
[aria-disabled="true"],
[disabled] {
  cursor: not-allowed; }

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
[aria-hidden="false"][hidden] {
  display: initial; }

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute; }

.feather {
  width: 1em;
  height: 1em;
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: bevel; }

:where(html) {
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #16191d;
  --gray-11: #0d0f12;
  --gray-12: #030507; }

:where(html) {
  --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  --font-serif: ui-serif,serif;
  --font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;
  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;
  --font-lineheight-00: .95;
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
  --font-lineheight-5: 2;
  --font-letterspacing-0: -.05em;
  --font-letterspacing-1: .025em;
  --font-letterspacing-2: .050em;
  --font-letterspacing-3: .075em;
  --font-letterspacing-4: .150em;
  --font-letterspacing-5: .500em;
  --font-letterspacing-6: .750em;
  --font-letterspacing-7: 1em;
  --font-size-00: .5rem;
  --font-size-0: .75rem;
  --font-size-1: 1rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;
  --font-size-6: 2.5rem;
  --font-size-7: 3rem;
  --font-size-8: 3.5rem;
  --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
  --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
  --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
  --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem); }

:where(html) {
  --size-000: -.5rem;
  --size-00: -.25rem;
  --size-1: .25rem;
  --size-2: .5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-11: 7.5rem;
  --size-12: 10rem;
  --size-13: 15rem;
  --size-14: 20rem;
  --size-15: 30rem;
  --size-fluid-1: clamp(.5rem, 1vw, 1rem);
  --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
  --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
  --size-fluid-4: clamp(2rem, 4vw, 3rem);
  --size-fluid-5: clamp(4rem, 5vw, 5rem);
  --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
  --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
  --size-fluid-8: clamp(10rem, 20vw, 15rem);
  --size-fluid-9: clamp(15rem, 30vw, 20rem);
  --size-fluid-10: clamp(20rem, 40vw, 30rem);
  --size-content-1: 20ch;
  --size-content-2: 45ch;
  --size-content-3: 60ch;
  --size-header-1: 20ch;
  --size-header-2: 25ch;
  --size-header-3: 35ch;
  --size-xxs: 240px;
  --size-xs: 360px;
  --size-sm: 480px;
  --size-md: 768px;
  --size-lg: 1024px;
  --size-xl: 1440px;
  --size-xxl: 1920px; }

@custom-media --motionOK      (prefers-reduced-motion: no-preference);
@custom-media --motionNotOK   (prefers-reduced-motion: reduce);
@custom-media --opacityOK     (prefers-reduced-transparency: no-preference);
@custom-media --opacityNotOK  (prefers-reduced-transparency: reduce);
@custom-media --useDataOK     (prefers-reduced-data: no-preference);
@custom-media --useDataNotOK  (prefers-reduced-data: reduce);
@custom-media --OSdark        (prefers-color-scheme: dark);
@custom-media --OSlight       (prefers-color-scheme: light);
@custom-media --highContrast  (prefers-contrast: more);
@custom-media --lowContrast   (prefers-contrast: less);
@custom-media --portrait      (orientation: portrait);
@custom-media --landscape     (orientation: landscape);
@custom-media --HDcolor       (dynamic-range: high);
@custom-media --touch         (hover: none) and (pointer: coarse);
@custom-media --stylus        (hover: none) and (pointer: fine);
@custom-media --pointer       (hover) and (pointer: coarse);
@custom-media --mouse         (hover) and (pointer: fine);
@custom-media --xxs-only      (0px <= width <= 240px);
@custom-media --xxs-n-above   (width >= 240px);
@custom-media --xxs-n-below   (width < 240px);
@custom-media --xxs-phone     (--xxs-only) and (--portrait);
@custom-media --xs-only       (240px <= width <= 360px);
@custom-media --xs-n-above    (width >= 360px);
@custom-media --xs-n-below    (width < 360px);
@custom-media --xs-phone      (--xs-only) and (--portrait);
@custom-media --sm-only       (360px <= width <= 480px);
@custom-media --sm-n-above    (width >= 480px);
@custom-media --sm-n-below    (width < 480px);
@custom-media --sm-phone      (--sm-only) and (--portrait);
@custom-media --md-only       (480px <= width <= 768px);
@custom-media --md-n-above    (width >= 768px);
@custom-media --md-n-below    (width < 768px);
@custom-media --md-phone      (--md-only) and (--portrait);
@custom-media --lg-only       (768px <= width <= 1024px);
@custom-media --lg-n-above    (width >= 1024px);
@custom-media --lg-n-below    (width < 1024px);
@custom-media --lg-phone      (--lg-only) and (--portrait);
@custom-media --xl-only       (1024px <= width <= 1440px);
@custom-media --xl-n-above    (width >= 1440px);
@custom-media --xl-n-below    (width < 1440px);
@custom-media --xxl-only      (1440px <= width <= 1920px);
@custom-media --xxl-n-above   (width >= 1920px);
@custom-media --xxl-n-below   (width < 1920px);
:where(html) {
  --animation-fade-in: fade-in .5s var(--ease-3);
  --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
  --animation-fade-out: fade-out .5s var(--ease-3);
  --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
  --animation-scale-up: scale-up .5s var(--ease-3);
  --animation-scale-down: scale-down .5s var(--ease-3);
  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
  --animation-shake-x: shake-x .75s var(--ease-out-5);
  --animation-shake-y: shake-y .75s var(--ease-out-5);
  --animation-spin: spin 2s linear infinite;
  --animation-ping: ping 5s var(--ease-out-3) infinite;
  --animation-blink: blink 1s var(--ease-out-3) infinite;
  --animation-float: float 3s var(--ease-in-out-3) infinite;
  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
  --animation-pulse: pulse 2s var(--ease-out-3) infinite; }

@keyframes fade-in {
  to {
    opacity: 1; } }

@keyframes fade-in-bloom {
  0% {
    opacity: 0;
    filter: brightness(1) blur(20px); }
  10% {
    opacity: 1;
    filter: brightness(2) blur(10px); }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0); } }

@keyframes fade-out {
  to {
    opacity: 0; } }

@keyframes fade-out-bloom {
  100% {
    opacity: 0;
    filter: brightness(1) blur(20px); }
  10% {
    opacity: 1;
    filter: brightness(2) blur(10px); }
  0% {
    opacity: 1;
    filter: brightness(1) blur(0); } }

@keyframes scale-up {
  to {
    transform: scale(1.25); } }

@keyframes scale-down {
  to {
    transform: scale(0.75); } }

@keyframes slide-out-up {
  to {
    transform: translateY(-100%); } }

@keyframes slide-out-down {
  to {
    transform: translateY(100%); } }

@keyframes slide-out-right {
  to {
    transform: translateX(100%); } }

@keyframes slide-out-left {
  to {
    transform: translateX(-100%); } }

@keyframes slide-in-up {
  from {
    transform: translateY(100%); } }

@keyframes slide-in-down {
  from {
    transform: translateY(-100%); } }

@keyframes slide-in-right {
  from {
    transform: translateX(-100%); } }

@keyframes slide-in-left {
  from {
    transform: translateX(100%); } }

@keyframes shake-x {
  0%, 100% {
    transform: translateX(0%); }
  20% {
    transform: translateX(-5%); }
  40% {
    transform: translateX(5%); }
  60% {
    transform: translateX(-5%); }
  80% {
    transform: translateX(5%); } }

@keyframes shake-y {
  0%, 100% {
    transform: translateY(0%); }
  20% {
    transform: translateY(-5%); }
  40% {
    transform: translateY(5%); }
  60% {
    transform: translateY(-5%); }
  80% {
    transform: translateY(5%); } }

@keyframes spin {
  to {
    transform: rotate(1turn); } }

@keyframes ping {
  90%, 100% {
    transform: scale(2);
    opacity: 0; } }

@keyframes blink {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: .5; } }

@keyframes float {
  50% {
    transform: translateY(-25%); } }

@keyframes bounce {
  25% {
    transform: translateY(-20%); }
  40% {
    transform: translateY(-3%); }
  0%, 60%, 100% {
    transform: translateY(0); } }

@keyframes pulse {
  50% {
    transform: scale(0.9, 0.9); } }

@media (--OSdark) {
  @keyframes fade-in-bloom {
    0% {
      opacity: 0;
      filter: brightness(1) blur(20px); }
    10% {
      opacity: 1;
      filter: brightness(0.5) blur(10px); }
    100% {
      opacity: 1;
      filter: brightness(1) blur(0); } } }

@media (--OSdark) {
  @keyframes fade-out-bloom {
    100% {
      opacity: 0;
      filter: brightness(1) blur(20px); }
    10% {
      opacity: 1;
      filter: brightness(0.5) blur(10px); }
    0% {
      opacity: 1;
      filter: brightness(1) blur(0); } } }

:where(html) {
  --ease-1: cubic-bezier(.25, 0, .5, 1);
  --ease-2: cubic-bezier(.25, 0, .4, 1);
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --ease-4: cubic-bezier(.25, 0, .2, 1);
  --ease-5: cubic-bezier(.25, 0, .1, 1);
  --ease-in-1: cubic-bezier(.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(.50, 0, 1, 1);
  --ease-in-3: cubic-bezier(.70, 0, 1, 1);
  --ease-in-4: cubic-bezier(.90, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, .75, 1);
  --ease-out-2: cubic-bezier(0, 0, .50, 1);
  --ease-out-3: cubic-bezier(0, 0, .3, 1);
  --ease-out-4: cubic-bezier(0, 0, .1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
  --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
  --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
  --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
  --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
  --ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25);
  --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);
  --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
  --ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25);
  --ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5);
  --ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5);
  --ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5);
  --ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5);
  --ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5);
  --ease-step-1: steps(2);
  --ease-step-2: steps(3);
  --ease-step-3: steps(4);
  --ease-step-4: steps(7);
  --ease-step-5: steps(10); }

/**
 * Set up a decent box model on the root element
 */
html, body {
  min-height: 100vh; }

html {
  box-sizing: border-box;
  scroll-behavior: smooth; }

body {
  display: flex;
  flex-direction: column; }

/**
 * Basic styles for links
 */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Inline text semantics
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
a {
  font-weight: 300;
  color: inherit;
  text-decoration: none; }
  a:hover, a:active, a:focus {
    text-decoration: underline; }

a.anchor {
  display: inline-block;
  position: relative;
  top: calc(-1 * var(--header-height) - var(--size-5));
  visibility: hidden; }

a.button {
  font-size: var(--font-size-3); }

a.link {
  font-weight: 400;
  text-decoration: underline; }

/* If you specify a font size, consider using the `em` unit so that it works
universally, e.g. for both `h1 small` and `p small` */
abbr {
  text-decoration: none;
  border-bottom: 2px dashed var(--dark-text); }

@media (hover: hover) {
  abbr:hover {
    cursor: help; } }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Demarcating edits
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Text block content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Overall styling, e.g. vertical spacing */
*:notol(nav) {
  list-style: decimal outside; }

*:notul(nav) {
  margin: 0;
  padding: 0 1px;
  list-style: none outside;
  font-variant-numeric: tabular-nums; }

*:notol(nav), *:not(nav) ul {
  padding-left: var(--size-4);
  margin-bottom: var(--size-4); }

*:notli(nav) {
  padding-left: 5rem; }

article > ul {
  --icon-space: 1.5rem;
  margin: 0;
  padding: 0 1px !important;
  list-style: none outside;
  font-variant-numeric: tabular-nums; }
  article > ul > li {
    padding-left: var(--icon-space);
    position: relative;
    font-size: var(--font-size-4);
    letter-spacing: -.05em;
    font-weight: 100; }
    article > ul > li > ul {
      list-style: "\2043" outside; }
      article > ul > li > ul li {
        padding-left: 0.7em;
        letter-spacing: -.03em;
        font-size: var(--font-size-2);
        font-weight: 300; }
  article > ul > li:before {
    content: url("/svg/arrow-right.svg");
    display: inline-block;
    position: absolute;
    margin-top: 0.22rem;
    margin-left: calc( var(--icon-space) * -1);
    width: 0.6em; }

article ul {
  padding: 0 1em; }

article ul:not(.ref_ul) li {
  margin-top: var(--size-4); }

blockquote {
  text-align: center;
  padding: var(--size-8) 0 var(--size-1) 0;
  font-size: var(--font-size-5);
  color: var(--dark-text);
  font-style: italic; }
  @media only screen and (min-width: 750px) {
    blockquote {
      padding: var(--size-8) var(--size-8) var(--size-1) var(--size-8); } }
  blockquote p {
    margin: 0; }
  blockquote > p::before {
    content: "\201E"; }
  blockquote > p::after {
    content: "\201D"; }

article img {
  width: calc(100% + 2 * var(--size-4));
  margin-left: calc(-1 * var(--size-4)); }
  @media only screen and (min-width: 750px) {
    article img {
      margin-left: 0;
      width: 100%; } }
hr {
  border: 0;
  height: 2px;
  margin: 1rem 0;
  background: var(--muted-text); }

fieldset {
  border: none;
  padding: 0;
  margin: 0; }

input[type="email"],
input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="datetime"],
input[type="datetime-local"],
input[type="url"],
input[type="search"],
input[type="tel"],
input:not([type]) {
  display: block;
  width: 100%;
  padding: 1rem;
  font-family: "Clear Sans", system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Open Sans", sans-serif;
  font-size: var(--font-size-1);
  font-weight: inherit;
  border: 2px solid var(--light-text);
  border-radius: 10px;
  color: var(--dark-text);
  background-color: var(--muted-background);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

select {
  display: block;
  width: 100%;
  padding: 1rem;
  font-family: "Clear Sans", system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: inherit;
  border: 2px solid var(--light-text);
  border-radius: 2px;
  color: var(--dark-text);
  background-color: var(--muted-background);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

.select-wrapper {
  position: relative; }

.select-wrapper::after {
  content: "▼";
  color: var(--muted-text);
  font-size: 1rem;
  top: 1rem;
  right: 1rem;
  position: absolute;
  pointer-events: none; }

textarea {
  display: block;
  width: 100%;
  height: var(--size-13);
  font-size: var(--font-size-1);
  font-family: "Clear Sans", system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Open Sans", sans-serif;
  font-weight: inherit;
  padding: 1rem;
  line-height: 1rem;
  border-radius: 2px;
  border: 2px solid var(--light-text);
  color: var(--dark-text);
  background-color: var(--muted-background);
  box-sizing: border-box;
  resize: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

::placeholder {
  color: var(--muted-text);
  opacity: 1; }

input:invalid,
select:invalid,
textarea:invalid {
  border: 2px solid var(--light-line);
  color: var(--muted-text);
  outline: none; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border: 2px solid var(--dark-text); }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Embedded content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
figure {
  text-align: center; }

/**
 * Basic typography style for copy text
 */
body {
  color: var(--text-color);
  font-family: "Clear Sans", system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Open Sans", sans-serif;
  font-weight: 300;
  letter-spacing: -.03em;
  font-size: var(--font-size-2); }

h1, h2, h3, h4, h5, h6 {
  color: var(--dark-text);
  font-weight: 100;
  letter-spacing: -.05em; }

h1 {
  font-size: var(--font-size-fluid-3);
  line-height: var(--font-lineheight-1); }
  @media only screen and (min-width: 750px) {
    h1 {
      font-weight: 100; } }
h2 {
  font-size: var(--font-size-5);
  line-height: var(--font-lineheight-0);
  margin-top: 2em; }
  @media only screen and (min-width: 750px) {
    h2 {
      font-size: var(--font-size-6); } }
h3 {
  font-size: var(--font-size-4);
  margin-top: 2em;
  font-weight: 400; }

h4 {
  font-size: var(--font-size-3);
  line-height: var(--font-lineheight-0);
  margin-top: 2em; }

h5 {
  font-size: 1em; }

h1 + h4 {
  margin-top: -1em; }
  @media only screen and (min-width: 750px) {
    h1 + h4 {
      margin-top: -1.4em; } }
h2 + h3 {
  margin-top: 0; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Interactive elements
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Some form fields, `details`, elements with `tabindex`, and possibly other
elements can be focussed. You should use `:focus-visible` instead of `:focus`
whenever possible. As the former is not yet widely supported, you need to do it
as follows:
1) Set styling on focus
2) If browser supports `:focus-visible`, revert/unset the styling from 1)
3) If the element matches `:focus-visible`, apply the styling again */
/**
 * Clear inner floats
 */
.clearfix::after {
  clear: both;
  content: '';
  display: table; }

.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--size-4);
  padding-right: var(--size-4); }

.hidden {
  display: none; }

.desktop-only {
  display: none; }
  @media only screen and (min-width: 750px) {
    .desktop-only {
      display: initial; } }
.mobile-only {
  display: initial; }
  @media only screen and (min-width: 750px) {
    .mobile-only {
      display: none; } }
header {
  top: 0;
  z-index: 1000; }
  header nav {
    line-height: calc(var(--header-height) - 2 * var(--header-padding)); }
  header nav a {
    margin-left: var(--header-padding);
    font-weight: 300; }

.header_brand {
  height: var(--size-fluid-3); }

.header_logo {
  width: 184px;
  height: 35px;
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linejoin: round;
  stroke-miterlimit: 2;
  fill: var(--dark-text);
  transition: fill ease .3s; }
  header.open .header_logo {
    fill: var(--light-text); }

.header_row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: var(--header-padding) auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: var(--max-width-head);
  width: 100%; }
  header.open .header_row {
    position: fixed; }

.header_icon {
  width: 24px;
  height: 24px; }

a.header_menu {
  width: 100%;
  stroke: var(--dark-text);
  stroke-width: 2px;
  display: block; }
  a.header_menu:hover, a.header_menu:active, a.header_menu:focus {
    stroke: var(--muted-text); }
  header.open a.header_menu {
    stroke: var(--light-text); }

footer {
  margin-top: var(--size-fluid-6);
  color: var(--light-text);
  background-color: var(--dark-background);
  padding-top: var(--size-fluid-5);
  padding-bottom: var(--size-fluid-3); }
  footer h2, footer h4 {
    color: inherit;
    margin-top: 1em;
    line-height: var(--line-height-0); }
  footer .linkedin {
    filter: invert(100%);
    width: 24px;
    height: auto; }
  footer .feather {
    margin-right: 0.3em;
    margin-bottom: 0.2em; }

.footer_row {
  max-width: var(--max-width-head); }

.footer_logo {
  width: 10em;
  height: auto; }

.footnote_text {
  border-left: 1px solid var(--dark-line);
  color: var(--muted-text);
  padding: 0 1rem;
  margin: 1.5rem; }
  .footnote_text > p {
    margin-top: 0; }

.footnote_num {
  position: relative;
  float: left;
  left: -2.5rem;
  width: 0; }

#nomodule {
  display: none; }

.incompatible {
  min-height: 100%;
  background: #FFF019;
  color: #000000; }
  .incompatible h1 {
    font-size: 3rem; }
  .incompatible a {
    color: inherit;
    text-decoration: underline; }
  .incompatible a:hover,
  .incompatible a:focus {
    color: #FFF;
    background: #000; }
  .incompatible .incompatible_text {
    margin-left: auto;
    margin-right: auto;
    max-width: 35rem;
    padding: 10rem 1.25rem;
    font-weight: bold; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Forms
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Overall styling, e.g. vertical spacing */
/* `textarea` and `input` elements that share a similar look and similar styling
capabilities */
/* - common styling */
/* - individual styling */
/* Tick boxes */
/* Other input fields, some with limited styling capabilities */
/* This matches forms or form elements that are invalid *and* have been
interacted with. Note that:
1) You may need to add the `interacted` class to forms yourself
2) You may need to add the `touched` class to form fields yourself
3) `:user-invalid` is a working draft and not yet supported by most browsers
4) `:-moz-ui-invalid` is non-standard and only works in Firefox
Form validation error messages will appear (in capable browsers) regardless of
this styling. You can omit 1) and 2) and still have working forms. Perfect
example of progressive enhancement. */
/* Applies to invalid forms */
/* Applies to invalid form fields. You would need to repeat your declarations
for the following three groups of selectors individually. Browsers completely
ignore any rule that contains a selector they do not know. */
.menu {
  color: var(--light-text);
  font-size: var(--font-size-4);
  position: fixed;
  z-index: -100;
  height: 100%;
  min-height: 200dvh;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--dark-background);
  transform: translateX(110%);
  transition: transform ease .3s;
  overflow: hidden; }
  .menu.open {
    opacity: 1;
    transform: translateX(0); }
  .menu li {
    margin-top: 0.5em; }

.list_list {
  position: absolute;
  margin-top: var(--size-10);
  overflow-y: scroll;
  height: 100%;
  max-height: 90dvh;
  width: 110%;
  padding-right: 17px;
  padding-bottom: 100px; }

.list_children {
  padding-left: calc(2 * var(--header-padding));
  padding-right: calc(4 * var(--header-padding));
  text-indent: -20px;
  max-height: 0;
  opacity: 0;
  transition: max-height ease 0.3s, opacity ease 0.3s; }
  .list_children > li {
    display: none;
    margin-top: 0.7em;
    line-height: 1; }
    .list_children > li > a {
      font-size: var(--font-size-3); }
  .list_children.expand {
    max-height: 1000px;
    opacity: 1; }

.list_children.expand > li {
  display: list-item !important; }

.card {
  background-color: var(--dark-background);
  color: var(--light-text);
  padding: 2em var(--size-4) 2.2em;
  margin: 2em 0; }
  @media only screen and (min-width: 750px) {
    .card {
      padding: 2em 2em 2.2em; } }
  .card h2 {
    margin-top: 0;
    color: var(--light-text); }
  .card h3 {
    margin-top: -1em;
    color: var(--light-text); }
  .card a {
    color: var(--dark-text);
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .card audio {
    margin-top: 1em;
    width: 100%; }

.card_link {
  background-color: var(--muted-background);
  padding: var(--size-2) var(--size-4);
  margin-top: 2em;
  width: 15em;
  height: 3em;
  margin-left: auto;
  margin-right: auto;
  text-align: center; }
  .card_link a.button_link {
    text-decoration: none; }

.teaser {
  display: inline-block;
  padding: 2px var(--size-2) var(--size-1);
  background-color: var(--muted-background);
  margin-bottom: var(--size-2);
  color: var(--dark-text);
  font-weight: 100;
  font-size: var(--font-size-1);
  margin-left: calc(-1 * var(--size-4));
  padding-left: calc(var(--size-4) + 3px); }
  @media only screen and (min-width: 750px) {
    .teaser {
      margin-left: -2.2em;
      padding-left: 2.3em; } }
.main_back {
  padding-top: var(--size-8);
  margin-bottom: var(--size-8); }
  .main_back a {
    text-decoration: none; }
    .main_back a:hover, .main_back a:active, .main_back a:focus {
      text-decoration: underline; }

.single a {
  text-decoration: underline; }
  .single a:hover, .single a:active, .single a:focus {
    text-decoration: underline; }

.arrow_back {
  height: .8em;
  width: auto; }

main {
  width: var(--max-width);
  margin-top: 6rem; }

article {
  margin-top: var(--space-top);
  margin-bottom: var(--space-bottom); }

.flex-column-to-row {
  display: flex;
  flex-direction: var(--responsive-flex);
  justify-content: space-between; }

.column {
  margin-top: var(--space-top);
  margin-bottom: var(--space-bottom); }

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--size-4); }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Table content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-variant-numeric: tabular-nums; }

tr {
  text-align: left; }

th, td {
  border-bottom: 2px solid var(--light-background);
  line-height: var(--font-lineheight-3);
  padding: var(--size-3); }

th {
  font-weight: 600;
  text-align: left; }

td:last-child {
  text-align: right; }

div.cta {
  background-color: var(--dark-background);
  color: var(--light-text);
  padding: 0.5em;
  padding-bottom: 0.7em;
  text-decoration: none;
  margin: var(--size-6) auto;
  width: 15em;
  height: 3em;
  text-align: center; }
  div.cta svg {
    margin-bottom: 0.1em;
    margin-right: 0.4em; }
  div.cta a {
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none; }

.cta_mail:hover > .feather {
  animation: var(--animation-shake-y); }

.testimonials {
  text-align: center;
  --swiffy-slider-nav-dark: var(--dark-text); }
  .testimonials .slider-nav {
    padding: 0;
    filter: none; }
    .testimonials .slider-nav:after {
      mask: url("/svg/arrow-left.svg") no-repeat;
      width: 2em;
      height: 2em; }
  .testimonials .ref_ul {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto; }
  .testimonials .ref_name {
    font-weight: 500; }
  .testimonials p {
    font-style: italic; }
  .testimonials li {
    padding-top: 0; }

.home_name {
  max-width: var(--max-width-head);
  width: 100%; }

.home_article {
  margin-top: 0; }
  .home_article li {
    font-size: var(--font-size-2); }

@media only screen and (min-width: 750px) {
  .profile_wrapper {
    z-index: -1;
    position: absolute;
    max-width: var(--max-width-head);
    width: 100%;
    left: 50%;
    transform: translateX(-50%); } }

.profile_picture {
  width: calc(100% + 2 * var(--size-4));
  margin-left: calc(-1 * var(--size-4)); }
  @media only screen and (min-width: 750px) {
    .profile_picture {
      width: 20em;
      float: right;
      margin-left: 2em; } }
@media only screen and (min-width: 750px) {
  .profile_dummy {
    width: 22em;
    height: 340px;
    float: right;
    background-color: red;
    opacity: 0; } }

.anchors a {
  white-space: nowrap;
  margin-right: 17px; }

.anchors a:last-child {
  margin-right: 0; }