@charset "UTF-8";

/* Stylesheet for the Unicode browser
 * dev file for page layouts
 * by Sascha Leib for unicode.kolmio.com
 * File name: _page.css
 */
 
 /* skip link: */
#skip__link {
	position: fixed;
	left: 4pt;
	top: 4pt;
	width: auto;
	z-index: 9999;
}
#skip__link a {
	position: absolute;
	background-color: var(--siteBackground);
	font-size: 1.25em;
	color: var(--textColor);
	height: 1px;
	overflow: hidden;
	clip-path: rect(1px 1px 1px 1px);
}
#skip__link a:focus {
	position: static;
	display: inline-block;
	padding: 8px;
	height: auto;
	clip-path: initial;
	overflow: visible;
	text-decoration: none;
}

/* screen-reader only: */
.sr-only {
	width: 0; height: 0;
	overflow: hidden;
	position: fixed;
	top: -1000px;
}

/* root settings */
:root {
	background-color: var(--siteBackground);
	color: var(--textColor);
	font-family: var(--uiFonts);
	font-size: var(--baseFontSize);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	margin: 0;
	padding: 0;
}

a:link, a:visited {
	color: var(--linkColor);
	text-decoration: none;
}
a:focus, button:focus, select:focus {
	outline: .125rem solid var(--focusColor);
	border-radius: .25rem;
}

#header__layout,
#content__layout,
#footer__layout {
	max-width: 100vw;
	box-sizing: border-box;
	margin: 0; padding: 0;
}

#header__layout > *,
#content__layout > *,
#footer__layout > * {
	width: 100%;
	max-width: var(--pageWidth);
	margin: 0 auto;
}

hr {
	background-color: var(--popupBorders);
	height: 1px;
	border: none;
}

#footer__layout > footer {
	border-top: var(--popupBorders) solid 1px;
	text-align: center;
}
#footer__layout > footer ul {
	list-style: none;
}
#footer__layout > footer ul li {
	display: inline-block;
}

#footer__layout > footer ul li::before {
	content: '⸗';
	display: inline-block;
	min-width: 1.25em;
	text-align: center;
}
#footer__layout > footer ul li:first-child::before {
	content: none;
}