html,
	body {
		height: 100%;
		margin: 0;
		display: flex;
		flex-direction: column;
	}

	body {
		font-family: sans-serif;
		/*background-color: var(--Background);*/
		background-color: var(--InfoWindow);
		color: var(--InfoText);
		/* background-color: var(--ButtonFace);
		color: var(--ButtonText); */
	}

	header {
		color: white;
		background-color: #4e004e;
		background: radial-gradient(circle at 50% 120%, #ff43c0, #59025c, #040005);
		margin: 0;
		padding: 10vw;
	}

	header a {
		color: white;
	}

	main,
	footer {
		padding: 1em;
	}

	main {
		flex: 1;
	}

	nav {
		text-align: center;
		font-size: 2em;
		margin-top: 1em;
		margin-bottom: 1em;
	}

	footer {
		flex: 0 0 auto;
		text-align: center;
		background: var(--ButtonFace);
		color: var(--ButtonText);
	}

	button:not(.window-button) {
		padding: 3px;
	}

	p>button {
		vertical-align: bottom;
		/* so text in a paragraph following the button flows with consistent line spacing (vertical rhythm) */
	}

	.window-content {
		padding: 1em;
	}

	#buttons-demo td button {
		width: 100%;
		max-width: 200px;
	}

	#buttons-demo,
	#insets-outsets-demo {
		border-collapse: collapse;
	}

	#buttons-demo td,
	#insets-outsets-demo td {
		padding: 0.5em;
	}

	/* can't use <col> for this because I'm conditionally changing the display property with a media query */
	#buttons-demo td:first-child,
	#insets-outsets-demo td:first-child {
		background: var(--ButtonFace);
		color: var(--ButtonText);
	}

	#insets-outsets-demo td:first-of-type div {
		padding: 10px;
	}

	td:nth-child(2) code {
		display: block;
		background: white;
		color: black;
	}

	@media (max-width: 800px) {
		.demo-table {
			display: block;
		}

		.demo-table tr {
			display: block;
		}

		.demo-table tr td {
			display: block;
			padding: 0.5em;
		}

		.demo-table colgroup,
		.demo-table col {
			display: none;
		}
	}

	.scrollbar-demo {
		display: inline-block;
		padding: 0 15px;
	}

	.scrollbar-demo .scrollbar-track.vertical,
	.scrollbar-demo .scrollbar.vertical {
		width: var(--scrollbar-size);
	}

	.scrollbar-demo .scrollbar-track.vertical {
		height: 50px;
	}

	.scrollbar-demo .scrollbar-thumb.vertical {
		height: 20px;
	}

	body {
		overflow: scroll;
		/* show off the custom scrollbars :) */
	}

	#logo-heading {
		margin: 0.1em 0;
		line-height: 1;
		font-size: min(100px, 12vw);
		text-align: center;
		white-space: nowrap;
		/* picked for metric compatibility - with each other, mainly; it's not that good of a match though for Laser Corps, the font I used for the logo */
		/* I could do selectable text in a bullet proof way if I wanted, by specifying the sizes of spans per letter. */
		font-family: Arial, Helvetica, Liberation Sans, FreeSans, sans-serif;
		letter-spacing: 0.25em;
	}

	#logo-heading>span {
		background: url('images/os-gui-logo.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		color: transparent;
	}

	/* Why two elements? Well if you make part of the link fly away, it makes clicking the link unreliable,
	given that the link is no longer under your mouse. So if you're animating a link or button,
	it's useful to separate the click target from the visual element that is animating. */
	#spaceship-graphic {
		display: inline-block;
		width: 8em;
		height: calc(8em * (164 / 241));
		vertical-align: middle;
		position: relative;
	}

	#spaceship-graphic::after {
		content: "";
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 50%;
		background: url("https://i.postimg.cc/pTCqBxL0/Spaceship-tut.png");
		width: 164px;
		height: 241px;
		transform: translate(-50%, -50%) scale(0.5) rotate(.25turn);
		transition: transform 1s;
	}

	#spaceship-link:active #spaceship-graphic::after,
	#spaceship-link:focus #spaceship-graphic::after {
		transform: translate(-50%, -50%) translateX(460px) scale(0.3) rotate(.25turn);
	}
	
.desktop {
	background: var(--Background);
}
.taskbar {
	outline: 1px solid var(--ButtonLight);
	border-top: 1px solid var(--ButtonHilight);
	background: var(--ButtonFace);
	color: var(--ButtonText);
}
.taskbar-divider {
	border-left: 1px solid var(--ButtonShadow);
	border-right: 1px solid var(--ButtonHilight);
}
.taskbar-time {
	font-family: sans-serif;
	font-family: "MS Sans Serif", "Segoe UI", sans-serif;
	font-size: 12px;
}
.start-menu-titlebar {
	/* background-image: url("images/start-menu-side.png"); */
	/* background-image: url("images/start-menu-side-98-js.png"); */
	background-image: url("images/start-menu-side-98-js-alt.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	background-color: #000080;
}
.start-menu li a,
.start-menu .back-link {
	display: block;
	padding: 5px 0;
	color: blue !important; /* regardless of :visited */
}
.start-menu li a:before,
.start-menu .back-link:before,
.the-thing-heading:before {
	content: "»";
	text-decoration: none;
	display: inline-block;
	margin-right: 5px;
}
.start-menu .back-link:before {
	content: "«"
}
.the-thing-heading {
	/* font-size: 1em; */
}
.windows-cant-do-it-you-can {
	margin-top: 2em;
	/* background: white;
	padding: 5px;
	border: inset 1px; */
}
.task.selected {
	font-weight: bold;
}
.desktop-icon {
	position: absolute;
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.folder-view:focus {
	outline: none;
}
.folder-view:not([data-view-mode="DESKTOP"]):not([data-view-mode="LARGE_ICONS"]) .desktop-icon {
	display: flex;
	flex-direction: row;
	width: 150px;
	height: 17px;
    align-items: center;
}

.folder-view[data-view-mode="DESKTOP"] .desktop-icon,
.folder-view[data-view-mode="LARGE_ICONS"] .desktop-icon {
	width: 75px;
	height: 75px;
}
.desktop-icon .title {
	font-family: sans-serif;
	font-family: "MS Sans Serif", "Segoe UI", sans-serif;
	/*font-size: 10px;*/
	font-size: 8pt;
	background: var(--Background);
	color: white;
	position: relative;
	box-sizing: border-box;
	display: flex;
    justify-content: center;
}
.folder-view[data-view-mode="DESKTOP"] .desktop-icon .title,
.folder-view[data-view-mode="LARGE_ICONS"] .desktop-icon .title {
	margin-top: 5px;
}
.folder-view:not([data-view-mode="DESKTOP"]):not([data-view-mode="LARGE_ICONS"]) .desktop-icon .title {
	text-align: start;
    justify-content: start;
	white-space: nowrap;
	height: 17px;
	line-height: 17px;
	padding-right: 2px;
	padding-left: 3px;
}

.folder-view:focus-within .desktop-icon.selected:not(.renaming) .title {
	background: var(--Hilight);
	color: var(--HilightText);
}
.folder-view:focus-within .desktop-icon.focused:not(.renaming) .title::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	border: 1px dotted #ffffff;
	mix-blend-mode: exclusion;
}
.folder-view .desktop-icon.renaming .title {
	border: 1px solid var(--ButtonText); /* @TODO: is this the right theme color? */
}
.desktop-icon .title input {
	font: inherit;
	outline: none;
	border: none; /* using border of the .title */
	height: 17px; /* @TODO: auto-size */
	line-height: 13px; /* 17px-4px so the selection highlight doesn't abut the border (height is also important) */
	box-sizing: border-box;
	background: var(--Window);
	color: var(--WindowText);
	text-align: inherit;
	padding: 0;
	align-self: center;
}
.desktop-icon .icon-wrapper .selection-effect {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	mask-image: var(--icon-image);
	-webkit-mask-image: var(--icon-image);
	background: var(--Hilight);
	opacity: 0.5;
}
.folder-view:focus-within .desktop-icon.selected .icon-wrapper .selection-effect {
	display: block;
}
.desktop-icon .icon-wrapper {
	position: relative;
}
.desktop-icon.shortcut .icon-wrapper:after {
	content: var(--shortcut-icon, url("images/icons/shortcut-32x32.png"));
	position: absolute;
	left: 0;
	top: 0;
}
.folder-view .marquee {
	border: 1px dotted #ffffff;
	box-sizing: border-box;
	mix-blend-mode: exclusion;
	/* TODO: fallback for browsers that don't support mix-blend-mode (something like #FF7F7F)... Edge doesn't support @supports either :/ */
	z-index: 1;
}

.help-window .item {
	font-family: 'Segoe UI', sans-serif;
	font-size: 12px;
	padding: 0 2px;
	position: relative; /* for ::after */
}
.help-window .item:hover {
	text-decoration: underline;
	color: #0000FF;
	cursor: pointer;
}
.help-window li:before {
	background-image: url("../../images/help-icons.png");
}
.help-window:not(.focused) .item.selected {
	background-color: var(--ButtonFace);
	color: var(--ButtonText); /* ?? */
}
.help-window.focused .item.selected {
	background-color: var(--Hilight);
	color: var(--HilightText);
	/* @TODO: separate focus state of the item */
	outline: 1px dotted black;
	outline-offset: -1px;
}
/* @TODO: separate focus state of the item; while mouse down, the main highlight does not move with the arrow keys but this does, among other differences */
/* .help-window.focused .item.selected::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border: 1px dotted white;
	mix-blend-mode: difference;
} */

.window-switcher {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 350px;
	z-index: 1000;
	user-select: none;
}
.window-switcher * {
	pointer-events: none;
}
.window-switcher-list {
	display: flex;
    margin: 0;
    padding: 0;
	flex-direction: row;
	flex-wrap: wrap;
    justify-content: start;
	max-width: calc(43px * 7);
	margin-top: 17px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}
.window-switcher-item {
	display: flex;
	width: 43px;
	height: 43px;
	box-sizing: border-box;
	border: 2px solid transparent;
	padding: 0;
	outline: none;
}
.window-switcher-item.active {
	border: 2px solid var(--Hilight);
}
.window-switcher-item img {
	margin: 3px;
}
.window-switcher-window-name {
    align-self: stretch;
	font-family: "MS Sans Serif", "Segoe UI", sans-serif;
	font-size: 10pt; /* not sure about the font-size/line-height */
	line-height: 16px;
	font-weight: bold;
	height: 24px; /* should be 25px, but the border is getting screwed up if this isn't an even number */
	box-sizing: border-box;
	padding: 2px;
	margin: 8px 12px;
	margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

* {
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.menu-hotkey {
	/* TODO: remove once this is in os-gui */
	text-decoration-skip: none;
    text-decoration-skip-ink: none;
}