:root {
	--sz: 3vh;
}
html {
	margin: 0;
	padding: 0;
	min-height: 100%;
}
body {
	margin: 0;
	padding: 5vh;
    font-family: sans-serif;
	background: linear-gradient(to bottom right, #4b9edb, #3bd2da);
	font-size: var(--sz);
}
body.dark {
	background: linear-gradient(to bottom right, #285b80, #1d777c);
}

div { margin: 0; padding: 0 }

.hidden { visibility: hidden; }

.app {
	position: relative;
	box-sizing: border-box;
	background: #e6e7f1;
	border-radius: 1em;
	max-width: 90vh;
	min-height: 90vh;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.dark .app { background: #1d1d1d; }

.window-header {
	display: flex;
	flex: 0;
	justify-content: space-between;
}
.window-header img {
	padding: 1ex 1em;
	height: calc(0.7 * var(--sz));
}
#dots {
	margin: 1ex 1em;
	height: calc(0.7*var(--sz));
	width: calc(1.56*var(--sz));
	background-image: url("img/dark-dots.png");
	background-size: contain;
	background-repeat: no-repeat;
	font-family: inherit;
	font-size: unset;
	background-color: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
}
.dark #dots { background-image: url("img/dots.png"); }

.alert .camera { display: none; }
.camera {
	box-sizing: border-box;
	padding: 0 1em;
	width: 100%;
	flex: 0;
}
.camera > div {
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 2/1;
	background-image: url("img/background.png");
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
.camera img {
	transition: all 0.5s ease-in-out;
}

.chat-box {
	flex: 1;
	min-height: 25%;
	background: #c6c9df;
	color: #1d2767;
	margin: 1ex 1em;
	border-radius: 2em;
	padding: 1em 1.5em;
}
.menu .chat-box { border: thin solid black; }
.title .chat-box { text-align: center;}
.dark .menu .chat-box { border: thin solid white; }
.alert .chat-box { flex: 0; text-align: center; }
.dark .chat-box {
	background: #35374f;
	color: #dde1fd;
}
.chat > p:first-child { margin: 0; }
.chat > p { margin-bottom: 0; }
.continue { border: none; animation: alternate 1s infinite pulse ease-in-out; }
.dark a { color: #9da5d4; }
.indented { padding-left: 3em; }
.center { text-align: center; }
button, input[type="file"] {
	font-family: inherit;
	font-size: unset;
	background-color: transparent;
	color: inherit;
	border-radius: 0.5ex;
	margin: 0.5ex;
	cursor: pointer;
}

@keyframes pulse {
	from { transform: translateX(0); }
	to { transform: translateX(-0.75ex); }
}

.buttons {
	display: flex;
	justify-content: center;
	padding-bottom: 1ex;
}
.buttons button {
	height: calc(2*var(--sz));
	margin: 0.75ex;
	border: none;
	padding: 0;
	font-family: inherit;
	background-color: transparent;
	font-size: unset;
}
button img { height: 100%; }

.menu { display: none; }
.menu.show {
	display: block;
	position: absolute;
	top: 1.5em;
	left: 1ex;
	bottom: 1ex;
	right: 1ex;
	overflow-y: scroll;
	background: #c6c9df;
	color: #1d2767;
	padding: 1ex;
}
.dark .menu.show {
	background: #35374f;
	color: #dde1fd;
}
.menu button.close { float: right; }
.menu.dialog.show {
	top: 50%;
	left: 50%;
	bottom: unset;
	right: unset;
	transform: translate(-50%, -50%);
	min-width: 90%;
	margin: 0;
	padding: 0;
	border: none;
	overflow-y: unset;
	background: unset;
}
.chat-history {
	clear: both;
	display: grid;
	grid-template-columns: auto 1fr;
}
.chat-history .char-name {
	text-align: end;
	padding-right: 1em;
}
.center {
	text-align: center;
}