@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: 100;
  --brand-s: 100%;
  --brand-l: 0%;
  
  --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: 85%;
  --red-l: 50%;
  --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) 250%);
  --color-raised: hsl(var(--bg-h) var(--bg-s) 255%);
  --color-overlay: hsl(var(--bg-h) var(--bg-s) 255%);

  --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-heading5: 19px;
  --fontsize-heading6: 18px;
  --fontsize-normal: 18px;
  --fontsize-small: 16px;
  --fontsize-tiny: 14px;
  
  --lineheight-heading1: 48px;
  --lineheight-heading2: 40px;
  --lineheight-heading3: 32px;
  --lineheight-heading4: 28px;
  --lineheight-heading5: 24px;
  --lineheight-heading6: 20px;
  --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% ;
}


:root[data-theme="dark"] {
  --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%);
  --color-raised: hsl(var(--bg-h) var(--bg-s) 12.5%);
  --color-overlay: hsl(var(--bg-h) var(--bg-s) 12.5%);
}


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

.dark { display: none; }
.light { display: inline; }

[data-theme="dark"] .dark { display: inline; }
[data-theme="dark"] .light { display: none; }

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);
}

.color-brand {
  color: var(--color-brand);
}
.color-normal {
  color: var(--color-text);
}

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

.shadow-s {
  box-shadow: var(--shadow-s);
}
.shadow-m {
  box-shadow: var(--shadow-m);
}
.shadow-l {
  box-shadow: var(--shadow-l);
}
.roundness-s {
  border-radius: var(--border-radius-small);
}
.roundness-m {
  border-radius: var(--border-radius-medium);
}
.roundness-l {
  border-radius: var(--border-radius-large);
}
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;
}


div#breadcrum {
  flex-wrap: wrap;
  row-gap: var(--gap-xxs);
}

div#breadcrum a {
  white-space: nowrap;
}

/* 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-primary svg {
  fill: var(--color-background);
}

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

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

.btn-monochrome {
  background: var(--color-textstrong);
  color: var(--fill);
}
.btn-monochrome svg {
  fill: var(--fill);
}
.btn-monochrome-inverse {
  background: var(--fill);
  color: var(--color-textstrong);
}
.btn-monochrome-inverse svg {
  fill: 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:focus svg,
.btn-primary:focus svg,
.btn-secondary:focus svg,
button:hover svg,
.btn-primary:hover svg,
.btn-secondary:hover svg {
  fill: 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);
}

.padding-horizontal-none {
  padding-left: 0;
  padding-right: 0;
}
.padding-horizontal-xs {
  padding-left: var(--gap-xs);
  padding-right: var(--gap-xs);
}
.padding-horizontal-s {
  padding-left: var(--gap-s);
  padding-right: var(--gap-s);
}
.padding-horizontal-m {
  padding-left: var(--gap-m);
  padding-right: var(--gap-m);
}
.padding-horizontal-l {
  padding-left: var(--gap-l);
  padding-right: var(--gap-l);
}
.padding-horizontal-xl {
  padding-left: var(--gap-xl);
  padding-right: var(--gap-xl);
}
.padding-horizontal-xxl {
  padding-left: var(--gap-xxl);
  padding-right: var(--gap-xxl);
}
.padding-vertical-none {
  padding-top: 0;
  padding-bottom: 0;
}
.padding-vertical-xs {
  padding-top: var(--gap-xs);
  padding-bottom: var(--gap-xs);
}
.padding-vertical-s {
  padding-top: var(--gap-s);
  padding-bottom: var(--gap-s);
}
.padding-vertical-m {
  padding-top: var(--gap-m);
  padding-bottom: var(--gap-m);
}
.padding-vertical-l {
  padding-top: var(--gap-l);
  padding-bottom: var(--gap-l);
}
.padding-vertical-xl {
  padding-top: var(--gap-xl);
  padding-bottom: var(--gap-xl);
}
.padding-vertical-xxl {
  padding-top: var(--gap-xxl);
  padding-bottom: 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);
}

.margin-horizontal-none {
  margin-left: 0;
  margin-right: 0;
}
.margin-horizontal-xs {
  margin-left: var(--gap-xs);
  margin-right: var(--gap-xs);
}
.margin-horizontal-s {
  margin-left: var(--gap-s);
  margin-right: var(--gap-s);
}
.margin-horizontal-m {
  margin-left: var(--gap-m);
  margin-right: var(--gap-m);
}
.margin-horizontal-l {
  margin-left: var(--gap-l);
  margin-right: var(--gap-l);
}
.margin-horizontal-xl {
  margin-left: var(--gap-xl);
  margin-right: var(--gap-xl);
}
.margin-horizontal-xxl {
  margin-left: var(--gap-xxl);
  margin-right: var(--gap-xxl);
}
.margin-vertical-none {
  margin-top: 0;
  margin-bottom: 0;
}
.margin-vertical-xs {
  margin-top: var(--gap-xs);
  margin-bottom: var(--gap-xs);
}
.margin-vertical-s {
  margin-top: var(--gap-s);
  margin-bottom: var(--gap-s);
}
.margin-vertical-m {
  margin-top: var(--gap-m);
  margin-bottom: var(--gap-m);
}
.margin-vertical-l {
  margin-top: var(--gap-l);
  margin-bottom: var(--gap-l);
}
.margin-vertical-xl {
  margin-top: var(--gap-xl);
  margin-bottom: var(--gap-xl);
}
.margin-vertical-xxl {
  margin-top: var(--gap-xxl);
  margin-bottom: 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);
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

body > main > div.card {
  width:100%;
  max-width: 600px;
}

form > div.tab > div.section > div.section-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

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

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

footer {
  padding: 2rem 1rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
}

main > * {
  padding: 0 2rem;
}
main > *:first-child {
  margin-top: 3rem;
}
main > *:last-child {
  margin-bottom: 4rem;
}

footer {
  margin-top: auto;
}

section {
  width: 35%;
  min-width: 500px;
  padding: 1rem;
}

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

section.section_title {
  text-align: center;
}

section.section_hero {
  width: 100vw;
  max-height: 50vh;
  height: auto;
  aspect-ratio: 6/2;
  background: var(--color-raised);
  max-width: unset;
  margin: unset;
  padding: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: calc(var(--fontsize-heading1) * 1.5);
}

section.section_hero h2 {
  font-size: inherit;
  color: #fff;
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 47%));
}

section.section_hero > div.overlay {
  overflow: hidden;
  z-index: 0;
  width: 100%;
  height: 100%;
}

section.section_hero > div.overlay > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.section_hero > .hero-text {
  z-index: 1;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  max-width: 80vw;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  gap: 1rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
section.section_hero h2 {
  font-size: inherit;
  color: #fff;
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 47%));
  line-height: 1;
}
section.section_hero > .hero-text p {
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}
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;
}

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;
  box-sizing: border-box;
}

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: var(--color-text) !important;
  outline: none;
  border: none;
  box-sizing: border-box;
  border-radius: var(--gap-xxs);
}

form .input:has(input:-internal-autofill-selected) button svg {
  fill: var(--background);
}

form .input > label {
  position: absolute;
  background: var(--background);
  background: linear-gradient(180deg, transparent 35%, var(--background) 24%);
  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-xxl);
  width: var(--gap-xxl);
  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%;
}

@media screen and (max-width: 600px) {
  main > div.gallery, 
  main > div.pictures {
    --columns: 2 !important;
  }
  section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: unset;
  }
  main > * {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  section.section_hero {
    padding: unset;
  }
  
  a.picture.item button {
    color: #fff;
    padding: var(--gap-xxs);
    aspect-ratio: 1/1;
    width: auto;
    border-radius: var(--gap-xs);
  }

  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.folder_edit form[api="form"], body.folder_edit form[api="form"] + button[api="button"], body.album_edit form[api="form"], body.album_edit form[api="form"] + button[api="button"] {
    width: 90% !important;
  }
}


/* API */
.skeleton {
  background: linear-gradient(
    90deg,
    #eee 25%,
    #f5f5f5 37%,
    #eee 63%
  );
  color: transparent;
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: 6px;
  min-height: 1em;
}


@keyframes skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #ccc;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 1.25s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
  margin: auto;
}

@keyframes spin {
  to { transform: rotate(720deg); }
}
div.card:has(.loading-bar) {
  display:flex;
justify-content:center;
align-items:center;
}
.loading-bar {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #000 30%, transparent 30%);
  background-size: 200% 100%;
  animation: bar 1s infinite linear;
}

@keyframes bar {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

button > svg {
  fill: var(--color-brand);
}

/* disallow first and lest order button */
main div[api="list"] > div.item:first-child > div.order > button:first-child, 
main div[api="list"] > div.item:last-child > div.order > button:last-child {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: painted;
}

div[api="list"] > a.card {
  text-decoration: none;
}

div[api="list"] > a.card svg {
  fill: var(--color-brand);
  height: 2rem;
  width: 2rem;
}

a.folder.drag-hover {
  outline: 2px solid #4da3ff;
  background: rgba(77,163,255,.1);
}

.upload-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--color-background);
  width: 220px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-s);
  border-radius: var(--gap-s);
}

.upload-toast.success {
  background: var(--color-green-fill);
}
.upload-toast.error {
  background: var(--color-red-fill);
}

.upload-toast .bar {
  height:4px;
  background:#4da3ff;
  width:0%;
}

.upload-toast.success .bar {
  background:var(--color-green);
}

.upload-toast.error .bar {
  background:var(--color-red);
}

div.medias[api="list"] > div.item > div.media > img {
 --size: 10rem;
  max-height: var(--size);
  max-width: var(--size);
  width: var(--size);
  height: var(--size);
}

main > div.gallery,
main > div.pictures {
  display: flex;
  --columns: 4;
  --gap: var(--gap-s);
  --aspect-ratio: 3 / 4;
  padding-bottom: 2rem;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
}

main > div.gallery > a.item,
main > div.pictures > a.item {
  width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
  height: auto;
  aspect-ratio: var(--aspect-ratio);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  background: unset;
  border-radius: var(--gap);
  color: var(--color-background);
}

main > div.gallery > a.item > img,
main > div.pictures > a.item > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: brightness(0.7) saturate(0.5) /* blur(2px) */;
  transition: 0.3s ease;
  background: var(--color-brand);
  color: transparent;
}

main > div.gallery > a.item > h3, 
main > div.gallery > a.item > p {
  color: inherit;
  color: #fff;
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 47%));
}

main > div.gallery > a.item:hover > img, 
main > div.gallery > a.item:focus > img,
main > div.pictures > a.item:hover > img, 
main > div.pictures > a.item:focus > img {
  filter: unset;
}

main > div.pictures {
  --columns: 4;
}

main > div.pictures > a.item > div {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
}

a.picture.item button {
  color: #fff;
  background: unset;
}

a.picture.item button svg {
  fill: #fff;
}

main > div.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000a;
  z-index: 1000000;
  padding: var(--gap-m);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  align-items: center;
  justify-content: center;
  margin: unset;
}

main > div.lightbox > div.controls {
  position: absolute;
  top: var(--gap-m);
  left: var(--gap-m);
  right: var(--gap-m);
  bottom: var(--gap-m);
}

main > div.lightbox > div.controls > button.close {
  position: absolute;
  top: 0;
  right: 0;
}

main > div.lightbox > div.controls > button.prev, main > div.lightbox > div.controls > button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

main > div.lightbox > div.controls > button.next {
  left: auto;
  right: 0;
}

main > div.lightbox > div.action-bar {
  display: flex;
  justify-content: center;
  gap: var(--gap-s);
  padding: var(--gap-s);
  backdrop-filter: blur(10px);
  width: fit-content;
  background-color: #13131326;
  border-radius: var(--gap-s);
}

main > div.lightbox > img {
  max-height: calc(100vh - var(--gap-m) - var(--gap-m) - var(--gap-s) - 68px);
  width: 100%;
  aspect-ratio: auto;
  height: 100%;
  max-width: calc(100vw - var(--gap-m) - var(--gap-m) - 200px);
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  object-fit: cover;
}

button.active {
  background: var(--color-brand);
}

button.active > svg {
  fill: var(--color-brand);
  filter: invert(1);
}


div.item > a.folder {
  position: relative;
  box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 30%));
  border-top-left-radius: 0;
  margin-top: 0.5rem;
  width: fit-content;
  text-decoration: none;
}

div.item > a.folder:before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 3rem;
  border-radius: 0;
  border-top-left-radius: var(--gap-xs);
  border-top-right-radius: var(--gap-xs);
  height: 0.5rem;
  background: var(--color-base);
}

nav {
  display: flex;
  justify-content: center;
  gap: var(--gap-m);
}

div.item > div.order {
  justify-content: space-evenly;
}

div.input.password button[name="peakable"] {
  position: absolute;
  right: 0;
  bottom: 0;
  border: none;
  width: auto;
  padding: var(--gap-xs);
  top: 0;
  background: transparent;
  font-size: 1.25rem;
  width: 1.25rem;
  box-sizing: content-box;
  align-items: center;
  justify-content: center;
}

button[name="peakable"] > span {
  display: none;
}

button[name="peakable"].visible > span.visible {
  display: block;
}

button[name="peakable"].invisible > span.invisible {
  display: block;
}

.donate {
  background: #ffc439;
  color: #111;
  font-weight: bold;
  padding: 12px 28px;
  color: #111;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
  transition: 0.3s;
}
.donate:hover,
.donate:focus {
  background: #ffb347 !important;
  color: initial;
}

a {
  background: linear-gradient(to right, transparent, transparent),
  linear-gradient(to right, var(--color-brand), var(--color-brand));
  background-size: 0% 0.1em, 100% 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  text-decoration: none;
  line-height: 1;
  height: fit-content;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

div#main_navigation nav a {
  background: unset;
  text-decoration: none;
  font-weight: 500;
  
  background: linear-gradient(to right, transparent, transparent), linear-gradient(to right, var(--color-brand), var(--color-brand));
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}
div#main_navigation nav a:hover,
div#main_navigation nav a:focus {
  background-size: 0 0.1em, 100% 0.1em;
}

a:hover, 
a:focus {
  background-size: 100% 0.1em, 0 0.1em;
}

#main_navigation.burger > button {
  height: 100%;
  width: auto;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: unset;
  background: unset;
  color: #000;
  padding: 0.5rem;
  box-sizing: border-box;
  border-radius: var(--border-radius-small);
}

#main_navigation.burger > button.open > span.open, 
#main_navigation.burger > button.close > span.close {
  display: block;
  visibility: visible;
}

#main_navigation.burger > button > span.open, 
#main_navigation.burger > button > span.close {
  visibility: hidden;
  display: none;
  line-height: 0;
  scale: 1.5;
}

#main_navigation.burger > button svg {
  fill: var(--color-brand);
}

#main_navigation.burger > button.close + nav {
  display: flex;
  visibility: visible;
  opacity: 1;
  flex-direction: column;
  background: var(--color-background);
  box-shadow: var(--shadow-l);
  position: absolute;
  right: 1rem;
  top: 6rem;
  gap: unset;
  padding: var(--gap-s) var(--gap-xs);
  border-radius: var(--gap-xs);
}

#main_navigation.burger > button.open + nav {
  display: none;
  visibility: hidden;
  opacity: 0;
}

#main_navigation.burger > button + nav > a {
  padding: var(--gap-s);
}

form > div.tab {
  width: 100%;
}
body.login > main {
  max-width: 50vw;
  margin: 0 auto;
  width: 100%;
  min-width: 400px;
}

a#logolink {
  background-size: 100% 0.1em, 0 0.1em;
  transition: background-size 400ms;
  font-size: 24px;
  font-weight: bold;
  color: var(--color-brand);
}

a#logolink:hover {
  background-size: 0% 0.1em, 100% 0.1em;
}

button#themeBtn {
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: unset;
  background: unset;
  color: #000;
  padding: 0.5rem;
  box-sizing: border-box;
  line-height: 0;
  border-radius: var(--border-radius-small);
}

button#themeBtn svg {
  fill: var(--color-brand);
}


@media screen and (max-width: 768px) {
  section.section_hero {
    aspect-ratio: unset !important;
    height: 50vh;
  }
  main > div.gallery, main > div.pictures {
    --columns: 3;
  }
  body > main > div.card {
    width: 80%;
  }
  #main_navigation.burger > button.close + nav {
    position: absolute;
    top: 3.5rem;
    border-radius: 0;
    left: 0;
    right: 0;
    height: calc(100vh - 4.5rem);
    align-items: center;
    justify-content: flex-start;
    background: rgba(from var(--color-background) r g b / 84%);
    backdrop-filter: blur(5px);
  }

  body:has(header div#main_navigation > button.controls.close) {
    overflow: hidden;
  }

  main > div.gallery > a.item > img, main > div.pictures > a.item > img {
    filter: unset;
  }

  main > div.lightbox > img {
    max-width: 100%;
  }

  main > div.lightbox > div.controls > button.prev, 
  main > div.lightbox > div.controls > button.next {
    top: 0.25rem;
    transform: unset;
    left: 50%;
    right: unset;
    transform: translateX(calc(-50% - 1.5rem));
  }

  main > div.lightbox > div.controls > button.next {
    transform: translateX(1.5rem);
  }
  main > div.gallery > a.item > h3, main > div.gallery > a.item > p {
    padding: 0 var(--gap-xs);
  }
  body.dashboard > main > div.flex > a {
    width: 100% !important;
  }
}

@media screen and (max-width: 500px) {
  main > div.lightbox > div.controls > button.prev,
  main > div.lightbox > div.controls > button.next {
    left: 0;
    transform: unset;
  }
  main > div.lightbox > div.controls > button.next {
    left: 5rem;
  }
  div[api="list"] > div.request {  
    padding: var(--gap-s);
  }
}

div[api="list"] > div.request {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--color-base);
  box-sizing: border-box;
}

div[api="list"] > div.request > span.timestamp {
  position: absolute;
  right: var(--gap-m);
  top: var(--gap-m);
}

div[api="list"] > div.request > span.name {
  padding-right: 10rem;
}

div[api="list"] > div.request > span.name > a {
  color: inherit;
  background-color: linear-gradient(to right, transparent, transparent),  linear-gradient(to right, var(--color-text), var(--color-text));
}


body.folder_edit form[api="form"], 
body.folder_edit form[api="form"] + button[api="button"],
body.album_edit form[api="form"], 
body.album_edit form[api="form"] + button[api="button"] {
  width: 50%;
  margin: auto;
}

body.folder_edit form[api="form"],
body.album_edit form[api="form"] {
  padding: unset;
}

button.error.btn-primary {
  border-color: var(--color-red);
  background: var(--color-red-fill);
  color: var(--color-red);
}

body.dashboard > main > div.flex > a {
  width: calc((100% - var(--gap-s)) / 2);
  height: 100%;
  padding: var(--gap-l);
  box-sizing: border-box;
  border: unset;
  box-shadow: var(--shadow-l);
  border-radius: var(--border-radius-medium);
  font-size: var(--fontsize-heading2);
  line-height: var(--lineheight-heading2);
  background: var(--color-base);
}

main {
  margin-bottom: 2rem;
}