/*** Fonts ***/

@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 400;
    src: url(/static/fonts/FiraSans/FiraSans-Regular.woff) format("woff");
}
@font-face {
    font-family: "Fira Sans";
    font-style: italic;
    font-weight: 400;
    src: url(/static/fonts/FiraSans/FiraSans-Italic.woff) format("woff");
}
@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 700;
    src: url(/static/fonts/FiraSans/FiraSans-Bold.woff) format("woff");
}
@font-face {
    font-family: "Fira Sans";
    font-style: italic;
    font-weight: 700;
    src: url(/static/fonts/FiraSans/FiraSans-BoldItalic.woff) format("woff");
}
@font-face {
    font-family: "Fira Mono";
    font-style: normal;
    font-weight: 400;
    src: url(/static/fonts/FiraSans/FiraMono-Regular.woff) format("woff");
}
@font-face {
    font-family: "Fira Mono";
    font-style: normal;
    font-weight: 700;
    src: url(/static/fonts/FiraSans/FiraMono-Bold.woff) format("woff");
}
@font-face {
    font-family: "Zilla Slab";
    font-style: normal;
    font-weight: 400;
    src: url(/static/fonts/ZillaSlab/ZillaSlab-Regular.woff) format("woff");
}
@font-face {
    font-family: "Zilla Slab";
    font-style: italic;
    font-weight: 400;
    src: url(/static/fonts/ZillaSlab/ZillaSlab-Italic.woff) format("woff");
}
@font-face {
    font-family: "Zilla Slab";
    font-style: normal;
    font-weight: 700;
    src: url(/static/fonts/ZillaSlab/ZillaSlab-Bold.woff) format("woff");
}
@font-face {
    font-family: "Zilla Slab";
    font-style: italic;
    font-weight: 700;
    src: url(/static/fonts/ZillaSlab/ZillaSlab-BoldItalic.woff) format("woff");
}

/*** Reset ***/

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

body,
p,
h1, h2, h3, h4, h5, h6,
figure,
blockquote,
dl, dd, ul, ol {
    margin: 0;
    overflow-wrap: break-word;
}

a {
    text-decoration-skip-ink: auto;
}

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

img,
picture {
    display: block;
    max-width: 100%;
    height: auto;
}

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

/*** Global Styles ***/

:root {
    --font-plain: "Fira Sans";
    --font-serif: "Zilla Slab";
    --font-mono: "Fira Mono";

    --line-height: 1.4;
    --line-height-narrow: 1.2;

    font-family: var(--font-plain);
    font-size: calc(1rem + 0.2vw);
    line-height: var(--line-height);
    color: var(--color-text);

    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;

    --measure: 60ch;

    /* Scale */
    --ratio: 1.4;

    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0)  / var(--ratio));
    --s0:  1rem;
    --s1:  calc(var( --s0) * var(--ratio));
    --s2:  calc(var( --s1) * var(--ratio));
    --s3:  calc(var( --s2) * var(--ratio));
    --s4:  calc(var( --s3) * var(--ratio));
    --s5:  calc(var( --s4) * var(--ratio));

    /* Colors */
    --color-primary-200: hsl(47, 100%, 8%);
    --color-primary-300: hsl(47, 100%, 35%);
    --color-primary-400: hsl(47, 100%, 40%);
    --color-primary-500: hsl(47, 73%, 58%);
    --color-primary-600: hsl(47, 73%, 70%);
    --color-primary-800: hsl(47, 73%, 85%);
    --color-primary-900: hsl(47, 73%, 90%);

    --color-contrast-400: hsl(186, 18%, 30%);
    --color-contrast-500: hsl(186, 18%, 42%);
    --color-contrast-700: hsl(186, 18%, 70%);

    --color-neutral-100: hsl(203, 7%, 5%);
    --color-neutral-200: hsl(203, 7%, 10%);
    --color-neutral-300: rgb(36, 39, 41);
    --color-neutral-400: hsl(203, 7%, 24%);
    --color-neutral-500: #535b5f;
    --color-neutral-700: hsl(38, 8%, 90%);
    --color-neutral-800: hsl(38, 8%, 95%);

    --color-outside: var(--color-neutral-400);
    --color-bg: var(--color-neutral-800);
    --color-bg-alt1: var(--color-neutral-700);

    --color-links-on-light: var(--color-primary-300);
    --color-links-on-dark:  var(--color-primary-500);

    --color-button-bg: var(--color-primary-500);
    --color-button-text: var(--color-text);
    --color-button-bg-hover: var(--color-primary-800);

    --color-text: var(--color-neutral-200);
    --color-text-outside: var(--color-neutral-800);
    --color-text-on-primary: var(--color-neutral-200);
    --color-links: var(--color-links-on-light);
    --color-links-outside: var(--color-links-on-dark);

    --color-accent: var(--color-primary-500);
    --color-bg-accent: var(--color-primary-900);
    
    --color-shadow: hsla(-47, 10%, 18%, 0.5);
    --color-shadow-light: hsla(-47, 10%, 18%, 0.25);
    
    --color-input-outline: var(--color-neutral-400);
    --color-input-bg: var(--color-bg);
    --color-input-highlight: var(--color-primary-500);

    /* Controls */
    --focus-outline-width: 0.15rem;
}

/* Dark mode */
/* @media (prefers-color-scheme: dark) {
    :root {
        --color-outside: var(--color-neutral-100);
        --color-bg: var(--color-neutral-300);
        --color-bg-alt1: var(--color-neutral-200);

        --color-text: var(--color-neutral-800);
        --color-text-outside: var(--color-neutral-800);
        --color-links: var(--color-links-on-dark);
        --color-links-outside: var(--color-links-on-dark);

        --color-button-text: var(--color-neutral-200);

        --color-bg-accent: var(--color-primary-200);

        --color-shadow: hsla(-47, 10%, 5%, 0.75);
    }
} */

/*** Components ***/

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.center {
    max-inline-size: var(--measure);
    box-sizing: content-box;
    margin-inline: auto;
    padding-inline: var(--s1);
}

.center-intrinsic {
    max-inline-size: var(--measure);
    box-sizing: content-box;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rect {
    padding: var(--s1);
}

.grid {
    --grid--min: 10rem;
    --grid--space: var(--s1);

    display: grid;
    grid-gap: var(--grid--space);
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid--min), 100%), 1fr));
}

.stack > * + * {
    margin-block-start: var(--s0);
}

.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    --threshold: 45rem;
}

.switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
}

/*** Basic Styles ***/

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

a:hover {
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    line-height: var(--line-height-narrow);
    font-weight: bold;
}

p,
h1, h2, h3, h4, h5, h6,
li,
figcaption {
  max-inline-size: var(--measure);
}

dl dt {
    font-family: var(--font-serif);
    font-weight: bold;
}

dd + dt {
    margin-block-start: var(--s0);
}

/*** Input styling ***/

select {
    display: inline-block;
    margin: 0;

    background-color: var(--color-input-bg);

    border: thin solid var(--color-input-outline);
    border-radius: 0;

    font: inherit;
    color: inherit;
    font-size: 0.9em;

    padding: 0.08em 1.8em 0.08em 0.3em;
  
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;

    /* Triangle */
    background-image:
        linear-gradient(45deg, transparent 50%, gray 50%),
        linear-gradient(135deg, gray 50%, transparent 50%);
    background-position:
        calc(100% - 15px) calc(50% + 1px),
        calc(100% - 10px) calc(50% + 1px);
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
  }

.radiogroup {
    display: inline-flex;
    gap: var(--s-2);

    flex-wrap: wrap;
    align-items: top;
}

.radiogroup-items {
    display: inline-flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    align-items: baseline;
}

.container {
    display: flex;
    justify-content: center;

    position: relative;
    padding-left: 1.3em;
}
  
/* Hide default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}
  
.checkmark {
    position: absolute;

    top: 0.2em;
    left: 0;

    height: 1em;
    width: 1em;

    background-color: var(--color-input-bg);
    border: thin solid var(--color-input-outline);
}
  
.container input:checked ~ .checkmark {
    background-color: var(--color-input-highlight);
}
  
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
  
/* Show when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}
  
.container .checkmark:after {
    left: 0.3em;
    top: 0.15em;

    width: 0.3em;
    height: 0.5em;

    border: solid var(--color-text-on-primary);
    border-width: 0 0.15em 0.15em 0;

    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.container-radio {
    display: inline-flex;
    justify-content: center;
    gap: 0.2em;

    position: relative;
    padding-left: 1.3em;
}
  
.container-radio input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}
  
.checkmark-radio {
    position: absolute;
    top: 0.2em;
    left: 0;

    height: 1em;
    width: 1em;

    background-color: var(--color-input-bg);
    border: 1px solid var(--color-input-outline);
    border-radius: 50%;
}
  
.container-radio input:checked ~ .checkmark-radio {
    background-color: var(--color-input-highlight);
}
  
.checkmark-radio:after {
    content: "";
    position: absolute;
    display: none;
}
  
.container-radio input:checked ~ .checkmark-radio:after {
    display: block;
}
  
.container-radio .checkmark-radio:after {
    --dot-padding: 0.25em;
    top: calc(var(--dot-padding));
    left: calc(var(--dot-padding));

    width: calc(0.5em - 2px);
    height: calc(0.5em - 2px);

    background-color: var(--color-text-on-primary);
    border-radius: 50%;
}

select:focus-visible,
.container input:focus-visible + .checkmark,
.container-radio input:focus-visible + .checkmark-radio,
input[type="submit"]:focus-visible {
    outline: var(--color-contrast-500) solid var(--focus-outline-width);
    outline-offset: 0;
}

/*** Specific Styles ***/

.submit-section {
    display: flex;
    justify-content: flex-end;
}

.button,
input.button {
    display: inline-block;

    /* Do not prevent button text from wrapping */
    white-space: normal;

    background-color: var(--color-button-bg);

    color: var(--color-button-text);
    text-decoration: none;

    padding: var(--s-2) var(--s0);
    border: 1px solid black;

    --color-text: var(--color-button-text);
}

.button:hover {
    background-color: var(--color-button-bg-hover);
}

.button-back::before {
    content: "←";
    padding-inline-end: var(--s-3);
    display: inline-block;
}

.button-read-more::after {
    content: "→";
    padding-inline-start: var(--s-3);
}

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

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

.page-header {
    padding: var(--s1);
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-bg-alt1);
}

.home-header {
    background-color: var(--color-bg-alt1);
}

.switcher.home-hero {
    max-inline-size: 100ch;
    align-items: center;
    padding-block-start: var(--s2);
    padding-block-end: var(--s5);

}

.home-hero-image {
    max-inline-size: 30rem;
    margin-inline: auto;
}

.home-content-section {
    padding-block: var(--s4);
}

.nav-groups {
    /* flex-grow: 1; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    gap: var(--s2);
    align-items: baseline;

    font-family: var(--font-serif);
    font-weight: bold;

    /* width: 100%; */
    /* flex-grow: 1; */
}

.nav {
    display: flex;
    flex-wrap: wrap;
    /* align-items: baseline; */
    gap: var(--s1);
    font-size: 1.2rem;
}

.nav-groups a {
    color: var(--color-text);
    text-decoration-thickness: 0.1rem;
    /* text-decoration-color: var(--color-accent); */
    /* text-decoration-corl */
    text-decoration: none;
}

.nav-groups a:hover {
    text-decoration: underline;
    /* text-decoration-color: currentColor; */
    /* text-decoration-color: var(--color-accent); */
}

.languages {
    display: flex;
    flex-direction: row;
    /* gap: -1pt; */
    /* gap: 1pt; */
}

.language-choice {
    padding: var(--s-4) var(--s-2); 
    /* border: 1pt transparent var(--color-bg); */
    /* font-weight: normal; */
    border: 1pt solid black;
}

.language-choice + .language-choice {
    border-left: none;
}


.language-choice.active,
.language-choice:hover {
    /* padding: var(--s-5) var(--s-2);  */
    /* background-color: var(--color-contrast-400); */
    background-color: var(--color-accent);
    /* color: var(--color-text-outside); */
    text-decoration: none !important;
}


.main-content {
    max-inline-size: 100ch;
}

.hero-title {
    font-size: 2.5rem;
}

.switched-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--s0);
}

.form-section-header > * + * {
    margin-block-start: var(--s-2);
}

.animation-logo {
    width: 7.5em;
}

footer {
    background-color: var(--color-outside);
    color: var(--color-text-outside);

    --color-links: var(--color-links-outside);
    --color-text: var(--color-text-outside);
}

.page-footer {
    padding: var(--s1);
}

.color-alternating > * {
    background-color: var(--color-bg);
}

.color-alternating > :nth-child(2n) {
    background-color: var(--color-bg-alt1);
}

.color-bg-alt2 {
    background-color: var(--color-bg-alt1);
}

input.select-hidden {
    display: none;
}

.card-grid {
    --grid--min: 12rem;
    --grid--space: var(--s0);
}

.card {
    display: block;
    background-color: var(--color-bg-alt1);
    border: var(--s-3) solid var(--color-bg);
    box-shadow: 0 0.2rem 0.4rem 0 var(--color-shadow);
}

.card-shadow {
    box-shadow: 0 0.2rem 0.4rem 0 var(--color-shadow);
}

.card-grid .card {
    height: 100%;
}

.select-frame {
    --frame--width: 3;
    --frame--height: 2;
}

.select-frame-wide {
    --frame--width: 5;
    --frame--height: 1;
}

.card-label {
    padding: var(--s-3);
    margin-top: auto;
}

.card-select:checked ~ .card {
    border-color: var(--color-accent);
    outline: 1pt solid black;
}

.card-select:checked ~ .card-colored-bg {
    background-color: var(--color-bg-accent);
}

.main-content-section {
    padding-block: var(--s3);
}

.main-content-header {
    padding-block-end: 0;
}

.main-content-end {
    padding-block-end: var(--s3);
}

.footer-column {
    max-inline-size: 35ch;
}

.logo-footer {
    max-inline-size: 8em;
}

.summary_info {
    --threshold: 25em;
    gap: var(--s0);
}

.button-cluster {
    justify-content: space-between;
    align-items: baseline;
}

.label-align {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--s-3);
    align-items: baseline;
    max-width: 100%;
}

.label-align-baseline {
    vertical-align: baseline;
}

.custom-color-frame {
    background-color: var(--color-bg);
    padding: var(--s-3);

    display: flex;
    gap: 0.3em;
    align-items: center;
    justify-content: center;
}

/*** Utilities ***/

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

.stack-dist-large > * + * {
    margin-block-start: var(--s2);
}

.stack-space\:s-1 > * + * {
    margin-block-start: var(--s-1);
}

.stack-space\:s-2 > * + * {
    margin-block-start: var(--s-2);
}

.stack-dist-medium > * + * {
    margin-block-start: var(--s1);
}

.font-mono {
    font-family: var(--font-mono);
}

.fontsize-small {
    font-size: 0.85rem;
}

.unset-max-width > * {
    max-inline-size: unset;
}