:root {
	--body--bgcolor: #1c1c1c;
	--body--color: #fff;
	--link--color: rgb(109, 203, 253);
	--link--color-hover: #c5fc98fe;
	--diagram--bgcolor: #eeffee;
	--info-nav--bgcolor: #111;
	--info-view--padding: 4px;
	--border--color: #fff;
	--button--border-color: #d1d1d1;
	--button--active-color: #666;
	--input--color: #fff;
	--input--bgcolor: rgb(51, 51, 51);
	--input--disabled-color: #77a;
	--input--disabled-bgcolor: #333;
	--input--height: 30px;
	--tableview__value--color1: white;
	--tableview__value--color2: rgba(255,255,230,1);
	--tableview__value--color3:rgba(240,240,255,1);
	--tableview__value--stroke-color: black;
	--tableview__value--bgcolor: rgba(238,255,238,1);
	--tableview__input--color: rgba(254,239,167,1);
	--tableview__selected-color: rgb(165, 214, 81);
	--selected__list--bgcolor: rgb(79, 85, 116);
	--subtext--color: darkgray;
	--title--color: #69e469;
	--bold--color: #fbb636;

	--sides--color: rgb(47, 47, 46);
}

@media (prefers-color-scheme: light) {
	:root {
		--body--bgcolor: #fafafa;
		--body--color: #000;
		--link--color: blue;
		--link--color-hover: #108020;
		--diagram--bgcolor: #eeffee;
		--info-nav--bgcolor: #f3f3f3;
		--border--color: #000;
		--button--border-color: #bababa;
		--button--active-color: #ccc;
		--input--color: #000;
		--input--bgcolor: #fff;
		--input--disabled-color: #555;
		--input--disabled-bgcolor: #ccc;
		--tableview__value--color1: white;
		--tableview__value--color2: rgba(255,255,230,1);
		--tableview__value--color3:rgba(240,240,255,1);
		--tableview__value--stroke-color: black;
		--tableview__value--bgcolor: rgba(238,255,238,1);
		--tableview__input--color: rgba(254,239,167,1);	
		--selected__list--bgcolor: lightgray;
		--subtext--color: rgb(102, 101, 101);
		--title--color: #040;
		--bold--color: black;

		--sides--color: rgb(89, 80, 80);
	}
}

body {
	background-color: var(--sides--color)  !important;
	color: var(--body--color);
	box-sizing: border-box;
}

img {max-width: 95%; }

a {
	color: var(--link--color);
}

a:hover {
	color: var(--link--color-hover);
}

p img       { float: none; }
img.no_padding {padding:0;margin:0}

.img-right {
	float: right;
	margin: 0 0 .5em .5em;
}
em { font-weight:bold; }
.img-left {
	float: left;
	margin: 0 .5em .5em 0;
}

.clickable {
	cursor: pointer;
}

li {
	padding: 5px;
}

#page {
	max-width: 600px;
	min-height: 600px;
	background-color: var(--body--bgcolor);
	margin: auto;
	padding: 10px;
	border: solid 1px var(--border--color);
}

#heading {
	position: sticky;
	top: 0;
	background-color: rgb(255, 253, 225);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 30px;
	grid-template-areas: "title title";
	grid-gap: 5px;
	padding-bottom: 5px;
}

#title {
	grid-area: title;
	font-size: larger;
	padding-bottom: 5px;
	color: var(--title--color);
	border-bottom: solid 1px var(--border--color);
}

#title span {
	display: flex;
	align-items: center;
	justify-content: center;
}

.section h3 {
	color: var(--title--color);	
}

* {box-sizing:border-box}

#menu {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 5px;
border-bottom: solid 1px var(--border--color);
padding-bottom: 5px;
margin-bottom: 10px;
}

#help {
	margin-right: 10px;
	display: flex;
	justify-content: right;
}

#run {
	margin-left: 10px;
	display: flex;
	justify-content: left;
}

/* Slideshow container */
.slideshow-container {
max-width: 600px;
position: relative;
margin: auto;
}

/* Make the images invisible by default */
.slide {
display: none;
}

.slide img {
display: block;
margin-left: auto;
margin-right: auto;
}

/* forward & Back buttons */
.back, .forward {
cursor: pointer;
color: grey;
font-weight: bold;
font-size: 24px;
transition: 0.4s ease;
	user-select: none;
}

/* Place the "forward button" to the right */
/* .forward {
right: 0;
border-radius: 4px 0 0 4px;
} */

/*when the user hovers,add a black background with some little opacity */
.back:hover, .forward:hover {
color: rgba(0,200,0,1);
}

/* Caption Info */
.info {
/* color: #e3e3e3; */
display: grid;
grid-template-columns: 20px 1fr 20px;
font-size: 16px;
padding: 10px 14px;
bottom: 10px;
width: 100%;
text-align: center;
}