body {
	width: 99%;
	height: 98vh;
	min-width: 800px;
	min-height: 600px;
	font-family: Bubble, "Courier", monospace;
	color: var(--primary-color);
	border-color: var(--primary-color);
	background-color: var(--background-color);
}

a:link, a:visited {
	color: var(--primary-color);
}

a:hover {
	color: var(--highlight-color);
}

a:active {
	color: var(--active-color);
	text-shadow: 1px 1px var(--active-color);
}

button {
	font-size: 18pt;
	min-width: 100px;
	padding: 10px;
	font-family: Bubble;
	border-radius: 6px;
	color: var(--primary-color);
	border: var(--primary-color) ridge 3px;
	background-color: var(--background-color);
}

button:hover {
	color: var(--highlight-color);
	border-color: var(--highlight-color);
}

button:active {
	color: var(--active-color);
	border-color: var(--active-color);
}

button:disabled {
	color: var(--disabled-color);
	border-color: var(--disabled-color);
}

button:focus {
	outline: 0;
}

p {
	margin-bottom: 0;
}

@font-face {
	font-family: Bubble;
	src: url(font/crackdown/crkdwno1.ttf);
}

.uiBox {
	font-size: 18pt;
	border-radius: 15px;
	border: var(--primary-color) 3px ridge;
	padding: 15px;
	z-index: 1;
	background-color: var(--background-color);
}

.inGameBox {
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.arrowButton {
	min-width: 50px;
	width: 50px;
}

.settingCenter {
	width: 100px;
	display: inline-block;
}

.centerText {
	text-align: center;
}

#canvas {
	min-width: 800px;
	min-height: 600px;
	position: absolute;
	border: var(--primary-color) 1px ridge;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}

#title {
	margin: auto;
	width: 60%;
	font-size: 48pt;
	position: absolute;
	text-align: center;
	z-index: 1;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
}

#menu {
	width: 400px;
	position: absolute;
	text-align: center;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#aboutBox {
	font-family: monospace;
	font-size: 12pt;
	width: 720px;
	max-height: 90%;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#closeAboutButton {
	margin: auto;
}