* {
	box-sizing: border-box;
}

html {
	background: black;
	color: white;
	text-align: center;
}

.gamearea {
	width: 1024px;
	height: 768px;
	margin: auto;

	position: relative;

	background-image: url(/placeholder-backdrop.svg);
}

.backdrop {
	position: absolute;
	z-index: -1;
}

.monitor {
	position: absolute;
	top: 56px;
	left: 56px;
	width: 554px;
	height: 410px;

	background: white;
	border-radius: 3px;
	box-shadow: inset 0 0 60px 0px rgb(40 40 40 / 0.6);
	color: black;
	font-size: 13px;
	text-align: left;
	padding: 0.5rem;

	overflow: scroll;
	scrollbar-gutter: stable;
	scrollbar-color: darkgreen grey;
}

.columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 0.5rem;
}

.placeholder {
	display: none;
	background: #d0d0f0;
	border: dashed 2px grey;
	padding-inline: 0.2rem;
	padding-block: 0.5rem;

	&.active {
		background: white;
	}
}

.notepad {
	position: absolute;
	top: 16px;
	right: 0;
	width: 340px;
	height: 517px;

	/* background-color: red; */

	color: black;
	padding: 0.5em;
	text-align: left;

	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto 1fr;

	details {
		grid-column: 1 / -1;
		grid-row: 1 / 3;

		display: contents;

		summary {
			grid-row: 1;
		}

		&[open]::details-content {
			grid-column: 1 / -1;
			grid-row: 2;

			/* background: green; */
		}
	}
}

.palette {
	font-family: "DejaVu Sans";

	ul {
		margin: 0;
		padding: 0;
		display: flex;
		flex-flow: row wrap;
		column-gap: 0.2rem;
		row-gap: 0.2rem;
	}

	.placeable {
		flex: initial;
		list-style-type: none;
		padding: 0.2rem;
		background: linear-gradient(to bottom, #c0d1ff 20%, #a08bd5 100%);
		border: solid 1px black;
		box-shadow: inset 0 0 0 1px #40ffcf;
		cursor: pointer;

		&:hover {
			background: linear-gradient(to bottom, #e0f5ff 20%, #b0abe5 100%);
		}

		.contents {
			display: none;
		}
	}
}

.phone {
	position: absolute;
	top: 565px;
	left: 740px;
	width: 74px;
	height: 165px;

	background: red;

	visibility: hidden;
}

.client {
	position: absolute;
	top: 526px;
	left: 6px;
	width: 1012px;
	height: 234px;
	padding: 6px;

	background: pink;

	visibility: hidden;
	opacity: 0.96;

	display: grid;
	grid-template-columns: auto 1fr;
}

.client-photo-box {
	margin: 1rem;

	display: grid;
	place-items: center;
}

.client-photo {
	width: 120px;
	height: 120px;

	background: darkgrey;
}

.client-name {
	font-size: 32px;
}

.client-textbox-box {
	display: grid;
	grid-template-rows: 1fr auto;
}

.client-textbox {
	text-align: left;
}

.client-accept-request {
	background: grey;
	font-size: 20px;
	padding: 6px;

	cursor: pointer;

	opacity: 0;
	visibility: hidden;
}

.client-accept-request.show {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s;
}

.client-accept-request:hover {
	background: lightgrey;
}

.client-text {
	font-size: 24px;
	opacity: 0;
	transition: opacity 0.1s;
}

@font-face {
	src: url("/fonts/DejaVuSans.woff2") format("woff2");
	font-family: "DejaVu Sans";
	font-style: normal;
	font-weight: 400;
	size-adjust: 90%;
}

@font-face {
	src: url("/fonts/DejaVuSans-Oblique.woff2") format("woff2");
	font-family: "DejaVu Sans";
	font-style: oblique;
	font-weight: 400;
	size-adjust: 90%;
}

@font-face {
	src: url("/fonts/DejaVuSans-Bold.woff2") format("woff2");
	font-family: "DejaVu Sans";
	font-style: normal;
	font-weight: 700;
	size-adjust: 90%;
}

@font-face {
	src: url("/fonts/DejaVuSans-BoldOblique.woff2") format("woff2");
	font-family: "DejaVu Sans";
	font-style: oblique;
	font-weight: 700;
	size-adjust: 90%;
}

.font-sans {
	font-family: "DejaVu Sans";
	line-height: 13px;
}

@font-face {
	src: url("/fonts/Gelasio[wght].woff2") format("woff2");
	font-family: "Gelasio";
	font-style: normal;
	font-weight: 400 700;
}

@font-face {
	src: url("/fonts/Gelasio-Italic[wght].woff2") format("woff2");
	font-family: "Gelasio";
	font-style: italic;
	font-weight: 400 700;
}

.font-serif {
	font-family: "Gelasio";
	line-height: 14px;
}