:root{
	margin-left: 	3%;
	margin-right: 	3%;
}

.indexBody{
	margin-left: 10%;
	margin-right: 10%;
	background-color: aquamarine;
}

#indexBody.indexBody{
	background-color: black;
}

#indexBody.complete{
	background: repeating-linear-gradient(180deg, white, lemonchiffon, yellowgreen);
}

.indexMain{
	background-color: white;
	height: 100%;
	min-height: 100vh;
}

#indexMain.indexMain{
	background: repeating-linear-gradient(90deg, black 5% , white, black);
}

#indexMain.complete{
	background: repeating-linear-gradient(180deg, white, lemonchiffon, yellowgreen);
}

.titleImage{
	max-width: 100%;
}

section.loginForm{
	text-align: center;
}

.loginButton, .entryButton{
	font-size: 0.9rem;
}

form#loginForm, form#entryForm{
	display: none;
	margin-top: 0;
}

.warning {
	color: red;
}

.loginEntry{
	list-style-type: none;
}

.formButton{
	font-size: 1.2rem;
}

section.caution{
	font-size: 0.8rem;
}

/*---------------*/

.forumTitleImage{
	max-width: 100%;

}

section.logoutForm{
	display: inline-block;
	margin-top: initial;
}

.logoutButton{
	position: absolute;
	background-color: aqua;
	font-size: 0.9rem;
	right: 15vw;
}

.forumH1{
	text-align: center;
	margin-top: 0;
	background: radial-gradient(closest-side, gold 80%, orange, yellow, white);
	color: brown;
	text-shadow: 1px 1px 0 red;
	font-size: 2.5rem;
}

.welcomeComment{
	font-size: 1.2rem;
	color: lemonchiffon;
	/*text-shadow: 1px 1px 1px rgb(247,219,219), -1px -1px 1px rgb(215,181,181);*/
}

span#accountName{
	background: rgba(128,128,128,0.5);
}

h2.voteTerm{
	text-align: center;
	color: rgb(244,251,117);
	text-shadow: 1px 1px 0 rgb(125, 125, 125), 1px 1px 0 rgb(98,98,98);
}

.rightCaution{
	text-align: right;
	margin-top: 45px;
}

.rightCaution a{
	background: rgba(255,255,255,0.5);
}

section#complete{
	text-align: center;
}

section#complete h2{
	background: linear-gradient(180deg, white 2%, blue, aqua);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

span.red{
	color: red;
}

.categoryH2{
	margin-bottom: 0;
	background: linear-gradient(45deg, darkorange, white);
	color: lemonchiffon;
}

section.voteList ul{
	list-style-type: none;
	padding: 18px;
	margin-top: 0;
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	align-items: center;
	background: linear-gradient(180deg, red 10%, orange 70%, brown 10%, black);
}

section.voteList ul li{
	padding: 8px;
}

.voteLink{
	background: radial-gradient(closest-side, yellow, gold);
	border-radius: 3px;
	text-decoration-line: none;
	padding: 5px;
	font-size: 1.2rem;
	color: brown;
}

.voteLink:hover{
	background: aqua;
}

.voteLink:active{
	background: white;
}


#mainComplete, #subComplete{
	font-size: 3rem;
	color: yellowgreen;
	background: linear-gradient(180deg, white 15%, yellowgreen 37%, yellow);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

section.complete, #mainComplete.complete, #subComplete.complete{
	display: none;
}

section#testers{
	background-color: rgba(255,255,255,0.6);
}

section#testers h3{
	background: linear-gradient(135deg, white, grey 90%);
	color: rgb(83,83,83);
}

.testersList{
	list-style-type: none;
	display: flex;
	gap: 10%;
	text-shadow: 1px 1px 0 white, -1px -1px 0 white;
}

ul.testersList li{
	/*background: linear-gradient(60deg, black, grey);*/
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(0, 0, 0, 0.6);
	font-size: 1.2em;
	font-weight: bold;
}



#loading{
	width: 100vw;
	height: 100vh;
	background-color: black;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	opacity: 1;

	color: white;
	text-align: center;
	padding-top: 40vh;
	font-size: 3rem;
}

.voteImg{
	max-width: 200px;
	padding: 2px;
	background-color: orange;
}

.fixStock{
	position: fixed;
	top: 0px;
	left: 3%;
	background-color: green;
	border-radius: 0 0 10px 10px;
	width: 96%;
	z-index: 8;
}

.fixStock h1{
	color: white;
	text-align: center;
	margin-bottom: 0px;
}

.fixStock h1 span.smaller{
	font-size: 0.6em;
}

.stocker{
	float: right;
	margin-right: 15px;
	padding: 5px;
	background-color: white;
	border-radius: 8px;
}

form{
	margin-top: 132px;
}

fieldset{
	margin-bottom: 10px;
	border-radius: 8px;
	background-color: rgb(221, 255, 221);
	max-width: 96%;
}

fieldset ul li{
	list-style-type: none;
}

legend{
	background-color: aquamarine;
	border-radius: 3px;
}

div.helpTitle{
	font-size: 0.7em;
	color: orangered;
	background-color: rgb(205,252,157);
}

label.readonly, input.readonly{
	pointer-events: none;
}

textarea{
	width: 235px;
	height: 60px;
	margin-top: 5px;
	resize: none;
}

.confirmArea{
	display: inline-block;
	position: relative;
	top: 10px;
	left: 5%;
	max-width: 50%;
	word-break: break-word;
	text-align: left;
	background-color: white;
}

#Locker{
	display: grid;
	grid-template-columns: 1fr 10fr;
	font-size: 0.7rem;
}

#LockerLabel{
	display: grid;
	grid-template-columns: 1fr;
}

#LockerLabel:hover{
	cursor: pointer;
}

div #key{
	
}

#keyLocker, #keyBase{
	width: 60%;
}

#keyBase{
	position: relative;
	top:-25%;
}

#voteButton{
	width: 100%;
	height: 100%;
	font-size: 2em;
	background-color: rgba(144,254,255,0.5);
}

#voteButton.voteButton{
	background-color: aqua;
}

#voteButton.voteButton:hover{
	background-color: buttonface;
	cursor: pointer;
}

#voteButton.voteButton:action{
	background-color: aquamarine;
}


@media (min-width: 1000px){
	.forumH1{
		font-size: 3rem;
	}

	.voteTermBr{
		display: none;
	}

	section.voteList ul{
		grid-template-columns: 1fr 1fr 1fr;
	}

	form{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}

	fieldset{
		text-align: center;
	}

	.confirmArea{
		display: block;
		left: 0;
		max-width: 100%;
	}
}

/*------------------------------------------------------*/
.mario{
	order: 0;
}

.cart{
	order: 1;
}

.sixage{
	order: 2;
}

.poke{
	order: 3;
}

.mon{
	order: 4;
}

.sevenage{
	order: 5;
}

.act{
	order: 6;
}

.raser{
	order: 7;
}

.dragon{
	order: 8;
}

.ninest{
	order: 9;
}

.final{
	order: 10;
}

.fantasy{
	order: 11;
}

.tales{
	order: 12;
}

.of{
	order: 13;
}

.oneage{
	order: 14;
}

.eightage{
	order: 15;
}

.dark{
	order: 16;
}

.souls{
	order: 17;
}

.twoage{
	order: 18;
}

.fourage{
	order: 19;
}


/*-------------- animation ----------------------------*/

.completeLoading {
	animation-name: completeLoading;
	animation-duration: 1.5s;
	animation-fill-mode: both;
}

@keyframes completeLoading{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
		z-index: -1;
	}
}

.keyOpen {
	animation-name: keyOpen;
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

@keyframes keyOpen{
	from{
		top: -25%;
	}
	to{
		top: -10%;
	}
}


.keyClose {
	animation-name: keyClose;
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

@keyframes keyClose{
	from{
		top: -10%;
	}
	to{
		top: -25%;
	}
}