@layer layout-base {

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body > * {
	isolation: isolate;
}

* {
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
ul {
	padding: 0;
	margin: 0;
}

ul {
	list-style: none;
}

address {
	font-style: normal;
}

input,
button,
a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	background-color: transparent;
	border: none;
	padding: 0;
	font: inherit;
	text-align: left;
}

figure {
	padding: 0;
	margin: 0;
}

iframe,
img,
svg,
video {
	display: block;
}

label {
	cursor: pointer;
}

q {
	quotes: "«" "»";
}

fieldset {
	border: unset;
	margin: unset;
	padding: unset;
}

dd {
	margin: unset;
}

summary {
	cursor: pointer;
}
}

@layer layout-base {
@layer core {
	:root {
		/* For convenience, not for usage anywhere else */
		--_size-25: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-25, 0.5)
		);
		--_size-50: calc(var(--size-base, 1rem) * var(--sizeMultiplier-50, 1));
		--_size-100: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-100, 2)
		);
		--_size-200: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-200, 4)
		);
		--_size-300: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-300, 8)
		);
		--_size-400: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-400, 16)
		);
		--_size-500: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-500, 32)
		);
		--_size-600: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-600, 64)
		);
		--_size-700: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-700, 128)
		);

		/* Fallback usage */
		--size-25: var(--_size-25);
		--size-50: var(--_size-50);
		--size-100: var(--_size-100);
		--size-200: var(--_size-200);
		--size-300: var(--_size-300);
		--size-400: var(--_size-400);
		--size-500: var(--_size-500);
		--size-600: var(--_size-600);
		--size-700: var(--_size-700);

		/* Usage if round() is supported */
		--size-25: round(up, var(--_size-25), 1px);
		--size-50: round(up, var(--_size-50), 1px);
		--size-100: round(up, var(--_size-100), 1px);
		--size-200: round(up, var(--_size-200), 1px);
		--size-300: round(up, var(--_size-300), 1px);
		--size-400: round(up, var(--_size-400), 1px);
		--size-500: round(up, var(--_size-500), 1px);
		--size-600: round(up, var(--_size-600), 1px);
		--size-700: round(up, var(--_size-700), 1px);

		/* Other sizes with fallbacks */
		--size-100dvh: 100vh;
		--size-100dvh: 100dvh;
		--size-1dvh: 1vh;
		--size-1dvh: 1dvh;
		--size-100svh: 90vh;
		--size-100svh: 100svh;
		--size-1svh: 0.9vh;
		--size-1svh: 1svh;
	}
}
}

@layer layout-base {
@layer core {
	:root {
		/* ROOT
	*/

		/* Fallback usage */
		font-size: clamp(
			var(--font-rootSize-min),
			var(--font-rootSize-base),
			var(--font-rootSize-max)
		);

		/* Usage if round() is supported */
		font-size: clamp(
			var(--font-rootSize-min),
			round(up, var(--font-rootSize-base), 1px),
			var(--font-rootSize-max)
		);

		/* SIZES
	*/

		/* For convenience, not for usage anywhere else */
		--_font-size-25: calc(1rem * var(--font-sizeMultiplier-25, 0.25));
		--_font-size-50: calc(1rem * var(--font-sizeMultiplier-50, 0.5));
		--_font-size-100: calc(1rem * var(--font-sizeMultiplier-100, 1));
		--_font-size-150: calc(1rem * var(--font-sizeMultiplier-150, 1.5));
		--_font-size-200: calc(1rem * var(--font-sizeMultiplier-200, 2));
		--_font-size-250: calc(1rem * var(--font-sizeMultiplier-250, 2.5));
		--_font-size-300: calc(1rem * var(--font-sizeMultiplier-300, 3));
		--_font-size-350: calc(1rem * var(--font-sizeMultiplier-350, 3.5));
		--_font-size-400: calc(1rem * var(--font-sizeMultiplier-400, 4));
		--_font-size-450: calc(1rem * var(--font-sizeMultiplier-450, 4.5));
		--_font-size-500: calc(1rem * var(--font-sizeMultiplier-500, 5));

		/* Fallback usage */
		--font-size-25: var(--_font-size-25);
		--font-size-50: var(--_font-size-50);
		--font-size-100: var(--_font-size-100);
		--font-size-150: var(--_font-size-150);
		--font-size-200: var(--_font-size-200);
		--font-size-250: var(--_font-size-250);
		--font-size-300: var(--_font-size-300);
		--font-size-350: var(--_font-size-350);
		--font-size-400: var(--_font-size-400);
		--font-size-450: var(--_font-size-450);
		--font-size-500: var(--_font-size-500);

		/* Usage if round() is supported */
		--font-size-25: round(up, var(--_font-size-25), 1px);
		--font-size-50: round(up, var(--_font-size-50), 1px);
		--font-size-100: round(up, var(--_font-size-100), 1px);
		--font-size-150: round(up, var(--_font-size-150), 1px);
		--font-size-200: round(up, var(--_font-size-200), 1px);
		--font-size-250: round(up, var(--_font-size-250), 1px);
		--font-size-300: round(up, var(--_font-size-300), 1px);
		--font-size-350: round(up, var(--_font-size-350), 1px);
		--font-size-400: round(up, var(--_font-size-400), 1px);
	}
}
}

@layer layout-base {

:root {
	/* PROJECT
	*/

	--site-paddingBlock: var(--layout-space-50);
	--site-paddingInline: var(--layout-space-50);

	/* Inclusive padding left, top, right (site-padding)*/
	--siteHeader-logoWidth: 100vw;
	--siteHeader-logo-heightToWidthRatio: 0.224;
	--siteHeader-logo-height: calc(
		var(--siteHeader-logoWidth) * var(--siteHeader-logo-heightToWidthRatio)
	);
	--siteHeader-logoBottom-maxHeight: 12vw;

	--layout-main-columns: 5;

	--borderRadius-10: 3px;
	--borderRadius-50: 0.3rem;
	--borderRadius-100: 0.4rem;

	--layoutLines-color-50: var(--color-main-700);
	--layoutLines-color-100: var(--color-main-200);
	--layoutLines-width-100: 2px;

	--color-main-0: hsl(0, 0%, 0%);
	--color-main-100: hsl(0, 0%, 0%);
	--color-main-200: hsl(0, 0%, 27%);
	--color-main-300: hsl(0, 0%, 43%);
	--color-main-400: hsl(0, 0%, 60%);
	--color-main-700: hsl(0, 0%, 82%);
	--color-main-800: hsl(0, 0%, 92%);
	--color-main-900: hsl(0, 0%, 95%);
	--color-main-950: hsl(0, 0%, 98%);
	--color-main-1000: hsl(0, 0%, 100%);

	--color-error-50: hsl(18 100% 30%);
	--color-error-100: hsl(18 100% 40%);
	--color-error-200: hsl(18 100% 70%);
	--color-error-300: hsl(18 100% 90%);

	--color-text-100: var(--color-main-100);
	--color-text-200: var(--color-main-300);
	--color-text-300: var(--color-main-400);

	--color-focus-100: var(--color-3-200);
	--color-softHighlight-100: var(--color-main-950);

	--media-aspectRatio-wide-50: 1.14;
	--media-aspectRatio-wide-100: 1.72;
	--media-aspectRatio-wide-200: 2.5;
	--media-aspectRatio-wide-300: 3;
	--media-aspectRatio-wide-400: 3.5;
	--media-aspectRatio-wide-500: 4;
	--media-aspectRatio-tall-100: 0.75;

	/* CORE
	*/
	--font-rootSize-min: 0px;
	--font-rootSize-max: 25px;
	--font-rootSize-base: calc((0.2px + 0.1vw) * 12);
	/**/
	/* Deriving the the values from the px values given in the design: */
	--font-sizeMultiplier-50: 0.8;
	--font-sizeMultiplier-100: 1;
	--font-sizeMultiplier-200: 1;
	--font-sizeMultiplier-300: 1.6;

	--font-weight-50: 200;
	--font-weight-100: 400;
	--font-weight-200: 600;

	--text-lineHeight-50: 1.2;
	--text-lineHeight-100: 1.4;
	--text-lineHeight-200: 1.3;
	--text-letterSpacing-100: 0px;
	--text-letterSpacing-200: 0.01em;
	--text-width-50: 40ch;
	--text-width-100: 80ch;

	--layout-space-25: var(--size-25);
	--layout-space-50: var(--size-50);
	--layout-space-100: var(--size-100);
	--layout-space-200: var(--size-200);
	--layout-space-300: var(--size-300);
	--layout-space-400: var(--size-400);
	--layout-space-500: var(--size-500);
	--layout-space-600: var(--size-600);

	--line-width-50: 0.5px;
	--line-width-100: 1px;
	--line-width-200: 1.5px;
	--line-width-300: 2px;
	--line-width-400: 2.5px;
	--line-width-focus: 3px;

	--ms-300: 1500ms;
	--ms-200: 600ms;
	--ms-100: 300ms;
	--ms-75: 200ms;
	--ms-50: 100ms;

	--ease-bounce-100: cubic-bezier(0.68, -0.6, 0.32, 1.6);

	--size-base: 1rem;
	--sizeMultiplier-25: 0.4;
	--sizeMultiplier-50: 0.6;
	--sizeMultiplier-100: 1;
	--sizeMultiplier-200: 1.5;
	--sizeMultiplier-300: 2.5;
	--sizeMultiplier-400: 5;
	--sizeMultiplier-500: 10;
	--sizeMultiplier-600: 20;

	--z-front: 100;
	--z-midFront: 75;
	--z-center: 50;
	--z-midBack: 25;
	--z-back: 0;
}

/*@media (width <= __vw100) {
	:root {
		--font-rootSize-multiplier: 1;
	}
}*/

/*@media (width <= __vw50) {
}*/

/*@media (width <= __vw25) {
}*/
}

@layer layout-base {

:root {
	font-family: "Lazzer", sans-serif;
	font-weight: 600;
	font-style: normal;
}

/*
	FT Supplement by Formula Type
	Role: Display
*/

@font-face {
	font-family: "FTSupplement";
	font-weight: 400;
	src: url("/fonts/FTSupplementUnlicensedTrial-Regular.woff2") format("woff2");
}


@font-face {
	font-family: "FTSupplement";
	font-weight: 400;
	font-style: italic;
	src: url("/fonts/FTSupplementUnlicensedTrial-RegularItalic.woff2") format("woff2");
}

@font-face {
	font-family: "FTSupplement";
	font-weight: 400;
	font-style: oblique;
	src: url("/fonts/FTSupplementUnlicensedTrial-RegularSemiItalic.woff2") format("woff2");
}

/*
	Lazzer by Displaay
	Role: Body
*/

@font-face {
	font-family: "Lazzer";
	font-weight: 500;
	font-style: normal;
	src: url("/fonts/Lazzer-TRIAL-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "Lazzer";
	font-weight: 600;
	font-style: normal;
	src: url("/fonts/Lazzer-TRIAL-Bold.woff2") format("woff2");
}

/*
	Teodor by Displaay
	Role: Body Alternative
*/

@font-face {
	font-family: "Teodor";
	font-weight: 600;
	font-style: normal;
	src: url("/fonts/Teodor-TRIAL-Bold.woff2") format("woff2");
}
}

@layer layout-base {

body {
	font-size: var(--font-size-100);
	color: var(--color-text-100);
	line-height: var(--text-lineHeight-100);
	letter-spacing: var(--text-letterSpacing-200);
	font-weight: 500;
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: inherit;
	font-size: inherit;
}
}
/*@import "./sets/site.css" layer(layout-base);*/
/*@import "./sets/page.css" layer(layout-base);*/
@layer layout-base {
[data-as-page-main] {
	display: flex;
	flex-direction: column;
}
}
@layer layout-base {

[data-as-text] {
	display: flex;
	flex-direction: column;
}

[data-as-text="100"] {
	font-size: var(--font-size-100);
	line-height: var(--text-lineHeight-100);
}

[data-as-text="200"] {
	font-size: var(--font-size-200);
	line-height: var(--text-lineHeight-100);
}

[data-as-text="300"] {
	font-size: var(--font-size-300);
	line-height: var(--text-lineHeight-200);
}

[data-as-text="400"] {
	font-size: var(--font-size-400);
	line-height: var(--text-lineHeight-200);
}
}
@layer layout-base {

[data-as-layout-lines] {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}

[data-as-layout-lines] svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

[data-as-layout-lines] line {
	stroke: var(--layoutLines-color-50);
	stroke-width: var(--layoutLines-width-100);
}

[data-as-layout-line-v] {
	color: var(--layoutLines-color-50);
	border-bottom: var(--layoutLines-width-100) solid currentColor;
	width: 100%;
}
}
body {
  display: flex;
  flex-direction: column;
  height: auto;
}