body {
	margin: 0;
	font-family: Tahoma, 'Segoe UI', Geneva, Verdana, Arial, Helvetica, sans-serif;
	display: flex;
	flex-direction: column;
}
html, body {
	height: 100%;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
}

* {
	box-sizing: border-box;
}

#screen {
	height: 100%;
	width: 100%;

	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;

	flex-grow: 1;
}


.window {
	max-height: 100%;
	max-width: 100%;
	resize: both;
	overflow: hidden;
	transform-origin: top left;
	transition: 0.25s ease none;
}
.window.animating_resize {
	transition-property: left,top,width,height,transform;
}
/* .window.priority {
	z-index: 50;
} */
.window.maximized {
	width: 100% !important;
	height: 100% !important;
	left: 0 !important;
	top: 0 !important;
	resize: none;
}
.window.minimized {
	transform: scale(25%);
}
.title-bar {
	cursor: grab;
}
.window.dragging .title-bar {
	cursor: grabbing;
}


#desktop {
	background: url("images/bliss.jpg");
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;

	display: grid;
	grid-auto-columns: 76px;
	grid-template-rows: repeat(auto-fill, 48px);
	row-gap: 36px;
	grid-auto-flow: column;
	/* align-items: center; */
	text-align: center;
	justify-items: center;

	padding: 8px;
	box-sizing: border-box;
}

.desktopIcon img {
	width: 32px;
	height: 32px;
}
.desktopIcon div {
	color: white;
	font-size: 12px;
	text-shadow: 1px 2px 3px black;
	border: 1px dotted transparent;
}

.desktopIcon.selected img {
	opacity: 50%;
}
.desktopIcon.selected div {
	background-color: #316AC5;
	border: 1px #CE953A dotted;
}


.startbar {
	height: 30px;
	text-align: left;
	background: url("images/startbar.png") bottom;
	z-index: 100;
}
#startbarButton {
	width: 99px;
	height: 30px;
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	color: white;
	font-style: italic;
	font-weight: bold;
	font-size: 16px;
	text-shadow: 1px 2px 4px black;
	background: url("images/startbar.png") top;
	pointer-events: all;
	text-align: left;
	padding-left: 33px;
	transition: 2s linear transform;
}
#startbarButton:hover:enabled{
	background-position-y: top -30px;
}
#startbarButton:active:enabled{
	background-position-y: top -60px;
}

#startbarButton.slideLeft{
	pointer-events: none;
	transform: translateX(-105%);
}


#paint {
	width: 490px;
	height: 493px;
	min-width: 256px;
	min-height: 192px;
	padding: 0;
}
#paint .window-body {
	border-style: solid;
	border-image: url("images/paint_workspace_border.png") 2 / auto;
	background-color: #808080;
	padding: 5px;
	contain: paint;
}
#paint .window-body > div {
	width: 100%;
	height: 100%;
}
#paintCanvas {
	position: absolute;
	background-color: white;
	cursor:  crosshair;
	--perspective: 500px;
	transition: 0.75s ease transform;
}

#paintColours {
	display: grid;
	height: 49px;
	grid-template-columns: 31px repeat(14, 16px);
	grid-template-rows: 16px 16px;
	align-content: center;
	border-bottom: 1px #ACA899 solid;
	box-sizing: border-box;
}
#paintColours div {
	border-style: solid;
	border-image: url("images/swatch_border.png") 2 / auto;
}

#paintSwatch {
	grid-row: 1/3;
	background: url("images/checkerboard.png");
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	position: relative;
}
#paintSwatchForeground {
	left: 4px;
	top: 5px;
	background-color: black;
}
#paintSwatchBackground {
	right: 5px;
	bottom: 5px;
	background-color: white;
}
#paintSwatch div {
	width: 15px;
	height: 15px;
	position: absolute;
	border-image-source: url("images/swatch_border2.png");
}

#paintViewMenuCanvas {
	width: 128px;
	height: 128px;
}

.greyscale {
	filter: grayscale(100%);
}


#textWindow {
	width: 420px;
	height: 400px;
	min-width: 220px;
	min-height: 120px;
}
#textWindow .window-body {
	background-color: white;
	font-family: "Lucida Console";
	border: 1px solid #7F9DB9;
	border-radius: 0;
	outline: none !important;
	padding: 2px;
	font-size: 13px;
	margin: 0;
	resize: none;
}



#recursionWindow {
	width: 80%;
	height: 80%;
	min-width: 200px;
	min-height: 64px;
	background: url("images/startbar.png") bottom repeat-x;
}
#recursionWindow iframe {
	border: none;
	min-height: 30px;
	background: none;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}
#recursionWindow:is(:not(.priority),.dragging,.clicked) iframe {
	pointer-events: none;
}
#recursionWindow:before {
	content: "";
	position: absolute;
	inset: 30px 0;
	background: url("images/bliss.jpg") top left / cover;
}


#minesweeperWindow {
	resize: none;
	min-width: 282px;
}
.minesweeperBoard {
	background-color: #C0C0C0;
	padding: 6px 5px 5px 6px;
	border-top: 4px solid white;
	border-left: 3px solid white;
	font-size: 1px;
}
.minesweeperBoard button {
	display: inline-block;
	background: #C0C0C0;
	border: 2px solid #808080;
	border-top-color: white;
	border-left-color: white;
	border-image: none !important;
	padding: 0;
	margin: 0;
	outline: none;
	border-radius: 0;
	box-sizing: border-box;
	pointer-events: auto;
}
.minesweeperBoard button:active:not(.minesweeperFlagged),
.minesweeperBoard button:disabled {
	border-width: 1px 0 0 1px;
	border-color: #808080;
}

.minesweeperHeader {
	padding: 4px 7px 4px 5px;
	margin-bottom: 6px;
	border: 2px solid #808080;
	border-right-color: white;
	border-bottom-color: white;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
#minesweeperFace {
	outline: 1px solid #808080;
	width: 24px;
	height: 24px;
	background-image: url("images/minesweeper_faces.png");
	background-origin: border-box;
	background-repeat: no-repeat;
}
#minesweeperFace.minesweeperFaceCool {
	background-position-x: 100%;
}
#minesweeperFace.minesweeperFaceScared {
	background-position-x: 50%;
}
#minesweeperFace.minesweeperFaceDead {
	background-position-x: 75%;
}
#minesweeperFace:active {
	background-position-x: 25%;
}

.minesweeperNums {
	border: 1px solid #808080;
	border-right-color: white;
	border-bottom-color: white;
	display: inline-block;
}
.minesweeperNums > div {
	background: url("images/minesweeper_numbers.png") no-repeat;
	display: inline-block;
	width: 13px;
	height: 23px;
}
.minesweeperNums > div.minesweeperNum1 {
	background-position-x: 100%;
}
.minesweeperGridArea {
	box-sizing: border-box;
	border: 2px solid #808080;
	border-right-color: white;
	border-bottom-color: white;
}
#minesweeperButton {
	width: 256px;
	height: 256px;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}
#minesweeperButton.minesweeperFlagged {
	background: url("images/flag.png") center/contain no-repeat;
}
#minesweeperButton:disabled{
	background: red url("images/mine.png") center/contain no-repeat;
}



#artWindow {
	width: 75%;
	height: 75%;
	min-width: 350px;
	min-height: 375px;
}

#artWindow .window-body {
	display: flex;
}

.artSection {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	border-right: 1px solid #ACA899;
	border-top: 1px solid #ACA899;
	padding: 8px;
	background-color: #808080;
}
.artSection > div {
	width: 100%;
	height: 100%;
}
#art {
	position: absolute;
}

#artSidebar {
	display: flex;
	flex-direction: column;
	border-left: 1px solid white;
	border-top: 1px solid #ACA899;
	border-right: 1px solid white;
	max-width: 200px;
}
#artSidebar h1 {
	text-align: center;
	font-size: 16px;
	width: 100%;
	padding: 8px;
	border-bottom: 1px solid white;
	border-right: 1px solid #ACA899;
	margin: 0;
}
#artSidebar h2 {
	text-align: center;
	margin: 0;
	font-size: 16px;
}
.promptArea {
	border-top: 1px solid #ACA899;
	border-bottom: 1px solid white;
	border-right: 1px solid #ACA899;
	padding: 8px;
	display:flex;
	flex-direction: column;
	gap: 8px;
}
#promptList {
	background-color: white;
	flex-grow: 1;
	overflow-y: scroll;
	height: 1px;
	padding-right: 16px;
	gap: 4px;
	display: grid;
	grid-template-columns: min-content 1fr min-content;
	grid-auto-rows: min-content;
	grid-auto-flow: row;
	align-items: center;
}
#addPromptButton {
	width: 21ch;
}
#generateButton {
	font-weight: bold;
}
.promptAreaLast {
	border-bottom: none;
}



#messageBoxWindow {
	resize: none;
	min-width: revert;
}
#messageBoxWindow .window-body {
	text-align: center;
	padding: 11px;
}
#messageBoxWindow .window-body > div {
	display: flex;
	align-items: center;
	margin-bottom: 17px;
}
#messageBoxWindow .window-body p {
	text-align: left;
	margin: 0 -3px 0 19px;
}
#messageBoxWindow .window-body button {
	min-width: 75px;
}

/*
* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

@font-face {
	font-family: "Roboto";
	font-weight: 400;
	src: url("Roboto400.ttf") format("truetype");
}

@font-face {
	font-family: "Courier Prime";
	font-style: normal;
	font-weight: 400;
	src: url("CourierPrime-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Courier Prime";
	font-style: italic;
	font-weight: 400;
	src: url("CourierPrime-Italic.ttf") format("truetype");
}
@font-face {
	font-family: "Courier Prime";
	font-style: normal;
	font-weight: 700;
	src: url("CourierPrime-Bold.ttf") format("truetype");
}
@font-face {
	font-family: "Courier Prime";
	font-style: italic;
	font-weight: 700;
	src: url("CourierPrime-BoldItalic.ttf") format("truetype");
}
*/