:root {
	--text-colour: #333;
	--background-colour: white;
	--accent-colour: #1A3B5B;
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--text-colour: #fff;
		--background-colour: #000;
		--accent-colour: #0f0;
	}
	#logo { background-color: var(--text-colour)}
}
a { color: var(--accent-colour); }
a:visited { color: var(--accent-colour); }
.story-slides-ui button {border-color: var(--accent-colour); color: var(--accent-colour)}
.story-slides-ui button:focus, .story-slides-ui button:hover {background: var(--accent-colour); color: var(--background-colour)}
#logo {width: 8em; padding: 1em}
.avatar {width: 200px; height: 200px}
table {font-size: 0.8em!important;width:75%; margin-top: 1em}
th {border: 1px solid; border-color: var(--text-colour,var(--text-color)); color: var(--background-colour,var(--background-color))!important}
th[scope="row"] {border: 1px solid; border-color: var(--text-colour,var(--text-color)); color: var(--text-colour,var(--text-color))!important; text-align: left}
td {border: 1px solid var(--text-colour,var(--text-color))}
caption {font-weight: bold;}
.keystrokes {min-width: 10em;}
.mode-story pre {overflow:auto;}
.img-helper {width:50%; margin: 0 auto;}
button {margin-bottom: 1em}
@media screen and (max-width: 30em) {
	.mode-story .story-slides-ui > .story {height: 5em }
}
@media screen and (max-width: 40em) {
	.img-helper {width: 100%}
}