/* Variables to make the theme scale
 **********************************************************************/
:root {
	--base-scale: 2;
	--base-size: calc(9px * var(--base-scale));
	--border-width: calc(1px * var(--base-scale));
	--window-spacing: calc(2px * var(--base-scale));
	--window-title-height: calc(18px * var(--base-scale) - var(--window-spacing) * 2);
	--window-title-button-width: calc(10px * var(--base-scale));
	--window-title-button-height: calc(8px * var(--base-scale));
	--window-title-icon-height: calc(14px * var(--base-scale));
	--window-title-button-text-size: calc(8px * var(--base-scale));
}

/* Fonts
 **********************************************************************/
@font-face {
	font-family: "IBM Plex Mono";
	src:
		local("IBM Plex Mono"),
		url("ibm_plex_mono_light.otf") format("opentype");
}
@font-face {
	font-family: "Fira Code";
	src:
		local("Fira Code"),
		url("fira_code_light.ttf") format("truetype");
}
@font-face {
	font-family: "Levi Windows Regular";
	src:
		local("Levi Windows Regular"),
		url("levi_windows_regular.ttf") format("truetype");
}

/* Basics
 **********************************************************************/
html {
	font-family: "Courier New", monospace;
	font-size: var(--base-size);
	margin: 0;
	padding: 0;
	line-height: 1;
}
body {
	background: #d5ecfb url("clouds.png");
	margin: 2rem;
	padding: 0;
}
header {
	text-align: center;
	font-style: italic;
}
header p {
	font-weight: bold;
}

a:hover {
	color: black;
}

footer {
	text-align: center;
	margin: 2rem 0;
}

/* Genearl window frame
 **********************************************************************/
.window-frame {
	/*box-sizing: border-box;*/
	border-width: var(--border-width);
	border-style: solid;
	border-color: #dedede #000000 #000000 #dedede;
	/*border-top:    2px solid #dedede;
	border-right:  2px solid #000000;
	border-bottom: 2px solid #000000;
	border-left:   2px solid #dedede;*/
	max-width: 38rem;
	margin: 2rem auto;
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.3);
}
.window {
	background: #bdbdbd;
	box-sizing: border-box;
	border-width: var(--border-width);
	border-style: solid;
	border-color: #ffffff #7b7b7b #7b7b7b #ffffff;
	padding: var(--window-spacing);
}

.window > p {
	margin: 0.75rem 0.5rem;
}

/* General window frame title
 **********************************************************************/
.window-title {
	background: #000082;
	background: linear-gradient(90deg, #00007b, #0884ce);
	/*height: var(--window-title-height);*/
	padding: var(--window-spacing);
	border-bottom: var(--border-width) solid #c3c3c3;
	/*margin: 0 0 var(--window-spacing);*/
	display: flex;
}
.window-title img {
	width: auto;
	height: var(--window-title-icon-height);
}
.window-title > h2 {
	font-size: 1rem;
	color: white;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	flex: 1;
}
.window-title-button {
	background: #bdbdbd;
	border-width: var(--border-width);
	border-style: solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	/*box-sizing: border-box;*/
	align-self: center;
	user-select: none;
}
.window-title-button:last-child {
	margin-left: var(--window-spacing);
}
.window-title-button > div {
	border-width: var(--border-width);
	border-style: solid;
	border-color: #dedede #7b7b7b #7b7b7b #dedede;
	/*box-sizing: border-box;*/
	width: var(--window-title-button-width);
	height: var(--window-title-button-height);
	text-align: center;
	line-height: var(--window-title-button-height);
	font-size: var(--window-title-button-text-size);
}
.window-title-button:nth-child(2) div {
	text-align: left;
}

/* Information/status bar at the bottom of a window
 **********************************************************************/
.window-details {
	text-align: right;
	border-width: var(--border-width);
	border-style: solid;
	border-color: #7b7b7b #ffffff #ffffff #7b7b7b;
	padding: var(--window-spacing);
	margin-top: var(--window-spacing);
}

/* Widgets have an additional border to make them look indented
 **********************************************************************/
.window-widget-frame {
	border-width: var(--border-width);
	border-style: solid;
	border-color: #7b7b7b #ffffff #ffffff #7b7b7b;
	margin: 4px 0 0;
}

/* Text widget
 **********************************************************************/
.window-text-widget {
	background: white;
	box-sizing: border-box;
	border-width: var(--border-width);
	border-style: solid;
	border-color: #000000 #dedede #dedede #000000;
	padding: 0.5rem 1rem;
	line-height: 1.2;
}
.window-text-widget ul {
	margin: 0;
	padding: 0 0 0 1rem;
	list-style: square;
}
.window-text-widget li {
	margin: 0.5rem 0;
}

/* Folder widget
 **********************************************************************/
.window-folder-widget {
	background: white;
	box-sizing: border-box;
	border-width: var(--border-width);
	border-style: solid;
	border-color: #000000 #dedede #dedede #000000;
	padding: 0rem 1rem;
}
.window-folder-widget ul {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	gap: 2rem;
}
.window-folder-widget li {
	text-align: center;
	margin: 0;
}

/* Tiles widget
 **********************************************************************/
.window-tiles-widget {
	background: white;
	box-sizing: border-box;
	border-width: var(--border-width);
	border-style: solid;
	border-color: #000000 #dedede #dedede #000000;
	padding: 1rem;

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}
.window-tiles-widget a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}