body, html {
	height: 100%;
	margin: 0px;
	background-color: #f8f8f8;
	font-family: Nunito;
	user-select: none;
}

#menuField {
	display: none;
}

#apatanLogo {
	font-size: 140px;
	font-weight: 800;
	color: white;
	line-height: 0;
}

#apat {
	color: #ffcc33;
}

#menuLevel {
	font-size: 60px;
	color: white;
	font-weight: bold;
	width: 400px;
	padding: 20px 40px;
	background-color: rgba(18,52,86,0.8);
	border-radius: 100px;
	box-sizing: border-box;
}

#menuLevel:hover {
	background-color: rgba(48,82,116,0.9);
	cursor: pointer;
	transition: 0.2s;
}

#instructionsField {
	display: none;
}

#instructionsField0 { display: none; }
#instructionsField1 { display: none; }
#instructionsField2 { display: none; }

#levelHolderField {
	position: relative;
	width: 960px;
	height: 960px;
	display: block;
	background-image: url('');
	background-size: auto;
	background-position: 0% 0%;
	z-index: 0;
}

#info {
	width: 80px;
	position: absolute;
	right: 50px;
	bottom: 0px;
}

#info:hover, #menu:hover {
	cursor: pointer;
}

#menu {
	width: 80px;
	position: absolute;
	right: 50px;
	bottom: 100px;
}

#attributionField {
	position: absolute;
	display: none;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 960px;
	margin: 0px;
	padding: 30px 0px;
	box-sizing: border-box;
	z-index: 999;
}

.attributions {
	line-height: 1;
	margin: 0px;
}

#attribution {
	background-color: #a1d1ae;
	font-size: 36px;
	width: 540px;
	height: 250px;
	border-radius: 90px;
}

#descTop {
	font-size: 48px;
	line-height: 0.6;
}

#descBot {
	line-height: 2;
}

#descCred {
	font-size: 28px;
	line-height: 1;
}

#playingField {
	display: none;
}

#levelString {
	font-size: 60px;
}

#panuto {
	font-size: 48px;
}

#levelString, #panuto {
	font-weight: bold;
	margin: 20px 0px;
	color: white;
}

.instructionP {
	color: white;
	font-size: 24px;
	width: 800px;

}

#circleField {
	height: 350px;
	width: 800px;
	margin: 0px 0px;
	position: relative;
}

#inputField {
	width: 600px;
	box-sizing: border-box;
	padding: 50px 0px;
	background-color: rgba(255,255,255,0.6);
	border-radius: 50px;
	z-index: 999;
}

#inputString {
	display: table-cell;
	font-size: 30px;
	padding: 5px 30px;
	border-radius: 50px;
	box-sizing: border-box;
}

.inputButton {
	background-color: #808080;
	padding: 10px 5px;
	font-size: 20px;
	width: 50px;
	height: 50px;
	margin: 2px 2px;
	font-weight: bold;
	border-radius: 5px;
	box-sizing: border-box;
	display: inline-block;
}

#balik, #subok {
	font-size: 20px;
	padding: 15px;
	border-radius: 15px;
	margin: 5px 0px;
	width: 100px;
	box-sizing: border-box;
	display: inline-block;
}

#balik { background-color: #606060; color: white; }
#subok { background-color: #606060; color: white; }

.inputButton, #balik, #subok, .circleWord, #inputField {
	user-select: none;
}

.inputButton:hover, #balik:hover, #subok:hover {
	background-color: #808080;
	cursor: pointer;
	transition: 0.2s;
}

.circleWord, .circleWordDemo {
	position: absolute;
	border-radius: 120px;
	width: 120px;
	height: 120px;
	margin: 0px;
	color: white;
	font-weight: bold;
}

.locked { background-color: black; }
.unlocked { background-color: #123456; }

#levelComplete {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 960px;
	display: none;
}

#mahusay {
	font-size: 72px;
	color: white;
	font-weight: 800;
	line-height: 0;
}

.circleScore {
	display: none;
	position: relative;
	width: 300px;
	height: 300px;
	border-radius: 150px;
	background-color: #ffcc33;
	margin: 0px;
}

.scoreField {
	color: white;
	font-size: 72px;
	font-weight: 800;
	line-height: 0;
}

.scoreSub {
	color: white;
	font-size: 30px;
	line-height: 0;
}

#menuCircle {
	display: block;
}

#completeCircle {
	display: none;
}

#susunod {
	display: none;
	border-radius: 50px;
}

#susunod, #handa {
	font-size: 40px;
	color: white;
	font-weight: bold;
	width: 250px;
	padding: 20px;
	background-color: #123456;
	box-sizing: border-box;
}

#handa {
	border-radius: 10px;
}

#susunod:hover, #handa:hover {
	background-color: rgba(48,82,116,0.9);
	cursor: pointer;
	transition: 0.2s;
}

#contrastField, #contrastAttributionField {
	z-index: -1;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 960px;
	background-color: rgba(0,0,0,0.4);
	display: block;
}

#contrastAttributionField {
	z-index: -1;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 960px;
	background-color: rgba(0,0,0,0.5);
	display: block;
}

.absolute {
	font-size: 26px;
	vertical-align: middle;
	display: table-cell;
	line-height: 120px;
}

.absolutee {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
}

.circleRed { background-color: #e13c56; }
.circleOra { background-color: #e16d3c; }
.circleYel { background-color: #e0ae04; }
.circleGre { background-color: #78aa04; }
.circleBlu { background-color: #4a7dcf; }
.circlePur { background-color: #7b4397; }
.inputsRed { background-color: #ff6355; }
.inputsOra { background-color: #fba949; }
.inputsYel { background-color: #fae442; }
.inputsGre { background-color: #8bd448; }
.inputsBlu { background-color: #2aa8f2; }
.inputsPur { background-color: #9c4f96; }

/* Circles <- https://www.schemecolor.com/jumbled-rainbow.php */
/* Keys <- https://www.schemecolor.com/rainbow-gradient.php */
/* Hover Keys <- 

/* https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJuaaTNqfQ8kUUlArL_VeTnSqPfejeSeLQyj4IC04lKMvoAJJpLU5oDjxcuHrq038js4Di8s7nTybhyphenhyphengpcdH1e5Hyot4l6fvTzfp_GaxtBgESJ2WGSN2wJvrKNps9SArPlbHgE8-AS55vZ_aNPDMJleaPR8H4RNXNLZjOMW3sgEUxlNXBZX3kHOJvbnQ/w1200-h630-p-k-no-nu/IMG_4914.JPG */