:root {
/*	--window-background-color: rgb(192, 192, 192);
	--window-left-top-border-color: rgb(150, 150, 150);
	--window-right-bottom-border-color: rgb(75, 75, 75);
	--window-title-grad-color1: rgb(0, 8, 122);
	--window-title-grad-color2: rgb(58, 131, 202);
	--window-background-color-dark: rgb(185, 185, 185);
	--window-text-area-background: white;*/


	--window-background-color: rgb(144, 209, 165);
	--window-left-top-border-color: rgb(96, 143, 111);
	--window-right-bottom-border-color: rgb(66, 97, 76);
	--window-title-grad-color1: rgb(43, 64, 50);
	--window-title-grad-color2: rgb(144, 209, 165);
	--window-background-color-dark: rgb(128, 186, 147);
	--window-text-area-background: rgb(240, 255, 244);

	--global-radius: 0.5em;
}

body {
	align-items: center;
	font-family: monospace;
	justify-content: center;
	margin: 0 auto;
	max-width: 100em;
	padding: 0 2.5%;
	background-color: white;
}

.nav-bar {
	list-style-type: none;
	padding: 0;
	text-align: left;
	margin: 0 0 0.25em 0;
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
}

.nav-bar-element {
	display: inline-block;
	font-size: 1.5em;
	padding-right: 0.9em;
	margin: 0;
}

.nav-bar-link {
	color: black;
	text-decoration: none;
	font-weight: light;
}

.nav-bar-link > span {
	position: relative;
	bottom: 0.25em;
}

.nav-bar-link > span > span {
	text-decoration: underline;
}

.nav-bar-link > img {
	margin-right: 0.25em;
}

.window-box {
	background-color: var(--window-background-color);
	border-color: var(--window-left-top-border-color) var(--window-right-bottom-border-color) var(--window-right-bottom-border-color) var(--window-left-top-border-color);
	border-style: solid;
	border-width: 0.38em;
	display: flex;
	flex-direction: column;
	padding: 0.5em;
	overflow: hidden;
	border-radius: var(--global-radius);
	margin: 2em 0
}

.window-title-bar {
	background: linear-gradient(0.25turn, var(--window-title-grad-color1), var(--window-title-grad-color2));
	margin: -0.25em -0.25em 0.25em -0.25em; 
	padding: 0.4em 0em;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-radius: var(--global-radius);
}

.window-image-logo {
	margin-left: 0.40em;
	margin-right: 0.55em;
	height: 19px;
	width: 19px;
	position: relative;
	top: 0.1em;
}

.window-title-text {
	color: white;
	display: inline-block;
	font-size: 1.75em;
	font-weight: lighter;
	margin: 0;
}

.window-title-button {
	background: no-repeat center var(--window-background-color);
	background-size: cover;
	border-color: var(--window-left-top-border-color) var(--window-right-bottom-border-color) var(--window-right-bottom-border-color) var(--window-left-top-border-color);
	border-style: solid;
	border-width: 0.23em;
	display: inline-block;
	padding: 1em;
	border-radius: var(--global-radius);
}

.window-title-button:active {
	border-color: var(--window-right-bottom-border-color) var(--window-left-top-border-color) var(--window-left-top-border-color) var(--window-right-bottom-border-color);
	background-color: var(--window-background-color-dark);
}

.window-title-button-x {
	background-image: url(/images/button-x.svg);
	margin-right: 0.5em;
	background-color: rgb(209, 144, 144);
	border-color: rgb(122, 84, 84) rgb(71, 49, 49) rgb(71, 49, 49) rgb(122, 84, 84);
}

.window-title-button-x:active {
	background-image: url(/images/button-x.svg);
	margin-right: 0.5em;
	background-color: rgb(176, 121, 121);
	border-color: rgb(71, 49, 49)  rgb(122, 84, 84) rgb(122, 84, 84) rgb(71, 49, 49);
}

.window-title-button-max {
	background-image: url(/images/button-maximize.svg);
	margin-right: 0.5em;
}

.window-title-button-min {
	background-image: url(/images/button-minimize.svg);
	margin-right: 0.5em;
	margin-left: auto;
}

.window-title-button-div {
	margin-left: auto;
}

.window-text-area {
	background-color: var(--window-text-area-background);
	border-color: var(--window-right-bottom-border-color) var(--window-left-top-border-color) var(--window-left-top-border-color) var(--window-right-bottom-border-color);
	border-style: solid;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	overflow: hidden;
	padding: 0 1em 0 1em;
	border-radius: var(--global-radius);
}

.normal-paragaph-text {
	text-align: left;
	font-size: 1.5em;
}

.window-footer-area {
	border-color: var(--window-right-bottom-border-color) var(--window-left-top-border-color) var(--window-left-top-border-color) var(--window-right-bottom-border-color);
	overflow: hidden;
	padding: 0 0em 0 0.3em;
	margin-top: 0.2em;
	font-size: 1.4em;
	text-align: center;
	color: var(--window-left-top-border-color);
	text-shadow: 0.05em 0.05em white;
	border-radius: var(--global-radius);
/* Styles below for original style */
/*	border-style: solid;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;*/
}

.window-footer-area > p {
	margin: 0;
}

.html-code-page-image {
	margin: auto;
}

.html-code-page-flav-text {
	font-size: 1.75em;
	text-align: center
}