body {
	min-height: 95vh;
}
#pregen {
	height: 100%;
}
header {
	border-bottom: 2px solid black;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 10%;
}
aside {
	width: 10%;
	margin-left: 0;
	padding-left: 0;
	margin-top: 0;
	padding-top: 0;
	float: left;
	border-right: 1px solid black;
	height: 100%;
}
aside ul {
	list-style-type: none;
	padding-left: 0;
}
main {
	margin-left: 30%;
	margin-right: 30%;
	text-align: center;
}
/* modal styles */
#modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

#modal {
	padding: 1rem;
	max-width: 400px;
	width: 100%;
}

/* Prevent interaction with page when modal is open */
body.modal-open {
	overflow: hidden;
}

#incorrect-pass {
	color: red;
	display: none;
}

ul#footer-list li {
	display: inline;
	margin-right: 15px;
}
footer {
	border-top: 2px solid black;
	width: 100%;
	margin: 0;
	padding-bottom: 10px;
	height: 5%;
	text-align: center;
	bottom: 0;
}
#lemon-icon {
	width: 48px;
	height: 48px;
	top: 11px;
	position: relative;
	/* always yellow */
	color: yellow !important;
}
#container {
	width: 100%;
	height: 100vh;
}
.sideways-list {
	display: inline-block;
}
.vertical-list {
	margin: 0;
	padding-left: 0;
	justify-content: center;
	list-style-type: none;
	/* allow content to expand and wrap instead of overflowing */
	width: auto;
	height: auto;
	max-width: 100%;
	word-break: break-word;
}
.sideways-list > button {
	width: 128px;
	height: 128px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	box-sizing: border-box;
	border: 1px solid #333;
	background: transparent;
	cursor: pointer;
	/* button text inherits page color; icons will be colored separately */
	color: inherit !important;
	transition: color 0.12s ease-in-out;
}

/* Square button with icon on top and text on bottom */
main > .sideways-list > button {
	width: 96px;
	height: 96px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	box-sizing: border-box;
	border: 1px solid #333;
	background: transparent;
	cursor: pointer;
	/* button text inherits page color; icons will be colored separately */
	color: inherit !important;
	transition: color 0.12s ease-in-out;
}

.sideways-list > button .vertical-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
.sideways-list > button .vertical-list img {
	/* explicit size so image cannot collapse to 0x0 */
	height: 80px;
	width: auto;
	display: block;
	/* force SVGs loaded via <img> to use currentColor from the IMG element */
	/* fallback for non-currentColor SVGs - prefer editing the SVG instead */
	filter: none;
}
main > .sideways-list > button .vertical-list img {
	/* explicit size so image cannot collapse to 0x0 */
	height: 40px;
	width: auto;
	display: block;
	/* force SVGs loaded via <img> to use currentColor from the IMG element */
	/* fallback for non-currentColor SVGs - prefer editing the SVG instead */
	filter: none;
}

.sideways-list > button .vertical-list li {
	display: block;
	text-align: center;
	font-size: 0.9rem;
	/* ensure longer names wrap onto multiple lines */
	white-space: normal;
	word-break: break-word;
}

/* Fix layout and visibility for icon buttons */
.sideways-list {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Make the button row in the main area a flex row so items align uniformly */
main > ul {
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	padding-left: 0;
	list-style: none;
	margin: 0;
}

/* Use color on the button to control SVG color (info.svg uses currentColor) */
/* Make selector specific so it overrides library rules loaded after our stylesheet 
main > ul > li.sideways-list > button,
.sideways-list > button {
	color: #333; /* light-mode icon/text color 
}
*/

.btn-icon {
	margin-left: 4px;
	height: 40px;
	width: 40px;
}

/* Make changelog, games and apps dialog content scrollable and keep header/footer fixed.
   Use !important because OAT's dialog stylesheet may be loaded after ours. */

dialog#changelog,
dialog#games,
dialog#apps {
	max-width: 900px !important;
	width: min(95%, 900px) !important;
}

dialog#changelog form,
dialog#games form,
dialog#apps form {
	display: flex !important;
	flex-direction: column !important;
	max-height: 88vh !important;
	overflow: hidden !important;
	padding: 0 !important;
}

/* the long content area inside the dialog — becomes scrollable */
dialog#changelog form > div,
dialog#games form > div,
dialog#apps form > div {
	flex: 1 1 auto !important;
	min-height: 0 !important; /* allow flex child to shrink for scrolling */
	overflow: auto !important;
	max-height: calc(88vh - 6rem) !important;
	padding: 1rem !important;
	-webkit-overflow-scrolling: touch !important;
}

dialog#changelog footer,
dialog#games footer,
dialog#apps footer {
	flex: 0 0 auto !important;
	padding: 0.75rem 1rem !important;
}