@font-face {
  font-family: "Noto Sans";
  src: url("/sources/fonts/noto-sans/NotoSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/sources/fonts/fira-sans/FiraSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-h: 230;
  --brand-s: 65%;
  --brand-l: 85%;

  --brand-h: 0;
  --brand-s: 89%;
  --brand-l: 46%;


  --brand-h: 197;
  --brand-s: 90%;
  
  --color-brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --color-brand-text: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 1);
  --color-brand-stroke-strong: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.8);
  --color-brand-stroke-weak: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.2);
  --color-brand-fill: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.05);

  --red-h: 0;
  --red-s: 71%;
  --red-l: 78%;
  --color-red: hsl(var(--red-h) var(--red-s) var(--red-l));
  --color-red-text: hsl(var(--red-h) var(--red-s) var(--red-l) / 1);
  --color-red-stroke-strong: hsl(var(--red-h) var(--red-s) var(--red-l) / 0.8);
  --color-red-stroke-weak: hsl(var(--red-h) var(--red-s) var(--red-l) / 0.2);
  --color-red-fill: hsl(var(--red-h) var(--red-s) var(--red-l) / 0.05);

  --yellow-h: 42;
  --yellow-s: 82%;
  --yellow-l: 56%;
  --color-yellow: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l));
  --color-yellow-text: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / 1);
  --color-yellow-stroke-strong: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / 0.8);
  --color-yellow-stroke-weak: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / 0.2);
  --color-yellow-fill: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / 0.05);

  --green-h: 162;
  --green-s: 95%;
  --green-l: 48%;
  --color-green: hsl(var(--green-h) var(--green-s) var(--green-l));
  --color-green-text: hsl(var(--green-h) var(--green-s) var(--green-l) / 1);
  --color-green-stroke-strong: hsl(var(--green-h) var(--green-s) var(--green-l) / 0.8);
  --color-green-stroke-weak: hsl(var(--green-h) var(--green-s) var(--green-l) / 0.2);
  --color-green-fill: hsl(var(--green-h) var(--green-s) var(--green-l) / 0.05);
  
  --text-h: 230;
  --text-s: 100%;
  --text-l: 15%;
  --color-text: hsl(var(--text-h) var(--text-s) var(--text-l));
  --color-textstrong: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.9);
  --color-textweak: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.6);
  --color-strokestrong: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.45);
  --color-strokeweak: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.10);
  --color-fill: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.10);

  --bg-h: 0;
  --bg-s: 0%;
  --color-background: hsl(var(--bg-h) var(--bg-s) 245%);
  --color-base: hsl(var(--bg-h) var(--bg-s) 100% / 40%);
  --color-raised: hsl(var(--bg-h) var(--bg-s) 255%);
  --color-overlay: hsl(var(--bg-h) var(--bg-s) 255%);

  /* --color-base: hsl(0deg 0% 100% / 44%) !important; */

  --color-error: transparent;
  --color-warning: transparent;
  --color-success: transparent;

  --headfont: 'Fira Sans', system-ui, serif;
  --font: 'Noto Sans', system-ui, serif;

  --fontsize-heading1: 40px;
  --fontsize-heading2: 32px;
  --fontsize-heading3: 24px;
  --fontsize-heading4: 20px;
  --fontsize-normal: 18px;
  --fontsize-small: 16px;
  --fontsize-tiny: 14px;
  
  --lineheight-heading1: 48px;
  --lineheight-heading2: 40px;
  --lineheight-heading3: 32px;
  --lineheight-heading4: 28px;
  --lineheight-normal: 150%;
  --lineheight-small: 24px;
  --lineheight-tiny: 20px;

  --gap-xxxs: 2px;
  --gap-xxs: 4px;
  --gap-xs: 8px;
  --gap-s: 16px;
  --gap-m: 24px;
  --gap-l: 32px;
  --gap-xl: 48px;
  --gap-xxl: 80px;

  --border-radius-small: 8px;
  --border-radius-medium: 16px;
  --border-radius-large: 32px;

  --shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
  --shadow-m: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
  --shadow-l: inset 0 1px 2px #ffffff70, 0 4px 6px #00000030, 0 6px 10px #00000015;

  --transition: 0.1s ease-in-out;
  --transition-action: var(--transition);
  --transition-link: var(--transition);

  --underline-offset: 15% ;
}


@media (prefers-color-scheme: dark) {
  :root {
    --brand-h: 230;
    --brand-s: 40%;
    --brand-l: 99%;

    --red-h: 0;
    --red-s: 39%;
    --red-l: 100%;

    --yellow-h: 42;
    --yellow-s: 50%;
    --yellow-l: 88%;

    --green-h: 162;
    --green-s: 40%;
    --green-l: 78%;

    --text-h: 230;
    --text-s: 0%;
    --text-l: 100%;


    --color-textstrong: hsl(var(--text-h) var(--text-s) var(--text-l) / 1);
    --color-textweak: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.78);
    --color-strokestrong: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.60);
    --color-strokeweak: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.12);
    --color-fill: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.06);
    
    --bg-h: 230;
    --bg-s: 76%;
    
    --color-background: hsl(var(--bg-h) var(--bg-s) 2.5%);
    --color-base: hsl(var(--bg-h) var(--bg-s) 7.5% / 40%);
    --color-raised: hsl(var(--bg-h) var(--bg-s) 12.5%);
    --color-overlay: hsl(var(--bg-h) var(--bg-s) 12.5%);

  }

  header {
    background: hsl(230deg 76% 13% / 80%) !important;
  }
}

body {
  color: var(--color-text);
  line-height: var(--lineheight-normal);
  font-family: var(--font);
  margin: 0;
  overflow-x: hidden;
}

a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

a:hover {
  text-decoration: none;
}

.error {
  border-color: var(--color-red);
  background: var(--color-red-fill);
  color: var(--color-red);
}
.warning {
  border-color: var(--color-yellow);
  background: var(--color-yellow-fill);
  color: var(--color-yellow);
}
.success {
  border-color: var(--color-green);
  background: var(--color-green-fill);
  color: var(--color-green);
}

.error,
.warning,
.success {
  border: 1px solid;
}

.roundness-s {
  border-radius: var(--border-radius-small);
  corner-shape: squircle;
}
.roundness-m {
  border-radius: var(--border-radius-medium);
  corner-shape: squircle;
}
.roundness-l {
  border-radius: var(--border-radius-large);
  corner-shape: squircle;
}
h1 {
  color: var(--color-brand);
  font-size: var(--fontsize-heading1);
  line-height: var(--lineheight-heading1);
}
h2 {
  color: var(--color-textstrong);
  font-size: var(--fontsize-heading2);
  line-height: var(--lineheight-heading2);
}
h3 {
  color: var(--color-textstrong);
  font-size: var(--fontsize-heading3);
  line-height: var(--lineheight-heading3);
}
h4 {
  color: var(--color-textstrong);
  font-size: var(--fontsize-heading4);
  line-height: var(--lineheight-heading4);
}
h5 {
  color: var(--color-textstrong);
  font-size: var(--fontsize-heading5);
  line-height: var(--lineheight-heading5);
}
h6 {
  color: var(--color-textstrong);
  font-size: var(--fontsize-heading6);
  line-height: var(--lineheight-heading6);
}
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--headfont);
}

h1 .font-size-inherit {
  font-size: inherit;
}
h2 .font-size-inherit {
  font-size: inherit;
}
h3 .font-size-inherit {
  font-size: inherit;
}
h4 .font-size-inherit {
  font-size: inherit;
}
h5 .font-size-inherit {
  font-size: inherit;
}
h6 .font-size-inherit {
  font-size: inherit;
}

/* buttons */
button,
.btn-primary,
.btn-secondary,
.btn-tertiary {
  cursor: pointer;
  transition: var(--transition-action);
  border: var(--gap-xxxs) solid;
  padding: var(--gap-xs) var(--gap-s);
  font-size: var(--fontsize-small);
  line-height: var(--lineheight-small);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-s);
}

.btn-primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-background);
  border-radius: var(--border-radius-small);
  text-decoration: none;
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-brand);
  border-radius: var(--border-radius-small);
}
.btn-secondary:hover {
  background: var(--color-brand);
  color: var(--color-background);
  border-color: var(--color-brand);
}

.btn-tertiary {
  border: none;
  background: transparent;
  color: var(--color-brand);
  text-decoration: underline;
  border-radius: var(--border-radius-small);
}

.btn-monochrome {
  background: var(--color-textstrong);
  color: var(--fill);
}
.btn-monochrome-inverse {
  background: var(--fill);
  color: var(--color-textstrong);
}

.btn-tertiary.btn-monochrome,
.btn-tertiary.btn-monochrome-inverse {
  background: transparent;
}

/* if brand is light */
.btn-tertiary {
  color: var(--color-textstrong);
}



/* button states */
button:focus,
.btn-primary:focus,
.btn-secondary:focus,
button:hover,
.btn-primary:hover,
.btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-brand);
}

button:active,
.btn-primary:active,
.btn-secondary:active {
  background: var(--color-brand-stroke-weak);
}

/* on click: shrink */
button:active,
.btn-primary:active,
.btn-secondary:active,
.btn-tertiary:active {
  transform: scale(0.97);
}

button:focus,
.btn-primary:focus,
.btn-secondary:focus {
  outline: 1px solid var(--color-brand);
}

button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(1);
}

.style-card {
  border: var(--gap-xxs) solid var(--color-brand);
  background: var(--color-brand-fill);
  color: var(--color-brand);
}

.red {
  --brand-h: var(--red-h);
  --brand-s: var(--red-s);
  --brand-l: var(--red-l); 
  --color-brand: var(--color-red);
  --color-brand-text: var(--color-red-text);
  --color-brand-stroke-strong: var(--color-red-stroke-strong);
  --color-brand-stroke-weak: var(--color-red-stroke-weak);
  --color-brand-fill: var(--color-red-fill);
}
.yellow {
  --brand-h: var(--yellow-h);
  --brand-s: var(--yellow-s);
  --brand-l: var(--yellow-l); 
  --color-brand: var(--color-yellow);
  --color-brand-text: var(--color-yellow-text);
  --color-brand-stroke-strong: var(--color-yellow-stroke-strong);
  --color-brand-stroke-weak: var(--color-yellow-stroke-weak);
  --color-brand-fill: var(--color-yellow-fill);
}
.green {
  --brand-h: var(--green-h);
  --brand-s: var(--green-s);
  --brand-l: var(--green-l); 
  --color-brand: var(--color-green);
  --color-brand-text: var(--color-green-text);
  --color-brand-stroke-strong: var(--color-green-stroke-strong);
  --color-brand-stroke-weak: var(--color-green-stroke-weak);
  --color-brand-fill: var(--color-green-fill);
}

.flex {
  display: flex;
}
.flex.column {
  flex-direction: column;
}
.flex.column-reverse {
  flex-direction: column-reverse;
}
.flex.row {
  flex-direction: row;
}
.flex.row-reverse {
  flex-direction: row-reverse;
}
.flex.flex-horizontal-space-around {
  justify-content: space-around;
}
.flex.flex-horizontal-space-evenly {
  justify-content: space-evenly;
}
.flex.flex-horizontal-space-between {
  justify-content: space-between;
}
.flex.flex-horizontal-center {
  justify-content: center;
}
.flex.flex-horizontal-flex-start {
  justify-content: flex-start;
}
.flex.flex-horizontal-flex-end {
  justify-content: flex-end;
}

.flex.flex-vertical-stretch {
  align-items: stretch;
}
.flex.flex-vertical-baseline {
  align-items: baseline;
}
.flex.flex-vertical-center {
  align-items: center;
}
.flex.flex-vertical-flex-start {
  align-items: flex-start;
}
.flex.flex-vertical-flex-end {
  align-items: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex.gap-xs {
  gap: var(--gap-xs);
}
.flex.gap-s {
  gap: var(--gap-s);
}
.flex.gap-m {
  gap: var(--gap-m);
}
.flex.gap-l {
  gap: var(--gap-l);
}
.flex.gap-xl {
  gap: var(--gap-xl);
}
.flex.gap-xxl {
  gap: var(--gap-xxl);
}
.flex.vertical-gap-xs {
  row-gap: var(--gap-xs);
}
.flex.vertical-gap-s {
  row-gap: var(--gap-s);
}
.flex.vertical-gap-m {
  row-gap: var(--gap-m);
}
.flex.vertical-gap-l {
  row-gap: var(--gap-l);
}
.flex.vertical-gap-xl {
  row-gap: var(--gap-xl);
}
.flex.vertical-gap-xxl {
  row-gap: var(--gap-xxl);
}
.flex.horizontal-gap-xs {
  column-gap: var(--gap-xs);
}
.flex.horizontal-gap-s {
  column-gap: var(--gap-s);
}
.flex.horizontal-gap-m {
  column-gap: var(--gap-m);
}
.flex.horizontal-gap-l {
  column-gap: var(--gap-l);
}
.flex.horizontal-gap-xl {
  column-gap: var(--gap-xl);
}
.flex.horizontal-gap-xxl {
  column-gap: var(--gap-xxl);
}
.padding-none {
  padding: 0;
}
.padding-xs {
  padding: var(--gap-xs);
}
.padding-s {
  padding: var(--gap-s);
}
.padding-m {
  padding: var(--gap-m);
}
.padding-l {
  padding: var(--gap-l);
}
.padding-xl {
  padding: var(--gap-xl);
}
.padding-xxl {
  padding: var(--gap-xxl);
}

.padding-top-none {
  padding-top: 0;
}
.padding-top-xs {
  padding-top: var(--gap-xs);
}
.padding-top-s {
  padding-top: var(--gap-s);
}
.padding-top-m {
  padding-top: var(--gap-m);
}
.padding-top-l {
  padding-top: var(--gap-l);
}
.padding-top-xl {
  padding-top: var(--gap-xl);
}
.padding-top-xxl {
  padding-top: var(--gap-xxl);
}
.padding-right-none {
  padding-right: 0;
}
.padding-right-xs {
  padding-right: var(--gap-xs);
}
.padding-right-s {
  padding-right: var(--gap-s);
}
.padding-right-m {
  padding-right: var(--gap-m);
}
.padding-right-l {
  padding-right: var(--gap-l);
}
.padding-right-xl {
  padding-right: var(--gap-xl);
}
.padding-right-xxl {
  padding-right: var(--gap-xxl);
}
.padding-bottom-none {
  padding-bottom: 0;
}
.padding-bottom-xs {
  padding-bottom: var(--gap-xs);
}
.padding-bottom-s {
  padding-bottom: var(--gap-s);
}
.padding-bottom-m {
  padding-bottom: var(--gap-m);
}
.padding-bottom-l {
  padding-bottom: var(--gap-l);
}
.padding-bottom-xl {
  padding-bottom: var(--gap-xl);
}
.padding-bottom-xxl {
  padding-bottom: var(--gap-xxl);
}
.padding-left-none {
  padding-left: 0;
}
.padding-left-xs {
  padding-left: var(--gap-xs);
}
.padding-left-s {
  padding-left: var(--gap-s);
}
.padding-left-m {
  padding-left: var(--gap-m);
}
.padding-left-l {
  padding-left: var(--gap-l);
}
.padding-left-xl {
  padding-left: var(--gap-xl);
}
.padding-left-xxl {
  padding-left: var(--gap-xxl);
}


.margin-xs {
  margin: var(--gap-xs);
}
.margin-s {
  margin: var(--gap-s);
}
.margin-m {
  margin: var(--gap-m);
}
.margin-l {
  margin: var(--gap-l);
}
.margin-xl {
  margin: var(--gap-xl);
}
.margin-xxl {
  margin: var(--gap-xxl);
}

.margin-top-none {
  margin-top: unset;
}
.margin-top-auto {
  margin-top: auto;
}
.margin-top-xs {
  margin-top: var(--gap-xs);
}
.margin-top-s {
  margin-top: var(--gap-s);
}
.margin-top-m {
  margin-top: var(--gap-m);
}
.margin-top-l {
  margin-top: var(--gap-l);
}
.margin-top-xl {
  margin-top: var(--gap-xl);
}
.margin-top-xxl {
  margin-top: var(--gap-xxl);
}
.margin-right-none {
  margin-right: unset;
}
.margin-right-auto {
  margin-right: auto;
}
.margin-right-xs {
  margin-right: var(--gap-xs);
}
.margin-right-s {
  margin-right: var(--gap-s);
}
.margin-right-m {
  margin-right: var(--gap-m);
}
.margin-right-l {
  margin-right: var(--gap-l);
}
.margin-right-xl {
  margin-right: var(--gap-xl);
}
.margin-right-xxl {
  margin-right: var(--gap-xxl);
}
.margin-bottom-none {
  margin-bottom: unset;
}
.margin-bottom-auto {
  margin-bottom: auto;
}
.margin-bottom-xs {
  margin-bottom: var(--gap-xs);
}
.margin-bottom-s {
  margin-bottom: var(--gap-s);
}
.margin-bottom-m {
  margin-bottom: var(--gap-m);
}
.margin-bottom-l {
  margin-bottom: var(--gap-l);
}
.margin-bottom-xl {
  margin-bottom: var(--gap-xl);
}
.margin-bottom-xxl {
  margin-bottom: var(--gap-xxl);
}
.margin-left-none {
  margin-left: unset;
}
.margin-left-auto {
  margin-left: auto;
}
.margin-left-xs {
  margin-left: var(--gap-xs);
}
.margin-left-s {
  margin-left: var(--gap-s);
}
.margin-left-m {
  margin-left: var(--gap-m);
}
.margin-left-l {
  margin-left: var(--gap-l);
}
.margin-left-xl {
  margin-left: var(--gap-xl);
}
.margin-left-xxl {
  margin-left: var(--gap-xxl);
}

.width-fit {
  width: fit-content;
}
.height-fit {
  height: fit-content;
}
.width-half {
  width: 50%;
}
.height-half {
  height: 50%;
}
.width-100vw {
  width: 100vw;
}
.width-80vw {
  width: 80vw;
}
.width-75vw {
  width: 75vw;
}
.width-60vw {
  width: 60vw;
}
.width-50vw {
  width: 50vw;
}
.width-40vw {
  width: 40vw;
}
.width-20vw {
  width: 20vw;
}
.width-15vw {
  width: 15vw;
}
.height-100vh {
  height: 100vh;
}
.height-80vh {
  height: 80vh;
}
.height-75vh {
  height: 75vh;
}
.height-60vh {
  height: 60vh;
}
.height-50vh {
  height: 50vh;
}
.height-40vh {
  height: 40vh;
}
.height-20vh {
  height: 20vh;
}
.height-15vh {
  height: 15vh;
}
.width-100 {
  width: 100%;
}
.width-80 {
  width: 80%;
}
.width-75 {
  width: 75%;
}
.width-66 {
  width: 66%;
}
.width-60 {
  width: 60%;
}
.width-50 {
  width: 50%;
}
.width-40 {
  width: 40%;
}
.width-33 {
  width: 33%;
}
.width-30 {
  width: 30%;
}
.width-25 {
  width: 25%;
}
.width-20 {
  width: 20%;
}
.width-auto {
  width: auto;
}
.height-auto {
  height: auto;
}
.width-one-third {
  width: 33.3%;
}
.width-two-third {
  width: 66.6%;
}
.max-width-100 {
  max-width: 100%;
}
.gap-xxl > .max-width-100 {
  max-width: calc(100% - (var(--gap-xxl) / 2));
  box-sizing: border-box;
}
.gap-xl > .max-width-100 {
  max-width: calc(100% - (var(--gap-xl) / 2));
  box-sizing: border-box;
}
.gap-l > .max-width-100 {
  max-width: calc(100% - (var(--gap-l) / 2));
  box-sizing: border-box;
}
.gap-m > .max-width-100 {
  max-width: calc(100% - (var(--gap-m) / 2));
  box-sizing: border-box;
}
.gap-s > .max-width-100 {
  max-width: calc(100% - (var(--gap-s) / 2));
  box-sizing: border-box;
}
.gap-xs > .max-width-100 {
  max-width: calc(100% - (var(--gap-xs) / 2));
  box-sizing: border-box;
}
.max-width-75 {
  max-width: 75%;
}
.gap-xxl > .max-width-75 {
  max-width: calc(75% - (var(--gap-xxl) / 2));
  box-sizing: border-box;
}
.gap-xl > .max-width-75 {
  max-width: calc(75% - (var(--gap-xl) / 2));
  box-sizing: border-box;
}
.gap-l > .max-width-75 {
  max-width: calc(75% - (var(--gap-l) / 2));
  box-sizing: border-box;
}
.gap-m > .max-width-75 {
  max-width: calc(75% - (var(--gap-m) / 2));
  box-sizing: border-box;
}
.gap-s > .max-width-75 {
  max-width: calc(75% - (var(--gap-s) / 2));
  box-sizing: border-box;
}
.gap-xs > .max-width-75 {
  max-width: calc(75% - (var(--gap-xs) / 2));
  box-sizing: border-box;
}
.gap-xxl > .max-width-66 {
  max-width: calc(66% - (var(--gap-xxl) / 2));
  box-sizing: border-box;
}
.max-width-66 {
  max-width: 66%;
}
.gap-xl > .max-width-66 {
  max-width: calc(66% - (var(--gap-xl) / 2));
  box-sizing: border-box;
}
.gap-l > .max-width-66 {
  max-width: calc(66% - (var(--gap-l) / 2));
  box-sizing: border-box;
}
.gap-m > .max-width-66 {
  max-width: calc(66% - (var(--gap-m) / 2));
  box-sizing: border-box;
}
.gap-s > .max-width-66 {
  max-width: calc(66% - (var(--gap-s) / 2));
  box-sizing: border-box;
}
.gap-xs > .max-width-66 {
  max-width: calc(66% - (var(--gap-xs) / 2));
  box-sizing: border-box;
}
.max-width-50 {
  max-width: 50%;
}
.gap-xxl > .max-width-50 {
  max-width: calc(50% - (var(--gap-xxl) / 2));
  box-sizing: border-box;
}
.gap-xl > .max-width-50 {
  max-width: calc(50% - (var(--gap-xl) / 2));
  box-sizing: border-box;
}
.gap-l > .max-width-50 {
  max-width: calc(50% - (var(--gap-l) / 2));
  box-sizing: border-box;
}
.gap-m > .max-width-50 {
  max-width: calc(50% - (var(--gap-m) / 2));
  box-sizing: border-box;
}
.gap-s > .max-width-50 {
  max-width: calc(50% - (var(--gap-s) / 2));
  box-sizing: border-box;
}
.gap-xs > .max-width-50 {
  max-width: calc(50% - (var(--gap-xs) / 2));
  box-sizing: border-box;
}
.max-width-33 {
  max-width: 33%;
}
.gap-xxl > .max-width-33 {
  max-width: calc(33% - (var(--gap-xxl) / 2));
  box-sizing: border-box;
}
.gap-xl > .max-width-33 {
  max-width: calc(33% - (var(--gap-xl) / 2));
  box-sizing: border-box;
}
.gap-l > .max-width-33 {
  max-width: calc(33% - (var(--gap-l) / 2));
  box-sizing: border-box;
}
.gap-m > .max-width-33 {
  max-width: calc(33% - (var(--gap-m) / 2));
  box-sizing: border-box;
}
.gap-s > .max-width-33 {
  max-width: calc(33% - (var(--gap-s) / 2));
  box-sizing: border-box;
}
.gap-xs > .max-width-33 {
  max-width: calc(33% - (var(--gap-xs) / 2));
  box-sizing: border-box;
}
.max-width-25 {
  max-width: 25%;
}
.gap-xxl > .max-width-25 {
  max-width: calc(25% - (var(--gap-xxl) / 1.33));
  box-sizing: border-box;
}
.gap-xl > .max-width-25 {
  max-width: calc(25% - (var(--gap-xl) / 1.33));
  box-sizing: border-box;
}
.gap-l > .max-width-25 {
  max-width: calc(25% - (var(--gap-l) / 1.33));
  box-sizing: border-box;
}
.gap-m > .max-width-25 {
  max-width: calc(25% - (var(--gap-m) / 1.33));
  box-sizing: border-box;
}
.gap-s > .max-width-25 {
  max-width: calc(25% - (var(--gap-s) / 1.33));
  box-sizing: border-box;
}
.gap-xs > .max-width-25 {
  max-width: calc(25% - (var(--gap-xs) / 1.33));
  box-sizing: border-box;
}

a.color-normal {
  color:inherit;
  text-decoration: none;
}
a.color-normal:hover > h1,
a.color-normal:hover > h2,
a.color-normal:hover > h3,
a.color-normal:hover > h4,
a.color-normal:hover > h5,
a.color-normal:hover > h6 {
  text-decoration: underline;
}

.background-none {
  background: transparent;
}
section.background-none {
  box-shadow: none;
  border-radius: unset;
}

img {
  width: fit-content;
  height: fit-content;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

section.cards > div.card {
  width: 25%;
  height: auto;
  aspect-ratio: 4/5;
  background: red;
  border-radius: 1rem;
}

.text-align-end {
  text-align: end;
}
.text-align-start {
  text-align: start;
}
.text-align-center {
  text-align: center;
}
.text-align-justify {
  text-align: justify;
}

section.ticker > p {
  white-space: nowrap;
  z-index: 1;
  position: relative;
  transform: translateX(0%);
  left: 110%;
  height: 100%;
  white-space: nowrap;
  animation: scrollText 90s infinite linear;
  display: inline-block;
  height: fit-content;
}

@keyframes scrollText {
  from {
    left: 110%;
    transform: translateX(0);
  }
  to {
    left: 0;
    right: 0;
    transform: translateX(-110%);
  }
}

section.carousel > div.carousel {
  --primary: var(--color-brand);
  --gap: 1rem;
  --rows: 2;
  --controls-size: 2rem;
  --marker-size: 1rem;
  display: flex; 
  flex-direction: row;
  width: 50vw;
  height: auto;
  overflow-x: scroll;
  gap: var(--gap);
  anchor-name: --carousel;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
  margin-bottom: 1rem;
}

section.carousel > div.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: calc(var(--gap) / 2);
  position-anchor: --carousel;
  position-area: center bottom;
  position: fixed;
}
section.carousel > div.carousel > div.card::scroll-marker {
  content: '';
  height: var(--marker-size);
  width: var(--marker-size);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--primary);
  opacity: 0.5;
}

section.carousel > div.carousel > div.card::scroll-marker:target-current {
  opacity: 1;
}


section.carousel > div.carousel::-webkit-scrollbar {
  visibility: hidden;
  display: none;
}
section.carousel > div.carousel > div.card {
  scroll-snap-align: start;
  flex: 0 0 calc(100% / var(--rows) - (var(--gap) * (var(--rows) - 1)));
  height: auto;
  aspect-ratio: 3/2;
  background: #171616;
  border-radius: 2rem;
}

section.carousel > div.carousel > div.card:nth-child(even) {
  opacity: 0.2;
}

section.carousel > div.carousel::scroll-button(*) {
  font-size: var(--controls-size);
  border: none;       
  color: inherit;
  background: var(--primary);
  width: var(--controls_size);
  height: var(--controls-size);
  aspect-ratio: 1/1;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  position-anchor: --carousel;
  position-area: right center;
}

section.carousel > div.carousel::scroll-button(*):disabled {
  opacity: 0.5;
}

section.carousel > div.carousel::scroll-button(left) {
  content: '<';
  position-area: left center;
  transform: translateX(50%);
}

section.carousel > div.carousel::scroll-button(right) {
  content: '  >';
  position-area: right center;
  transform: translateX(-50%);
}

section.carousel > div.carousel::scroll-button(up),
section.carousel > div.carousel::scroll-button(down) {
  content: '';
  display: none;
}


section#marquee {
  max-width: 100vw;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: auto;
}
section#marquee > div.marquee {
  display: flex;
  overflow:hidden;
  user-select: none;
  gap: var(--gap-m);
  --mask-direction: left;
  mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
  --duration: 60s;
}
section#marquee > div.marquee > div.marquee_group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap-m);
  min-width: 100%;
  animation: scroll-x var(--duration) linear infinite;
}
section#marquee > div.marquee > div.marquee_group div.image {
  overflow: hidden;
}


@media (prefers-reduced-motion: reduce) {
  section#marquee > div.marquee > div.marquee_group {
    animation-play-state: paused;
  }
}

section#marquee > div.marquee.marquee--reverse > .marquee_group {
  animation-direction: reverse;
  animation-delay: -3s;
}


@keyframes scroll-x {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(calc(-100% - var(--gap-m)));
  }
}

.card {
  background: var(--color-raised);
  border-radius: var(--border-radius-small);
  box-shadow: var(--shadow-s);
}

footer, header {
  background: var(--color-overlay);
}

header {
  position: sticky;
  z-index: 100000;
  top: 0;
  box-shadow: var(--shadow-s);

  background: hsl(0deg 0% 100% / 80%);
  backdrop-filter: blur(var(--gap-l));
}

header nav > a {
  white-space: nowrap;
}

footer {
  padding: 2rem 1rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  background: radial-gradient(circle at top, hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 12.55%), transparent 40%), var(--color-background);
}

main {
  padding: 3rem 2rem 4rem;
}

footer {
  margin-top: auto;
}

section {
  width: 35%;
  min-width: 500px;
  padding: 1rem;
  box-shadow: var(--shadow-m);
  border-radius: var(--border-radius-medium);
  background-color: var(--color-base);

  backdrop-filter: blur(var(--gap-xl));
  corner-shape: squircle;
}

section.divider,
section.spacer,
section.title {
  border-radius: unset;
  box-shadow: unset;
  text-align: center;
  background: transparent;
}

section.app {
  width: 50%;
  padding: 1rem;
  box-shadow: unset;
  border-radius: unset;
}

main > section.intro > img {
  aspect-ratio: 2/3;
  height: auto;
  width: auto;
  background: #d7d7d7;
  min-width: 12rem;
  object-fit: cover;
  border-radius: var(--border-radius-medium);
}

section.apps.cards > a.card > img {
  aspect-ratio: 1/1;
  height: auto;
  background: #d7d7d7;
  corner-shape: squircle;
}

main > section.contact > div.wrapper {
  background: var(--color-raised);
}

section.app > div.wrapper.screenshots > div.image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.75rem;
}

form .input {
  border: 1px solid;
  width: 100%;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  position: relative;
  --background: var(--color-background);
  background: var(--background);
}

form .input > input, 
form .input textarea {
  padding: 1.25rem 0.75rem 0.615rem;
  font-size: 1rem;
  width: 100%;
  background: transparent;
  color: #fff;
  outline: none;
  border: none;
}

form .input > label {
  position: absolute;
  background: var(--background);
  top: 0;
  left: 0.5rem;
  transform: translateY(-50%);
  padding: 0 0.5rem;
  font-size: 1rem;
  line-height: 1rem;
}

form .input.button > button {
  border: none;
  background: none;
  color: inherit;
  width: 100%;
  padding: 1rem;
  font-size: 1.125rem;
  cursor: pointer;
  outline: none;
  transition: 0.4s ease;
}

form .input:has(textarea:focus),
form .input:has(input:focus), 
form .input:has(button:focus) {
  color: var(--primary);
}

form .input.button > button:hover {
  background: var(--primary);
  color: var(--background);
}

form .input.button:has(button:hover) {
  border-color: var(--primary);
}

form .input.button {
  overflow: hidden;
}

div.card > *:first-child {
  margin-top: 0;
}

div.card > *:last-child {
  margin-bottom: 0;
}

form .input textarea {
  resize: vertical;
  min-height: 3.5rem;
  font-family: inherit;
  box-sizing: border-box;
}

form .input.phone {
  display: none;
  visibility: hidden;
  user-select: none;
}

.marquee .image {
  aspect-ratio: 4/3;
}

.marquee .image > img {
  width: 100%;
  height: 100%;
}

a#logolink > svg {
  height: var(--gap-xl);
  width: var(--gap-xl);
  object-fit: contain;
}

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

section.app > div:first-child > div:first-child > img {
  width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  object-fit: cover;
  height: 100%;
}

main > section#banner > img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

main > section#banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: unset;
  background: unset;
  z-index: -1;
}


:root:has(body.home) {
  --brand-l: 48%;
  --brand-h: 23;
  --brand-s: 92%;
  --color-base: hsl(var(--bg-h) var(--bg-s) 100% / 02%);
}
body.home > header,
body.home > footer {
  background: transparent !important;
}
body.home > main {
  min-height: calc(100vh - 318px);
  justify-content: space-between;
}
body.home section.spacer, 
body.home section.title {
  background: transparent;
  backdrop-filter: none;
}
body.home .btn-primary {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255,255,255, 0.75);
  color: white;
}
body.home .btn-primary:active, 
body.home .btn-primary:hover, 
body.home .btn-primary:focus {
  background: rgba(255,255,255,0.28);
  --color-brand: white;
  color: white;
}
body.home footer {
  backdrop-filter: blur(var(--gap-s));
  background: rgba(255, 255, 255, 0.05);
  color: white;
}
body.home .btn-tertiary {
  color: white;
}

@media screen and (max-width: 600px) {
  section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: unset;
  }

  main > section.intro {
    flex-direction: column !important;
  }

  main > section.intro > img {
    margin: 0 auto;
    max-height: 16rem;
  }

  section#apps {
    flex-direction: column;
  }

  section#apps > a.card {
    width: 100%;
    max-width: 100%;
  }

  body.dev > header > nav > a:nth-child(2) {
    display: none;
  }

  header {
    padding: var(--gap-xs) !important;
    padding-left: var(--gap-s) !important;
    padding-right: var(--gap-s) !important;
    gap: var(--gap-m) !important;
  }
 
  .marquee .image {
    aspect-ratio: 4/5;
    min-height: 4rem;
  }

  footer {
    flex-direction: column !important;
  }
  footer span.sperator {
    display: none;
  }
  
  section.app {
    width: 100%;
    box-sizing: content-box;
  }
  
  section.app div.width-one-third {
    width: 50%;
  }
  
  section.app div.wrapper.screenshots > div.image {
    max-width: calc(50% - var(--gap-l));
    width: 50%;
  }

  body.home section.linklist {
    background: rgba(0,0,0,0.33);
    backdrop-filter: blur(var(--gap-l));
    gap: var(--gap-s);
  }

  body.home > main {
    min-height: calc(100vh - 382px);
  }
}

@media screen and (max-width: 500px) {
  section.app > div:first-child {
    flex-direction: column;
  } 
  section.app div.wrapper.screenshots > div.image,
  section.app > div:first-child > div {
    width: 100%;
    max-width: 100%;
  }
  
  section.app div.wrapper.screenshots > div.image > img,
  section.app div.wrapper.screenshots > div.image {
    height: auto;
  }
}


body.home > main > section.text.card {
  background: var(--color-base);
}