body { max-width: 90ch; margin: 2rem; }

p, li { text-align: justify; line-height: 1.4;  }
pre { max-width: 100%; overflow: auto; padding: .5rem; border: 1px solid #000; }

figure { margin: 1rem 0; }
figure>figlabel { font-family: monospace; display: block; }

footer { font-family: monospace; margin: 2rem 0; border-top: 1px solid #000; }
footer>div { margin: 1rem 0; }

table { border-collapse: collapse; }
th, td { padding: .2rem .6rem; border: 1px solid #000; }
th { text-align: left; }

kbd {
	font-weight: bold;
	border-radius: 3px;
	padding: 0 .4em;
	background: #eee;
	border: 1px solid #bbb;
	border-bottom-width: 2px;
}

@media (prefers-color-scheme: dark) {
	.mode::after { content: 'dark mode'; }
	body { background: #000; color: #eee; }
	kbd { background: #222; border-color: #444; }
	footer { border-color: #eee; }
	a:link { color: #0ff; }
	a:visited { color: #ff0; }
	a:active { color: #f00; }
	th, td, pre { border-color: #aaa; }
}

@media (prefers-color-scheme: light) {
	.mode::after { content: 'light mode'; }
}

@media print {
	.mode::after { content: 'print mode'; }
	body { margin: 0; }
}

.ukraine-flag { font-weight: bold; }
@media not print {
	.ukraine-flag>div { line-height: 2rem; min-height: 2rem; padding: 0 .5rem; }
	.ukraine-flag>div:nth-child(1) { background-color: #0057b7; color: #ffd700; }
	.ukraine-flag>div:nth-child(2) { background-color: #ffd700; color: #0057b7; }
}