:root {
	/* Pikachu Volleyball's original width: 432px, original height: 304px */
	--aspect-ratio: calc(432 / 304);
	--inverse-aspect-ratio: calc(304 / 432);
	--canvas-width: 96vmin;
	--canvas-height: calc(96vmin * var(--inverse-aspect-ratio));
	--font-size: 18px;
	--btn-width: calc(5 * var(--font-size));
	--btn-height: calc(3 * var(--font-size));
}

/* size of iPad screen is 768px x 1024px in portrait mode */
@media only screen and (min-width: 768px) and (min-height: 768px) {
	:root {
		--font-size: 22px;
		--btn-width: calc(6 * var(--font-size));
	}
}

@media only screen and (min-aspect-ratio: 432/304) {
	:root {
		--canvas-height: calc(96vh - var(--btn-height) - 10px);
		--canvas-width: calc(var(--canvas-height) * var(--aspect-ratio));
	}
}

@media only screen and (max-aspect-ratio: 432/304) {
	:root {
		--canvas-width: 96vw;
		--canvas-height: calc(96vw * var(--inverse-aspect-ratio));
	}
}

html {
	box-sizing: border-box;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #000;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

* {
	font-family: Arial, Helvetica, sans-serif;
}

#flex-container {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	/*justify-content: center;*/
	align-items: stretch;
	width: var(--canvas-width);
	height: 100vh;
	margin-left: auto;
	margin-right: auto;
}

#menu-bar {
	display: none;
	/*display: grid;*/
	width: var(--canvas-width);
	height: var(--btn-height);
	grid-template-columns: 2fr 1fr;
	margin-bottom: 10px;
}

.btn-container {
	display: flex;
	align-items: center;
}

.btn-container.left {
	grid-column-start: 1;
	justify-content: flex-start;
}

.btn-container.right {
	grid-column-start: 2;
	justify-content: flex-end;
}

.btn {
	display: inline-block;
	grid-row-start: 1;
	width: var(--btn-width);
	height: var(--btn-height);
	border: none;
	border-radius: 10px;
	padding: 0;
	color: white;
	background-color: rgba(50, 50, 50, 1);
	font-size: var(--font-size);
	text-align: center;
	text-decoration: none;
	margin-left: 5px;
	margin-right: 5px;
}

#game-dropdown-btn {
	margin-left: 0;
}

#about-btn {
	margin-right: 0;
}

.relative-container {
	position: relative;
}

.dropdown,
.submenu {
	position: absolute;
	display: none;
	z-index: 1;
}

.dropdown.show {
	display: block;
}

.submenu.show {
	display: inline-block;
}

.dropdown .btn {
	margin-right: 0;
	background-color: rgba(100, 100, 100, 0.9);
}

.submenu > .btn {
	width: calc(1.4 * var(--btn-width));
	margin-left: 0;
}

.dropdown .btn:hover,
.submenu-btn.open {
	background-color: rgba(50, 50, 50, 0.9);
}

span.check {
	display: none;
}

.selected > span.check {
	display: inline;
}

#game-canvas-container {
	position: relative;
}

#game-canvas {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: var(--canvas-width);
	height: var(--canvas-height);
}

.fade-in-box {
	position: absolute;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	top: 0;
	left: 0;
	width: var(--canvas-width);
	height: var(--canvas-height);
	font-size: var(--font-size);
	padding-left: var(--font-size);
	padding-right: var(--font-size);
	text-align: center;
	z-index: 10;
	visibility: visible;
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.8);
	animation-name: fade-in;
	animation-duration: 1s;
}

.fade-in-box.about {
	justify-content: flex-start;
	height: auto;
	overflow: visible;
	text-align: left;
}

.fade-in-box.loading {
	background-color: transparent;
	color: white;
	animation-duration: 0.5s;
}

.fade-in-box.update {
	background-color: rgba(226, 230, 36, 0.85);
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fade-in-box.hidden,
#menu-bar.hidden {
	display: none;
}

#about-box {
	display: none;
}

#about-box-head {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	font-size: var(--font-size);
	text-align: center;
	visibility: visible;
	overflow: visible;
}

button.btn-in-box {
	display: block;
	height: calc(2 * var(--font-size));
	width: calc(5 * var(--font-size));
	border: none;
	margin: 0 auto;
	padding: 0;
	background-color: rgb(50, 50, 50);
	color: white;
	font-size: var(--font-size);
	text-align: center;
	text-decoration: none;
	border-radius: 10px;
}

h1 {
	font-size: calc(1.5 * var(--font-size));
}

p.languages,
p.p2p-online-version,
p.original-by,
p.reverse-engineered-by,
p.source-code-on,
p.release-date,
p.game-last-updated,
p.page-last-updated {
	font-size: 0.8em;
	line-height: 150%;
}

p.release-date {
	margin-block-end: 0;
}

p.game-last-updated,
p.page-last-updated {
	margin-block-start: 0;
	margin-block-end: 0;
}

span.no-wrap {
	white-space: nowrap;
}

span.thick {
	font-weight: 900;
}

div.align-center-horizontally {
	display: flex;
	flex-direction: column;
	align-items: center;
}

img.screenshot,
img.controls {
	width: 100%;
}

img.screenshot {
	max-width: 864px;
}

img.controls {
	max-width: 960px;
}

#progress-bar-border {
	position: relative;
	border: solid;
	border-color: white;
	height: var(--btn-height);
	width: calc(var(--canvas-width) / 2);
}

#progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	/*width: width is set on style property of progress-bar element;*/
	height: 100%;
	background-color: white;
}

button.update {
	display: inline-block;
	height: calc(3 * var(--font-size));
	width: 100%;
	border: none;
	margin: 2px;
	padding: 0;
	background-color: white;
	color: black;
	font-size: var(--font-size);
	text-align: center;
	text-decoration: none;
	border-radius: 10px;
}

@media (hover: hover) {
	button.update {
		opacity: 0.9;
	}

	button.update:hover {
		opacity: 1;
	}
}

button:disabled {
	background-color: #cccccc;
}

div.for-margin {
	display: block;
	height: 50vh;
}

div.margin-top,
p.margin-top {
	margin-top: calc(2.25 * var(--font-size));
}