@layer modules {
	html {
		--font-main: "PT Sans Narrow", sans-serif;
		--font-alt: "Dosis", sans-serif;
		--font-fa: "Font Awesome 7 Pro";

		--font-size-modifier: 1;
		--font-size-xs: calc(1.5rem * var(--font-size-modifier));
		--font-size-sm: calc(1.6rem * var(--font-size-modifier));
		--font-size-md: calc(1.8rem * var(--font-size-modifier));
		--font-size-lg: calc(2rem * var(--font-size-modifier));
		--font-size-xl: calc(2.2rem * var(--font-size-modifier));
		--font-size-xxl: calc(2.4rem * var(--font-size-modifier));

		--palette-adva: #db0812;
		--palette-black: #000;
		--palette-dark: #141414;
		--palette-gray: #535353;
		--palette-light: #f4f4f4;
		--palette-white: #fff;
		--color-canvas: var(--palette-white);
		--color-canvastext: var(--palette-gray);
		--color-accent: var(--palette-adva);
		--color-highlight: var(--color-accent);

		--gap: 3rem;
		--transition-duration: 0.375s;
		--transition-easing: cubic-bezier(0.25, 0.2, 0.075, 1);
		--transition: var(--transition-duration) var(--transition-easing);

		--breakpoint-width: 100svi;
		--container-width: var(--breakpoint-width);

		--logo-size: 7.5rem;

		font-size: 62.5%;

		@media (min-width: 540px) {
			--breakpoint-width: 540px;
			--container-width: 516px;
		}

		@media (min-width: 744px) {
			--breakpoint-width: 744px;
			--container-width: 720px;

			--logo-size: 10rem;
		}

		@media (min-width: 960px) {
			--breakpoint-width: 960px;
			--container-width: 924px;

			--font-size-xs: calc(2rem * var(--font-size-modifier));
			--font-size-sm: calc(2.4rem * var(--font-size-modifier));
			--font-size-md: calc(3.2rem * var(--font-size-modifier));
			--font-size-lg: calc(4rem * var(--font-size-modifier));
			--font-size-xl: calc(5rem * var(--font-size-modifier));
			--font-size-xxl: calc(6rem * var(--font-size-modifier));

			--logo-size: 15rem;
		}

		@media (min-width: 1260px) {
			--breakpoint-width: 1260px;
			--container-width: 1200px;
		}

		@media (min-width: 1620px) {
			--breakpoint-width: 1620px;
			--container-width: 1540px;
		}
	}

	body {
		line-height: 1.45;
	}

	::target-text {
		background-color: color-mix(in oklab, transparent, var(--color-highlight, var(--color-accent)) 22.5%);
	}

	::selection {
		background-color: color-mix(in oklab, transparent, var(--color-highlight, var(--color-accent)) 22.5%);
	}

	a {
		transition: text-decoration-color var(--transition);
		color: var(--color-canvastext);
		line-height: normal;
		-webkit-text-decoration: underline transparent;
		text-decoration: underline transparent;
		text-decoration-thickness: 0.05em;
		text-underline-offset: 0.1em;
	}

	a[aria-current="page"],
	a:is(:hover, :focus-visible) {
		text-decoration-color: transparent;
	}

	a:is(:hover, :focus-visible)[aria-current="page"] {
		text-decoration-color: currentColor;
	}

	main p a {
		transition: var(--transition);
		transition-property: text-decoration-color;
		-webkit-text-decoration-color: transparent;
		text-decoration-color: transparent;
	}

	main p a:is(:hover, :focus-visible) {
		text-decoration-color: currentColor;
	}

	:is(p, li, figcaption, form):not([class]) {
		max-inline-size: 120ch;
	}

	img,
	video {
		inline-size: 100%;
		block-size: auto;
	}

	img {
		object-fit: cover;
		object-position: var(--object-position-x, center) var(--object-position-y, center);
	}

	main img,
	main video {
		inline-size: 100%;
	}

	mark {
		background-color: transparent;
		color: var(--color-accent);
	}

	ul:not([role], [class]) {
		margin-block: 2em;
		padding-inline-start: 2rem;
		/*font-weight: 575;*/
		/*list-style-type: none;*/
	}

	ul:not([role], [class]) > li {
		margin-block-end: 1em;
	}

	.align-left,
	.align_left,
	.text-align-left,
	.text-align_left {
		text-align: left;
	}

	.align-start,
	.align_start,
	.text-align-start,
	.text-align_start {
		text-align: start;
	}

	.align-end,
	.align_end,
	.text-align-end,
	.text-align_end,
	.align-right,
	.align_right,
	.text-align-right,
	.text-align_right {
		text-align: end;
	}

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

	.align-justify,
	.align_justify,
	.text-align-justify,
	.text-align_justify {
		text-align: justify;
	}

	.block > .text-align-start > *,
	.block > .text-align-center > * {
		margin-inline-end: auto;
	}

	.block > .text-align-end > *,
	.block > .text-align-center > * {
		margin-inline-start: auto;
	}

	:is(input, select, textarea)::placeholder {
		opacity: var(--opacity-min);
		color: inherit;
	}

	input[type="checkbox"]:checked {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
		background-position: 25% 60%;
		background-size: 87.5% 87.5%;
	}

	input[type="radio"]:checked {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
		background-position: 25% 60%;
		background-size: 87.5% 87.5%;
	}

	label:has(input:is([type="checkbox"], [type="radio"])) {
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
	}

	label {
		font-weight: bolder;
	}

	label:not([for], :has(input, select, textarea)) {
		display: none;
	}

	fieldset {
		border: none;
		padding: 0;
	}

	body {
		display: flex;
		flex-direction: column;
	}
}