[data-theme="light"] {
  /* default (light) theme */
  color-scheme: light;
    --bg: #EEEEEE;
    --bg-light: #CBCDCD;
    --text: #41474E;
    --text-light: #646868;
    --accent: #D26878;
    --accent-light: #e08f67;
    --accent-text: var(--bg);
    --border: #646868;
    --link: #5690AF;
	--tag: royalblue;
}

[data-theme="dark"] {
  color-scheme: dark;
    --bg: #222529;
    --bg-light: #464949;
    --text: #D6D6D6;
    --text-light: #DBD5BC;
    --accent: #78B6AD;
    --accent-light: #87C9E5;
    --accent-text: var(--bg);
    --border: #DBD5BC;
    --link: #E2AEA2;
	--tag: lightgreen;
}

/* overriding suCSS settings so that my 80 chars wrapped sources fit into the
* pre boxes. also deactivated max-height for them. */
pre {
	font-size: 0.9rem;
	overflow: scroll;
	max-height: none;
}

/* i would like scrollbars to be always shown, but i deactivated max-height for
* source-code listings (aka `pre`) anyway. we'll see ;) */
* {
  scrollbar-color: var(--accent) var(--bg-light);
  /* scrollbar-width: thin; */
  scrollbar-width: auto;
  scrollbar-height: thin;
}

a.mytag {
	font-style: italic;
	color: var(--tag);
}
a.mytag:hover {
	background-color: var(--tag);
	color: var(--bg);
}

.snod {
	margin-top: 50px;
	margin-left: 50px;
	margin-right: 60px;
}
.snod.caption {
	margin-top: 0px;
	margin-bottom: 60px;
	text-align: center;
}

.greeting {
	margin: 40px 40px 40px 40px;
	border-color: transparent;
}

.greeting pre {
	border: 0px solid  black;
	text-align: center;
	font-weight: bold;
	background-color: var(--fg);
}

.lesson {
	margin-top: 40px;
	margin-left: 50px;
	margin-right: 60px;
	text-align: center;
	font-style: italic;
	border-color: transparent;
}

.lesson_caption {
	margin-top: 0px;
	margin-bottom: 60px;
	text-align: center;
}

/* .lesson pre { */
/* 	border: 0px solid  black; */
/* } */