:root {
	--background-color: #caf7bb;
	--body-color: white;
	--accent-background-color: #bbf7f7;
	--text-color: black;
	--background-image: url("/resc/images/background_faded_dark.png");
	--en-inline: inline;
	--en-block: block;
	--cs-inline: none;
	--cs-block: none;
}

html[data-theme="light"]{
	--background-color: #caf7bb;
	--body-color: white;
	--accent-background-color: #bbf7f7;
	--text-color: black;
	--background-image: url("/resc/images/background_faded_dark.png");
}

html[data-theme="dark"]{
	--background-color: #4a1c4a;
	--body-color: #221122;
	--accent-background-color: #1c3e4a;
	--text-color: white;
	--background-image: url("/resc/images/background_faded.png");
}

html[data-language="en"]{
	--en-inline: inline;
	--en-block: block;
	--cs-inline: none;
	--cs-block: none;
}

html[data-language="cs"]{
	--en-inline: none;
	--en-block: none;
	--cs-inline: inline;
	--cs-block: block;
}

html {
	background-color: var(--background-color);
	background-image: var(--background-image);
	background-size: 116px auto;
	image-rendering: pixelated;
}

body {
	background-color: var(--body-color);
	color: var(--text-color);
	text-align: left;
	max-width: 900px;
	margin: auto;
	border-radius: 10px;
	padding: 25px;
	image-rendering: auto;
	font-family: Cantarell, Arial, sans-serif;
}

header {
	background-color: var(--background-color);
	text-align: center;
	padding: 10px;
	border-radius: 10px;
}

header button {
	background-color: white;
	border-radius: 4px;
	border: 0px;
}

header button:hover {
	background-color: black;
}

header img {
	max-width: 100%;
	width: 228px;
	height: auto;
}

a:link, a:visited {
	color: var(--text-color);
}

a:hover {
	color: var(--accent-background-color);
}

.menu {
	background-color: var(--accent-background-color);
	text-align: center;
	border-radius: 10px;
	padding: 10px;
}

.menu a {
	font-weight: bold;
	text-decoration: none;
	color: var(--text-color);
}

.menu a:hover {
	text-decoration: underline;
}

h1 {
	text-align: center;
	text-decoration: underline;
}

h2 {
	text-decoration: underline overline 2px double;
}

footer {
	background-color: var(--accent-background-color);
	text-align: right;
	border-radius: 10px;
	padding: 10px;
}

img {
	max-width: 100%;
}

.pixelart {
	image-rendering: pixelated;
}

.ex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

.ex {
	align-self: center;
	background-color: #ffffff30;
	border-radius: 5px;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: -5px;
}

.ex {
	align-self: center;
	background-color: #ffffff;
	padding: 5px;
	border-radius: 5px;
	margin: 5px;
}

.third {
	max-width: 250px;
}

.ex:hover {
	opacity: 0.8;
	background-color: #ffffff1f;
}

.third {
	max-width: 250px;
}

.centered {
	text-align: center;
}

.cs {
	display: var(--cs-block);
}

span.cs {
	display: var(--cs-inline);
}

.en {
	display: var(--en-block);
}

span.en {
	display: var(--en-inline);
}