style.css

:root {
	--sz: 3vh;
	--screen-bg: linear-gradient(to top right, floralwhite, goldenrod);
	--app-bg: #khaki;
	--text: darkgoldenrod;
	--text-bg: oldlace;
	--chat-box-border: thin solid black;
	--link: saddlebrown;
}
.dark {
	--screen-bg: linear-gradient(to bottom right, silver, chocolate);
	--app-bg: #khaki;
	--text: whitesmoke;
	--text-bg: darkslategray;
	--chat-box-border: thin solid white;
	--link: papayawhip;
}
.camera > div {
	background-image: url("img/ceremony.png");
	aspect-ratio: 8/7;
}


html {
	margin: 0;
	padding: 0;
	min-height: 100%;
}
body {
	margin: 0;
	padding: 5vh;
  font-family: monospace;
	background: var(--screen-bg);
	font-size: 1.2em;
}

div { margin: 0; padding: 0 }

.hidden { visibility: hidden; }

.app {
	position: relative;
	box-sizing: border-box;
	background: var(--app-bg);
	border-radius: 0.3em;
	max-width: 90vh;
	min-height: 90vh;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.alert .camera { display: none; }
.camera {
	box-sizing: border-box;
	padding: 1em 1em 0 1em;
	width: 100%;
	flex: 0;
}
.camera > div {
	box-sizing: border-box;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
.camera img {
	transition: all 1.5s ease;
}
.camera:hover img {
    transform: scale(1.1);
}

.chat-box {
	flex: 1;
	min-height: 20%;
	background: var(--text-bg);
	color: var(--text);
	margin: 1ex 1em;
	border-radius: 0.3em;
	padding: 0.5em 0.5em;
}
.menu .chat-box { border: var(--chat-box-border); }
.alert .chat-box { flex: 0; text-align: center; }
.chat > p:first-child { margin: 0; }
.chat > p { margin-bottom: 0; }
.continue { border: none; animation: alternate 3s infinite pulse ease-in-out; }
a { 
color: var(--link);
text-decoration: none;
 }
.indented { padding-left: 3em; }
.center { text-align: center; }
button, input[type="file"] {
	font-family: inherit;
	font-size: unset;
	background-color: inherit;
	color: inherit;
	border-radius: 0.3ex;
	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: inherit;
	font-size: unset;
}
button img { height: 100%; }

.menu { display: none; }
.menu.show {
	display: block;
	position: absolute;
	top: 1em;
	left: 1ex;
	bottom: 1ex;
	right: 1ex;
	overflow-y: scroll;
	background: var(--text-bg);
	color: var(--text);
	padding: 1ex;
}
.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: 0.5em;
}
.chat-history p { margin: 0.5ex; }


.door-knocking {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  animation: knock 0.5s infinite alternate;
}

@keyframes knock {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}


.glowing-text {
  text-shadow: 0 0 10px white;
  animation: glow 1s infinite alternate;
}

@keyframes glow {
  0% { text-shadow: 0 0 10px white; }
  100% { text-shadow: 0 0 20px white; }
}