:root {
	-ms-overflow-style: none;
	scrollbar-width: none;
	background-color: #19191E;
}

body {
	font-family: sans-serif;
	color: white;
	background-size: 100vw 100vh;
	font-size: 1em;
	margin: 0px;
}

a {
	color: #438CF2;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.segment-maintitle {
	font-size: 3em;
	text-align: center;
}

.games-container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	gap: 30px;
	padding: 20px;
}

.gamebox {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	padding: 8px;
	border: 1px solid gray;
	border-radius: 5px;
	width: 280px;
}

.gamebox-logocontainer {
	aspect-ratio: 1 / 1;
	margin-bottom: 8px;
}

.gamebox-logo {
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.gamebox-title {
	text-align: center;
}

.game-logo {
	max-height: 180px;
	max-width: 350px;
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 99;
}

.info-loading {
	text-align: center;
}

#characterselect {
	position: relative;
	width: auto;
	margin: auto;
	text-align: center;
	padding: 28px;
}

.preview-area {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 0px;
}

.portrait-area, .description-area, .p2-area {
	z-index: 100;
	flex: 0px 1 0;
	overflow: visible;
}

.description-bg {
	position: absolute;
	top: 0px;
	left: 0px;
	min-width: 100vw;
	min-height: 100vh;
	background-color: rgba(0,0,0,0.5);
	z-index: 500;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.4s linear;
}

.description-bg .description-area {
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    transform: translateY(-50%);
    width: fit-content;
    min-width: 70%;
    padding: 16px;
    margin: auto;
}

.description-bg .description-area .info-title {
	margin-top: 0px;
}

.info-title, .info-subtitle {
	text-align: center;
}

#info-name {
	position: relative;
}

.info-table {
	border-collapse: collapse;
	width: 100%;
}

.info-table td, .info-table th {
	vertical-align: top;
	padding: 6px;
	border: solid white 1px;
	width: 50%;
	height: fit-content;
}

.info-table th {
	text-align: center;
	vertical-align: middle;
	font-size: 1em;
}

.info-table td {
	text-align: center;
	font-size: 0.9em;
}

#info-image {
	display: block;
	max-width: 100%;
	max-height: 400px;
	margin: 0px auto 12px;
}

.color-options {
	display: flex;
	flex-flow: row;
	margin: 8px 0px;
}

.color-button {
	font-family: inherit;
	font-weight: bold;
	cursor: pointer;
}

#color-selector {
	display: flex;
	align-items: center;
	flex: 1 0;
	text-align: center;
	font-size: 1.3em;
	font-weight: bold;
	text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

#color-selector-text {
	width: 100%;
}

#overview-difficulty {
	font-size: 1.1em;
}

.info-description {
	text-align: left;
}

.list-likedislike {
	padding-left: 20px;
	margin: 6px 0px;
}

.description-exit {
	cursor: pointer;
	font-family: inherit;
	font-size: 1.2em;
	display: block;
	margin: 8px auto 0px;
}

.selectbox-container {
	width: fit-content;
	position: relative;
	z-index: 101;
}

.selectbox-container a {
	display: block;
}

.selectbox-container img {
	user-select: none;
}

div.selectbox-positioner {
	pointer-events: none;
	position: relative;
	width: 0px;
	height: 0px;
}

.selectbox-character, area {
	cursor: pointer;
}

.selectbox-character img {
	display: block;
}

.selectbox-row {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	max-width: 100%;
}

.selectbox-fullroster {
	display: block;
}

.preload-container {
	font-size: 0;
	position: absolute;
	top: 0px;
	display: flex;
	height: 20px;
	transform: translate(0, -20px);
}

.preload-container img {
	height: 20px;
}

#returnbutton {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 5px;
	z-index: 1000;
	font-family: inherit;
	font-size: 1.2em;
	cursor: pointer;
}

/* Stat Graph */

#stat-graph-background {
	background-image: url("../img/misc/RadarBG.png");
	background-size: 100% 100%;
	width: 70%;
	max-width: 250px;
	aspect-ratio: 1 / 1;
	margin: 0px auto 10px;
}

#stat-graph-values {
	background-color: rgba(255, 106, 0, 0.8);
	width: 100%;
	height: 100%;
	margin: auto;
	transition: clip-path 0.6s ease-out;
	clip-path: polygon(
		50% 55.5%,
		50% 55.5%,
		50% 55.5%,
		50% 55.5%,
		50% 55.5%
	);
	/* 
		STATS:
		top:
			0: 50% 55.5%
			1: 50% 44.4%
			2: 50% 33.3%
			3: 50% 22.2%
			4: 50% 11.1%
			5: 50% 0%
		right:
			0: 50% 55.5%
			1: 59.86% 52.06%
			2: 69.72% 48.62%
			3: 79.58% 45.18%
			4: 89.44% 41.74%
			5: 99.3% 38.3%
		bottom right:
			0: 50% 55.5%
			1: 56.132% 64.26%
			2: 62.264% 73.02%
			3: 68.396% 81.78%
			4: 74.528% 90.54%
			5: 80.66% 99.3%
		bottom left:
			0: 50% 55.5%
			1: 43.866% 64.26%
			2: 37.732% 73.02%
			3: 31.598% 81.78%
			4: 25.464% 90.54%
			5: 19.33% 99.3%
		left:
			0: 50% 55.5%
			1: 40.14% 52.06%
			2: 30.28% 48.62%
			3: 20.42% 45.18%
			4: 10.56% 41.74%
			5: 0.7% 38.3%
	*/
}

/* Fonts */

@font-face {
	font-family: "DF POP Corn W12";
	src: url("../fonts/DFPPOPCorn-W12.ttf");
}

@font-face {
	font-family: "Selznick Remix NF";
	src: url("../fonts/SelznickRemixNf-Dd3D.ttf");
}

@font-face {
	font-family: "Geo";
	src: url("../fonts/Geo-Regular.ttf");
}

@font-face {
	font-family: "STD Heavy";
	src: url("../fonts/A-OTF 光朝 Std-Heavy.otf");
}

@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/NotoSans-Regular.ttf");
}

@font-face {
	font-family: "Proba Pro";
	src: url("../fonts/ProbaPro-Regular.otf");
}

@font-face {
	font-family: "DBZ 0";
	src: url("../fonts/DBZ_0_Default.otf");
}

@font-face {
	font-family: "Noto Serif JP";
	src: url("../fonts/NotoSerifJP-Regular.otf");
}

@font-face {
	font-family: "Doodlian";
	src: url("../fonts/Doodlian-Regular.ttf");
}

@font-face {
	font-family: "Noto Sans JP";
	src: url("../fonts/NotoSansJP-Regular.otf");
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-VariableFont.ttf");
}

@font-face {
	font-family: "City Brawlers";
	src: url("../fonts/CityBrawlersBoldCaps.otf");
}

@font-face {
	font-family: "Strive Impact";
	src: url("../fonts/Impact - Strive.otf");
}

@font-face {
	font-family: "VCR Mono";
	src: url("../fonts/VCR_OSD_MONO_1.001.ttf");
}

@font-face {
	font-family: "Mah Sans";
	src: url("../fonts/MAHSANS.ttf");
}