:root {

	/* --color-scheme: light dark; */

	--space-ss: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-rg: 2rem;
	--space-wd: 2.5rem;
	
	--info-viewport: "default";
	/* --safe-area-space: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); */
	/*
	--safe-area-space-left: padding-inline-start: max(22px, env(safe-area-inset-left));
	--safe-area-space-right: padding-inline-end: max(22px, env(safe-area-inset-right));
	*/
	--safe-area-space-left: max(var(--space-md), env(safe-area-inset-left));
	--safe-area-space-right: max(var(--space-md), env(safe-area-inset-right));

	/* --font-family: sans-serif; */
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-size: 20px;
	--line-height: 30px;

	--font-family-h: var(--font-family);

	--font-size-h1: 32px;
	--font-size-h2: 28px;
	--font-size-h3: 24px;
	--font-size-h4: var(--font-size);

	--color-h: var(--color);

	--line-height-h1: 42px;
	--line-height-h2: 36px;
	--line-height-h3: var(--line-height);
	--line-height-h4: var(--line-height);

}

	/* Reset */

	/* Box sizing rules */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
		padding: 0;
	}

	/* Prevent font size inflation */
	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	/* Remove default margin in favour of better control in authored CSS */
	body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
		margin-block-end: 0;
	}

	a {
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}

	img, picture, svg, video {
		display: block;
		max-width: 100%;
	}

	ul {
		padding-left: 1rem;
	}

	input, textarea, select, button {
		border-width: 1px;
		border-color: #000;
		border-radius: 0;
		padding-block: 0;
		padding-inline: 0;
		font-family: var(--font-family);
		font-size: var(--font-size);
		color: var(--color);
		background: var(--background);
	}

	select, button {
		cursor: pointer;
	}

	/* ## Reset */

	.safe-area {
		/*
		padding-left: max(22px, env(safe-area-inset-left);
		padding-right: max(22px, env(safe-area-inset-right);
		*/
		/*
		padding-inline-start: env(safe-area-inset-left, 30px);
		padding-inline-end: env(safe-area-inset-right, 30px);
		*/
		/*
		padding-inline-start: max(var(--space-md), env(safe-area-inset-left));
		padding-inline-end: max(var(--space-md), env(safe-area-inset-right));
		*/
		padding-inline-start: var(--safe-area-space-left);
		padding-inline-end: var(--safe-area-space-right);
	}

	@media (prefers-color-scheme: light) {

		:root {

			--info-prefers-color-scheme: "light";

			--color: #000;
			/* --color-link: #0000ee; */
			--color-link: #00f;
				/* --color-link-visited: #800080; */
				--color-link-visited: #909;
			--background: #fff;

			--border-grey: #e4e4e4;
			--background-grey: #f2f2f2;

		}
		
	}

	@media (prefers-color-scheme: dark) {

		:root {

			--info-prefers-color-scheme: "dark";

			--color: #ddd;
			--color-link: #8cb4ff;
				--color-link-visited: #ffadff;
			--background: #282828;

			--border-grey: #1b1b1b;
			--background-grey: #535353;

		}
		
	}

	body {

					/* Disable refresh page when it is pulled down */
					overscroll-behavior-y: contain;

		font-family: var(--font-family);
		font-size: var(--font-size);
		color: var(--color);
		line-height: var(--line-height);

		background: var(--background);

	}
		
		.info-viewport::after {
			content: var(--info-viewport);
		}
		.info-prefers-color-scheme::after {
			content: var(--info-prefers-color-scheme);
		}

		.link-external::after {
			content: "";
		}

		.print-show {
			display: none;
		}

		.padding-top-ss {
			padding-top: var(--space-ss);
		}
		.padding-top-sm {
			padding-top: var(--space-sm);
		}
		.padding-top-md {
			padding-top: var(--space-md);
		}
		.padding-top-rg {
			padding-top: var(--space-rg);
		}

		.margin-top-ss {
			margin-top: var(--space-ss);
		}
		.margin-top-sm {
			margin-top: var(--space-sm);
		}
		.margin-top-md {
			margin-top: var(--space-md);
		}
		.margin-top-rg {
			margin-top: var(--space-rg);
		}

		.padding-bottom-ss {
			padding-bottom: var(--space-ss);
		}
		.padding-bottom-sm {
			padding-bottom: var(--space-sm);
		}
		.padding-bottom-md {
			padding-bottom: var(--space-md);
		}
		.padding-bottom-rg {
			padding-bottom: var(--space-rg);
		}

		.margin-bottom-ss {
			margin-bottom: var(--space-ss);
		}
		.margin-bottom-sm {
			margin-bottom: var(--space-sm);
		}
		.margin-bottom-md {
			margin-bottom: var(--space-md);
		}
		.margin-bottom-rg {
			margin-bottom: var(--space-rg);
		}

		.card-pic-01 {
			width: 100%;
			padding: var(--space-sm);
			background: #ccc;
		}

			.card-pic-object-fit-01 {
				width: 100%;
				height: 180px;
				object-fit: cover;
				/* object-fit: scale-down; */
				/* object-position: top; */
			}

		.background-grey {
			background: var(--background-grey);
		}

		header {
			/* border-bottom: 2px solid var(--border-grey); */
			padding: var(--space-sm) 0;
			background: var(--background);
		}

		footer, .nav-crumbs {
			border-top: 2px solid var(--border-grey);
			background: var(--background-grey);
		}

		.nav-crumbs {
			border-bottom: 2px solid var(--border-grey);
			padding-top: var(--space-ss);
			padding-bottom: var(--space-ss);
		}

		main {}

		footer {
			/*
			padding: var(--space-sm) 0 var(--space-wd);
			*/
			padding: var(--space-sm) 0 var(--space-md);
		}
		
		h1, h2, h3, h4, p {
			padding-bottom: var(--space-sm);
		}

		h1, h2, h3, h4 {
			font-family: var(--font-family-h);
			color: var(--color-h);
		}
		h1 {
			font-size: var(--font-size-h1);
			line-height: var(--line-height-h1);
		}
		h2 {
			font-size: var(--font-size-h2);
			line-height: var(--line-height-h2);
		}
		h3 {
			font-size: var(--font-size-h3);
			line-height: var(--line-height-h3);
		}
		h4 {
			font-size: var(--font-size-h4);
			line-height: var(--line-height-h4);
		}

		a {
			color: var(--color-link);
			&:visited {
				color: var(--color-link-visited);
			}
		}

		ul {
			/* User agent stylesheet */
			/*
			margin-block-start: 1em;
			margin-block-end: 1em;
			padding-inline-start: 40px;
			*/
		}

	/* Medium */
	@media only screen and (width > 600px) {

		:root {

			/* Info */
			--info-viewport: "medium";
			/* ## Info */

		}

	}
	/* ## Medium */

	/* Regular */
	@media only screen and (width > 768px) {

		:root {

			/* Info */
			--info-viewport: "regular";
			/* ## Info */

		}

	}
	/* ## Regular */

	/* Wide */
	@media only screen and (width > 992px) {

		:root {

			/* Info */
			--info-viewport: "wide";
			/* ## Info */

		}

	}
	/* ## Wide */

	/* Ultra */
	@media only screen and (width > 1200px) {

		:root {

			/* Info */
			--info-viewport: "ultra wide";
			/* ## Info */

		}

	}
	/* ## Ultra */

	/* Print */
	@media only print {

		:root {
			/* If adding content top or bottom */
			--margin-page-content: 5rem;
			/* ## */

			--font-family: sans-serif;
			--font-size: 14px;
			--line-height: 21px;

			--font-family-h: var(--font-family);

		}

		@page {

			/* page-orientation: upright; */
			size: portrait;

			/* Adding content top or bottom */

			/* margin-bottom: var(--margin-page-content); */

			@bottom-center {

				margin-bottom: var(--margin-page-content);
				content: "Page " counter(page) " of " counter(pages);

				font-family: var(--font-family);
				font-size: var(--font-size);
				color: #000;
				line-height: var(--line-height);

			}

			/* ## */

		}

		.safe-area {
			padding: 0;
		}

		body {

			margin: 0;
			font-family: var(--font-family);
			font-size: var(--font-size);
			color: #000;
			line-height: var(--line-height);

			background: #fff;

		}

			.print-hide {
				display: none;
			}

			.print-show {
				display: block;
			}

			h1, h2, h3, h4, p {
				padding-bottom: var(--space-sm);
			}

			h1, h2, h3, h4 {
				font-family: var(--font-family-h);
			}
			h1 {
				font-size: 23px;
				line-height: 33px;
			}
			h2 {
				font-size: 20px;
				line-height: 29px;
			}
			h3 {
				font-size: 17px;
				line-height: 25px;
			}
			h4 {
				font-size: var(--font-size);
				line-height: var(--line-height);
			}

			a, a:visited {
				color: #00f;
			}

			[class*="background"] {
				background: none;
			}

	}
	/* ## Print */