* {
	box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

:root {
	--neongreen: #40F5AF;
	--neonpurple: #E757F5;
	--neonyellow: #F5DB71;
	--neonblue: #4C51F5;
	--neonred: #FC8168;
	--excursion: linear-gradient(90deg, #4C51F5, #FC8168);
	--ice: linear-gradient(90deg, #4C51F5, #40F5AF);
	--lime: linear-gradient(90deg, #F5DB71, #40F5AF);
	--py: linear-gradient(90deg, #E757F5, #F5DB71);
	--sun: linear-gradient(90deg, #FC8168, #F5DB71);
	--warm: linear-gradient(90deg, #E757F5, #FC8168);
	--g1: #030303;
	--g2: #060606;
	--g3: #090909;
	--g4: #121212;
	--g5: #151515;
	--g6: #181818;
	--g7: #212121;
	--g8: #242424;
	--g9: #272727;
	--g10: #808080;
	--transBackColor: background-color 0.5s;
	--transColor: color 0.5s;
}

@font-face {
	font-family: 'chakraPetch';
	src: url(../fonts/ChakraPetch/ChakraPetch-Light.ttf);
}

@font-face {
	font-family: 'urbanist';
	src: url(../fonts/Urbanist/Urbanist-Light.ttf);
}

body {
	background-color: var(--g2);
}

body, .card {
	margin: 0px;
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
	scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar, main::-webkit-scrollbar, .sideBar::-webkit-scrollbar, .chat::-webkit-scrollbar, .card::-webkit-scrollbar, select::-webkit-scrollbar, .sideBarSub::-webkit-scrollbar { 
	display: none;  /* Safari and Chrome */
}

h1, h2, h3, h4, h5, h6, a {
	font-family: chakraPetch;
	margin: 8px;
	font-weight:normal;
	line-height: 150%;
	color: var(--g10);
}

p, span, label, li {
	font-family: urbanist;
	margin: 8px;
	line-height: 150%;
}

span {
	color: var(--g10);
}

h1 {font-size: 4em;}
h2 {font-size: 3em;}
h3 {font-size: 2.5em;}
h4 {font-size: 2em;}
h5 {font-size: 1.5em;}
h6 {font-size: 1em;}
span {font-size: 0.8em;}

a {
	color: var(--neonyellow);
	text-decoration: none;
	margin-top: 0px;
	margin-bottom: 0px;
}

a:hover {
	text-decoration: none;
	background-color: var(--neongreen);
	color: var(--g1);
	transition: var(--transBackColor), var(--transColor);
}

@media only screen and (max-width: 900px) {
	h1 {font-size: 2em;}
	h2 {font-size: 1.8em;}
	h3 {font-size: 1.5em;}
	h4 {font-size: 1.2em;}
	h5 {font-size: 1em;}
}

mark {
	background-color: rgba(12, 12, 12, .85);
	color: var(--g10);
}

input, textarea, select {
	background-color: var(--g1);
	color: var(--g10);
	font-family: chakraPetch;
	border: 1px solid var(--g10);
	width: 100%;
	padding: 0px;
	margin-bottom:4px;
	margin-top:4px;
	font-size: 1em;
	padding-left: 8px;
	padding-right: 8px;
	border-radius: 8px;
}

option:hover {
	background-color: var(--g10);
	color: var(--g1);
}

textarea {
	height: 64px;
}

input::file-selector-button {
	-webkit-appearance: none;
	color: var(--g8);
	background-color: var(--g2);
	font-family: chakraPetch;
	margin-right: 8px;
	border: none;
}

input[type="range"] {
	-webkit-appearance: none;
	height: 2px;
	border: none;
	background-color: var(--neongreen);
	background-size: 70% 100%;
	background-repeat: no-repeat;
}
	
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 16px;
	width: 4px;
	background: var(--g10);
	cursor: ew-resize;
	transition: background .3s ease-in-out;
}
	
input[type=range]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	box-shadow: none;
	border: none;
	background: transparent;
}

input[type="color"] {-webkit-appearance: none;}
input[type="color"]::-webkit-color-swatch {border: none;}
input[type="color"]::-webkit-color-swatch-wrapper {padding: 0px;}

header, nav, .sideBar, main, .explorer {
	position: fixed;
}

header {
	top: 0px;
	left: 0px;
	right: 0px;
	background: var(--lime);
	padding-left: 8px;
	padding-right: 8px;
	display: flex;
	h6 {color: var(--g2);}
}

nav {
	top: 40px;
	left: 0px;
	height: 24px;
	right: 0px;
	padding-left: 8px;
	padding-right: 8px;
	background: var(--g8);
}

main {
	top: 64px;
	padding: 8px;
	bottom: 24px;
	right: 0px;
	left: 0px;
	background-color: var(--g1);
	color: white;
	overflow-y: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.main_bottom {
	position: fixed;
	bottom: 24px;
	right: 0px;
	left: 220px;
	padding: 8px;
	background-color: var(--g9);
}

.sideBar {
	padding: 8px;
	width: 220px;
	top: 64px;
	left: 0px;
	bottom: 24px;
	background-color: var(--g3);
	color: var(--g10);
	display: inline;
	overflow-y: auto;
}

.sideBarBottom {
	position: absolute;
	bottom: 0px;
	left: 8px;
	right: 8px;
	margin: 4px auto;
}

.sideBarSub {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 97px;
	top: 40px;
	overflow-y: auto;
}

@keyframes slide_animation {
	0% {transform: translate3d(0, 0, 0);}
	100% {transform: translate3d(-50%, 0, 0);}
}

.slideBanner {
	display: flex;
	width: 6000px;
	justify-content: space-around;
	background-color: var(--g5);
	animation: slide_animation 35s linear infinite;
	* {
		color: var(--neongreen);
		margin: 0px;
	}
}

.explorer {
	position: fixed;
	background: var(--warm);
	bottom: 0px;
	right: 0px;
	left: 0px;
	height: 24px;
	padding-left: 8px;
	padding-right: 8px;
	text-align: right;
}

.explorer a {
	color: var(--g2);
}

.burgerMenu {
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(12, 12, 12, .85);
	z-index: 1;
	visibility: hidden;
	color: var(--g10);
	backdrop-filter: blur(16px);
}

.burgerMenu:target {
	visibility: visible;
}

footer {
	margin-top: 32px;
	width: 100%;
	background: var(--ice);
	border-radius: 8px;
}

footer a {color: white;}
footer p {color: white;}
footer li {color: white;}
footer a:hover {color: purple;}

@media only screen and (max-width: 950px) {
	main, nav, .explorer, .main_bottom {left: 0px;}
	.sideBar {display: none;}
	.explorer {text-align: unset;}
}

button {
	font-family: chakraPetch;
	font-size: 1em;
	padding: 8px;
	width: 100%;
	border-radius: 8px;
	transition: var(--transBackColor), var(--transColor);
}

button.default {
	background-color: var(--g1);
	border: 1px solid var(--g10);
	color: var(--g10);
}

button.default:hover {
	background-color: var(--g10);
	color: var(--g1);
}

button.success {
	background-color: var(--g1);
	border: 1px solid var(--neongreen);
	color: var(--neongreen);
	
}

button.success:hover {
	background-color: var(--neongreen);
	color: var(--g1);
}

button.warning {
	background-color: var(--g1);
	border: 1px solid var(--neonyellow);
	color: var(--neonyellow);
}

button.warning:hover {
	background-color: var(--neonyellow);
	color: var(--g1);
}

button.danger {
	background-color: var(--g1);
	border: 1px solid red;
	color: var(--neonyellow);
}

button.danger:hover {
	background-color: red;
	color: var(--g1);
}

button.info {
	background-color: var(--g1);
	border: 1px solid lightskyblue;
	color: lightskyblue;
}

button.info:hover {
	background-color: lightskyblue;
	color: var(--g1);
}

button.link {
	background-color: var(--g1);
	border: 1px solid var(--g10);
	color: lightskyblue;
}

button.action {
	background-color: var(--g3);
	border: 1px solid var(--g9);
	color: var(--g10);
}

button.link:hover {
	background-color: lightskyblue;
	border: 1px solid var(--g1);
	color: var(--g1);
}

table {
	table-layout: fixed;
	width: 100%;
	line-height: 150%;
	font-family: urbanist;
}

th {
	text-align: left;
	color: white;
	/* background: var(--sun); */
	padding-left: 8px;
	padding-right: 8px;
}

td {
	/* color: var(--neonyellow); */
	/* border: 1px solid var(--g5); */
	padding-left: 8px;
	padding-right: 8px;
}

ul {
	list-style-type: "> ";
	margin: 16px;
	padding: 0px;
}

.card {
	position: relative;
	width: 100%;
	background-color: var(--g5);
	padding: 8px;
	border-radius: 17px;
	transition: var(--transBackColor), var(--transColor);
	max-height: 512px;
	overflow: auto;
	label, li, p {
		color: var(--g10)
	}
}

.card:hover {
	background-color: var(--g6);
}

.row {
	display: flex;
	flex-wrap: wrap;
}

@media only screen and (max-width: 600px) {
	.row {display: block;}
}

.col2, .col3, .col4, .col6, .col8, .col12 {
	padding: 8px;
}

.col12 {width: 100%;}
.col8 {width: 66.66%;}
.col6 {width: 50%;}
.col4 {width: 33.33%;}
.col3 {width: 25%;}
.col2 {width: 20%;}

@media only screen and (max-width: 800px) {
	.col2, .col3, .col4, .col6, .col8, .col12 {width: 100%;}
}

.divider {
	width: 100%;
	background: var(--ice);
	height: 1px;
	margin-top: 16px;
	margin-bottom: 16px;
}

.spacer {
	height: 64px;
}

.picLarge, .picMedium, .picSmall {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: var(--g4);
	border-radius: 8px;
}

.picLarge {aspect-ratio: 1/1;}
.picMedium {aspect-ratio: 4/3;}
.picSmall {aspect-ratio: 16/9;}

.centralLarge, .centralMedium {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: auto;
	max-width: 100%;
}

.centralLarge {
	width: 512px;
}

.centralMedium {
	width: 256px;
}

.labdl, .labdr, .labul, .labur {
	position: absolute;
	background-color: var(--g10);
	color: var(--g1);
	margin: 8px auto;
}

.labdl {bottom: 0px; left: 0px;}
.labdr {bottom: 0px; right: 0px;}
.labul {top: 0px; left: 0px;}
.labur {top: 0px; right: 0px;}

.chat {
	position: absolute;
	overflow: auto;
	top: 110px;
	right: 8px;
	left: 8px;
	bottom: 48px;
}

.chatInput {
	background-color: var(--neongreen);
	position: fixed;
	right: 80px;
	left: 228px;
	bottom: 28px;
	height: 25px;
}
.chatHeader {
	background-color: var(--g6);
	position: fixed;
	top: 56px;
	left: 220px;
	right: 0px;
}
.chatView {
	overflow-y: auto;
	background-color: var(--g2);
	position: fixed;
	top: 91px;
	bottom: 61px;
	left: 220px;
	right: 0px;
}
@media only screen and (max-width: 950px) {
	.chatInput, .chatHeader, .chatView {left: 0px;}
}
.chatView {
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
	scrollbar-width: none;  /* Firefox */
}
.chatView::-webkit-scrollbar, main::-webkit-scrollbar, .sideBar::-webkit-scrollbar, .chat::-webkit-scrollbar { 
	display: none;  /* Safari and Chrome */
}

.message, .chatAnswer {
	margin: 16px auto;
}

.chatAnswer {
	/* float: right; */
	text-align: right;
	color: var(--neongreen);
}

@media only screen and (max-width: 600px) {
	.chatAnswer, .message {max-width: 100%;}
}

.searchBox {
	position: relative;
	display: flex;
	padding: 8px;
}

.gameDashboard, .field, .p1, .p2, .ball {
	background-color: var(--g6);
	border: solid 1px;
	border-color: var(--neongreen);
}

.gameDashboard {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.field {
	position: relative;
	object-fit: cover;
	width: 50vw;
	aspect-ratio: 3/2;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media only screen and (max-width: 950px) {
	.field {width: 65vw;}
}

.p1, .p2 {
	position: absolute;
	height: 30%;
	width: 2%;
	top: 50%;
	transform: translate(0, -50%);
}

.p1 {
	left: 3%;
}

.p2 {
	right: 3%;
}

.ball {
	position: absolute;
	height: 5%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.dashBottom, .dashTop {
	/* display: flex; */
	/* justify-content: space-evenly; */
	text-align: center;
}

.dashBottom {
	position: absolute;
	bottom: 0px;
	width: 100%;
	/* height: 8vh; */
	border-top: solid 1px;
	border-top-color: var(--neongreen);
}

.dashTop {
	position: absolute;
	top: 0px;
	width: 100%;
	/* height: 8vh; */
	border-bottom: solid 1px;
	border-bottom-color: var(--neongreen);
}

/* test */

/* .HomePage {
	z-index: -1;
	background-image: url('/images/place.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 200px;
} */