:root {
	--main-width: 900px;
	--main-height: 720px;
	
	--sidenav-width: 25%;
	
	--win-border-thickness: 2px;
	--win-border-inside: 1px;
	--win-titlebar-height: 24px;
}

@media (max-width: 900px) or (max-height: 720px) {
	:root {
		--main-width: 600px;
		--main-height: 480px;
	}
}

* {
	font-family: monospace, monospace;
}

body {
	background-image: url("./media/stars 2.gif");
}

.container {
	width: var(--main-width);
	height: var(--main-height);
	display: inline-block;
	position: absolute;
	left: calc(50% - var(--main-width)/2);
	top: calc(50% - var(--main-height)/2);
	
	display: table-row
}

.main, .sidenav {
	overflow-y: scroll;
	display: table-cell;
	height:100%;
	padding: 16px;
}

.sidenav {
	width: var(--sidenav-width);
}

/* Window decorations */

.window {	
	border-style: inset;
	border-width: var(--win-border-thickness);
}

.window-title {
	padding-left: 8px;
	color: black;
	font-weight: bold;
	
	line-height: var(--win-titlebar-height);
	height: var(--win-titlebar-height);
	
	margin-left: var(--win-border-inside);
	margin-right: calc(var(--win-border-inside));
	margin-top: var(--win-border-inside);

	background-image: linear-gradient(to right, #B57EDC , #E6E6FA);
}

.window-decor {
	position: absolute;
	z-index: -1;
	
	left: calc(0px - var(--win-border-thickness) * 2 - var(--win-border-inside));
	width: calc(100% + var(--win-border-thickness) * 2 + var(--win-border-inside) * 2);

	top: calc(0px - var(--win-border-thickness) * 3 - var(--win-border-inside) - var(--win-titlebar-height));
	height: calc(100% + var(--win-border-thickness) * 3 + var(--win-border-inside) * 2 + var(--win-titlebar-height));
	
	background-color: #d4d0c8;
	
	border-style: outset;
	border-width: var(--win-border-thickness);
}