* { box-sizing: border-box; }

:root {
	--fg-color: rgb(37, 37, 37); /* #252525; */
	--hl-color: rgb(5, 61, 118); /* #053d76; */
	--bg-color: rgb(244, 244, 244); /* #f4f4f4; */
	--tc-color: rgb(255, 255, 255); /* #ffffff; */
	--radius: 1ex;
}

@media (prefers-color-scheme: dark) {
	:root {
	--fg-color: #ccc; /* rgb(209, 205, 199); */
	--hl-color: rgb(135, 198, 250);
	--bg-color: #111; /* rgb(30, 33, 34); */
	--tc-color: #151515; /* --tc-color: rgb(24, 26, 27); */
	}
}

@media print {
	:root {
	--fg-color: #000;
	--hl-color: #000;
	--bg-color: #fff;
	--tc-color: #fff;
	}
}

body {
	margin: 0;
	padding: 2em;
	background-color: var(--bg-color);
	color: var(--fg-color);
	font-family: serif; /* "Source Serif 4", Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; */
	font-size: 1.05rem;
}

#container, .card {
	width: 100%;
	max-width: 60em;
	margin-bottom: 1em;
/*
	margin-left: auto;
	margin-right: auto;
*/
	overflow: auto;
	padding: 1em;
	border: solid var(--fg-color) 1px;
	border-radius: var(--radius);
	background-color: var(--tc-color);
	text-align: justify;
	hyphens: auto;
}
header.card p, header.card h1, footer.card p { margin: 0; }

@media (max-width: 1000px) {
	#container, .card { width: 100%; margin: 0 auto 1em; }
}

/* Otsikot */
#container hgroup h1, #container hgroup p { margin: 0; }
#container hgroup { margin-bottom: 1em; }
hgroup + h2, hgroup + p { margin-top: 0; }
hgroup nav {
	margin-bottom: -1ex;
	font-weight: bold;
	text-transform: uppercase;
	font-size: smaller;
	letter-spacing: 1pt;
}
hgroup nav a::after { content: " »"; }
/* hgroup nav a:nth-last-of-type(1)::after { content: ""; } */

#container footer { border-top: 1pt solid var(--fg-color); margin-top: 1em; padding-top: 1em; }
#container footer p:last-child { margin-bottom: 0; }

h1, h2, h3 { margin-bottom: 0; color: var(--hl-color); text-align: left; }
h2 { font-size: 1.20rem; }
h3 { font-size: 1.05rem; }

p, ol, ul, pre { margin: 1ex 0; }
pre { overflow: scroll; }

.left { float: left; }
.right { float: right; clear: right; }
.col { width: 50%; }
.centering { text-align: center; }
.center { display: block; margin: 0 auto; }
.clearboth { clear: both; }
.flr { float: right; }
.fll { float: left; }

p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }

/* Linkit */
a:link, a:visited, a:hover, a:active { color: var(--hl-color); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

figure img { width: 100%; }
.border { border: 1px solid var(--fg-color); border-radius: var(--radius); }
.pixelated { image-rendering: pixelated; }

/* Erityisiä tyylejä */
ins { text-decoration: none; color: gray; }
del { text-decoration: line-through; text-decoration-color: gray; }
p.start::first-line { font-variant-caps: small-caps; }
a.caps { font-weight: bold; text-transform: uppercase; font-size: smaller; letter-spacing: 1pt; }
a.caps::before { content: "["; }
a.caps::after { content: "]"; }

@font-face {
	font-family: "UnifrakturCookLight";
	src: url("bin/UnifrakturCook-Light.ttf");
}
.initials {
	font-family: "UnifrakturCookLight";
	position: absolute;
	bottom: 2ex; left: 2em;
}

/* Taulukot */
table { border-collapse: collapse; }
td, th { padding: 2pt; }
th { text-align: left; border-bottom: 1pt solid var(--fg-color); }

@counter-style decimal-brack {
  system: extends decimal;
  prefix: "[";
  suffix: "] ";
}

/* Lähdeluettelot */
/* Chicago Manual of Style */
ol.chicago { padding: 0; list-style-type: none; text-align: left; }
ol.chicago li { margin-left: 2em; text-indent: -2em }
/* Angewandte Chemie */
ol.angew { list-style: decimal-brack; }

/* Screen reader */
.skip {
	position: absolute; left: -10000px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.skip:focus { position: static; width: auto; height: auto; }

@media print {
	body { padding: 0; font-size: initial; }
	#container, .card {
		width: 100%;
		max-width: initial;
		border: none;
		padding: 0;
	}
	.noprint { display: none; }
}