h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

span[data-state] {
	overflow-wrap: break-word;
}

.audio {
	cursor: pointer;
	font-size: 2em;
}

body {
	display: grid;
	margin: 0;
	width: 100vw;
	height: 100vh;
	background: url("assets/wall.jpg");
	background: url("assets/wall.webp");
	background-color: #fdafda;
	grid-template-columns: 0.8fr 1.4fr 0.8fr;
	grid-template-rows: 0.2fr 2fr 0.8fr;
	gap: 0;
	grid-auto-flow: row;
	grid-template-areas: "header header header"". main aside""journal main aside";
	font-family: -apple-system, BlinkMacSystemFont, Roboto, Open Sans, Helvetica Neue, 'Noto Sans Armenian', 'Noto Sans Bengali', 'Noto Sans Cherokee', 'Noto Sans Devanagari', 'Noto Sans Ethiopic', 'Noto Sans Georgian', 'Noto Sans Hebrew', 'Noto Sans Kannada', 'Noto Sans Khmer', 'Noto Sans Lao', 'Noto Sans Osmanya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Thai', sans-serif;
}

header, footer, main #splash[data-show="true"] {
	z-index: 2;
}

header {
	display: flex;
	color: #ffffff;
	background: #bf5f82;
	grid-area: header;
	justify-content: space-evenly;
	align-items: center;
	font-family: monospace;
	font-size: large;
	padding: .5em;
}

header h2 {
	margin: 0;
}

header span {
	color: #000000;
}

footer {
	background: #000a;
	color: white;
}

aside {
	grid-area: aside;
	overflow-y: scroll;
	color: #fafafa;
	background: #263238;
	padding: 1em;
	border-left: 1px solid #000a12;
}

aside a {
	color: #00bcd4;
}

#upgrades {
	padding: 0;
}

#upgrades>li {
	display: block;
	padding: 0.5em 1em;
	margin: .1em 0;
	background: #3e2723;
	border: 1px solid #6a4f4b;
}

#upgrades>li>span {
	float: right;
	font-size: 1.25em;
}

#upgrades>li>button {
	border: none;
	padding: .1em .3em;
	margin: 0 .5em;
}

main {
	grid-area: main;
	overflow: hidden;
}

main img {
	position: fixed;
	left: 50%;
	bottom: 0;
	transition: transform ease-out .2s;
	transform: translateX(calc((var(--offset) * 98%) - 50%)) scale(var(--scale, 1)) translateY(calc((1 - var(--scale, 1)) * 100%));
	width: 480px;
	height: auto;
	user-select: none;
}

main #head img {
	z-index: 1;
}

main #combo {
	position: absolute;
	display: inline-block;
	bottom: 0;
	margin: 0;
	padding: .2em .5em;
	font-size: 1.5em;
	color: #fff;
	background: #000a;
}

main #splash {
	position: relative;
	color: #fff;
	text-align: center;
	margin: 0;
	padding: .5em 0;
	top: 45%;
	width: calc(100% + 1px);
	transition: transform 1s ease-in-out;
	transform: translateX(100%);
	background: linear-gradient(90deg, transparent, black);
}

main #splash[data-show="true"] {
	transform: translateX(0);
}

footer {
	grid-area: journal;
	display: flex;
	flex-direction: column;
}

article>h3, footer>h3 {
	margin: .2em .5em;
}

footer>textarea {
	flex: 1;
	background: #4f5b62;
	border: 1px solid #000a12;
	color: white;
	cursor: context-menu;
	cursor: pointer;
}

@media (max-width: 500px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 3fr 0.8fr;
    grid-template-areas: "header""main""journal";
  }
	main #combo {
		top: 6vh;
		bottom: initial !important;
	}
	aside {
		position: absolute;
		top: 100vh;
		width: calc(100vw - 2em);
		overflow-y: visible;
		border: none;
		z-index: 2;
	}
}