@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,
ol {
	padding: 0;
	margin: 0;
}

ul, ol {
	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;
}

dl, dd, dt {
	padding: 0;
	margin: unset;
}

summary {
	cursor: pointer;
}
}

@layer layout-base {

:root {
	/* PROJECT
	*/

	--page-paddingInline: var(--layout-space-200);

	--pageHeader-approxLogoHeight: calc(var(--font-size-100) * 2);
	/* Approx. height from padding, logo height, and inner vertical spacing  */
	--pageHeader-height: calc(var(--font-size-100) * 6);

	--pageMain-paddingTop: var(--layout-space-300);
	--pageMain-paddingBottom: var(--layout-space-500);
	--pageMain-space-y: var(--layout-space-400);

	--section-paddingInline-50: var(--layout-space-100);
	--section-paddingInline-100: var(--layout-space-200);
	--section-paddingInline-200: var(--layout-space-300);
	--section-paddingInline-300: var(--layout-space-400);
	--section-paddingBlock-100: var(--layout-space-200);
	--section-paddingBlock-200: var(--layout-space-300);
	--section-paddingBlock-300: var(--layout-space-400);
	--section-gap-100: var(--layout-space-200);

	--content-gap-100: var(--layout-space-200);

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

	--line-width-focus: 3px;

	--icon-lineWidth: var(--line-width-200);
	--icon-size: 1.1em;

	--color-main-0: hsl(215, 15%, 0%);
	--color-main-100: hsl(215, 15%, 12%);
	--color-main-200: hsl(215, 15%, 27%);
	--color-main-300: hsl(210, 15%, 43%);
	--color-main-400: hsl(210, 15%, 60%);
	--color-main-700: hsl(210, 15%, 82%);
	--color-main-800: hsl(210, 15%, 92%);
	--color-main-900: hsl(210, 15%, 95%);
	--color-main-950: hsl(210, 15%, 98%);
	--color-main-1000: hsl(210, 15%, 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: 16px;
	--font-rootSize-max: 24px;
	--font-rootSize-multiplier: 1;

	--font-rootSize-base-raw: calc(1vw * var(--font-rootSize-multiplier) + 1px);

	--font-rootSize-base: var(--font-rootSize-base-raw);
	/**/
	/* 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.14;
	--font-sizeMultiplier-300: 1.45;
	--font-sizeMultiplier-400: 2.18;
	--font-sizeMultiplier-500: 2.73;

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

	--text-lineHeight-50: 1.2;
	--text-lineHeight-100: 1.5;
	--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: "Cadiz", sans-serif;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Cadiz";
	font-weight: 600;
	src: url("../assets/fonts/CadizWeb-SemiBold.woff2") format("woff2");
}*/
}

@layer layout-base {

body {
	font-size: var(--font-size-100);
	color: var(--color-text-100);
	line-height: var(--text-lineHeight-100);
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: inherit;
}
}

@layer layout-base {
[data-as-site] {
	height: 100%;
	overflow-y: auto;
}
}

@layer layout-base {
/* If not fulfilling the condition: */
/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/* not fullfilling: is less than or equal to */

@media (width > __vw200) {
	[data-if="<=vw200"] {
		display: none !important;
	}
}

@media (width > __vw100) {
	[data-if="<=vw100"] {
		display: none !important;
	}
}

@media (width > __vw50) {
	[data-if="<=vw50"] {
		display: none !important;
	}
}

@media (width > __vw25) {
	[data-if="<=vw25"] {
		display: none !important;
	}
}

/* not fullfilling: is greater than */

@media (width <= __vw200) {
	[data-if=">vw200"] {
		display: none !important;
	}
}

@media (width <= __vw100) {
	[data-if=">vw100"] {
		display: none !important;
	}
}

@media (width <= __vw50) {
	[data-if=">vw50"] {
		display: none !important;
	}
}

@media (width <= __vw25) {
	[data-if=">vw25"] {
		display: none !important;
	}
}


/* If fulfilling the condition: */
/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/* fullfilling: is less than or equal to */

@media (width <= __vw200) {
	[data-if="<=vw200"] {
		display: contents !important;
	}
}

@media (width <= __vw100) {
	[data-if="<=vw100"] {
		display: contents !important;
	}
}

@media (width <= __vw50) {
	[data-if="<=vw50"] {
		display: contents !important;
	}
}

@media (width <= __vw25) {
	[data-if="<=vw25"] {
		display: contents !important;
	}
}

/* fullfilling: is greater than */

@media (width > __vw200) {
	[data-if=">vw200"] {
		display: contents !important;
	}
}

@media (width > __vw100) {
	[data-if=">vw100"] {
		display: contents !important;
	}
}

@media (width > __vw50) {
	[data-if=">vw50"] {
		display: contents !important;
	}
}

@media (width > __vw25) {
	[data-if=">vw25"] {
		display: contents !important;
	}
}
}