/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/**reset^**/


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

#ThemeSelector {
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
}
#LabelCharacters {
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
}

#TopBar {
	position: sticky;
	top: 0;
	background-color: inherit;
	padding-bottom: 10px;
	border-bottom: white solid 5px;
	z-index: 5;
}

form {
	display:flex;
	justify-content: center;
}

#OptionsBar {
	display:none;
}

.Evil {
	opacity: 1;
}

#OpenOptions {
	position:sticky;
	top:0;
}

#CloseOptions {
	position: sticky; 
	top:0;
	display:none;
}

hr {
	border: white 3px dotted;
}

.SoundBoardACTUALButton {
	opacity: 0;
	z-index: 3;
	position: absolute;
	text-align: center;
	height: 12rem;
	width: 16.67%;
}

.ACTUALButtonKaiMei {
	opacity: 0;
	z-index: 3;
	position: absolute;
	text-align: center;
	height: 12rem;
	width: 50%;
}

#homepage {
	position:relative;
}

input {
	border-radius: 10px;
}

.ThemeButton {
	margin: 5px;
	padding: 5px 10px;
	border-radius: 10px;
	border: solid rgb(83, 83, 83) 2px;
}

#CenterOptionsButtonLOL {
	display: flex;
	justify-content: center;
	padding-bottom: 5px;
}

.ThemeButton:hover {
	transform: scale(1.05);
}

.ThemeButton:active{
	transform: scale(0.95);
}


#lnButton:hover {
color: #4455DD;
background-color: #dbdfff;
}

#mmjButton:hover {
	color: #88DD44;
	background-color: #ebffdb;
}

#vbsButton:hover {
	color: #EE1166;
	background-color:#ffd0e2;
}

#wxsButton:hover {
	color: #FF9900;
	background-color: #ffebcd;
}

#n25Button:hover {
	color: #884499;
	background-color: #f5ccff;
}

#vsButton:hover {
	color: rgb(103, 103, 103);
}

#IchikaButton {
	background-color: #33AAEE;
	grid-area: 1 / 1;
}

#MinoriButton {
	background-color: #FFCCAA;
	grid-area: 1 / 2;
}

#KohaneButton {
	background-color: #FF6699;
	grid-area: 1 / 3;
}

#TsukasaButton {
	background-color: #FFBB00;
	grid-area: 1 / 4 ;
}

.SoundBoardButton {
	display: flex;
	justify-content: center;
	height: fit-content;
}

.play {
	animation: AudioPlaying 0.75s infinite linear;
}

@keyframes AudioPlaying {
	from {transform: rotate(0deg)}
	to {transform: rotate(360deg)}
}

.pause {
	animation: AudioPaused 2s infinite ease-in-out;
	
}

@keyframes AudioPaused {
	0% {transform: scale(1);}
	50% {transform:scale(1.15);}
	100% {transform: scale(1);}
}

#KanadeButton {
	background-color: #BB6688;
	grid-area:1 / 5;
}

#MikuButton {
	background-color:#33CCBB;
	grid-area: 1 / 6;
}

#SakiButton {
	background-color:#FFDD44;
	grid-area: 2 / 1;
}

#HarukaButton {
	background-color: #99CCFF;
	grid-area: 2 / 2;
}

#AnButton {
	background-color:#00BBDD;
	grid-area: 2 / 3;
}

#EmuButton {
	background-color: #FF66BB;
	grid-area: 2 / 4;
}

#MafuyuButton {
	background-color: #8888CC;
	grid-area: 2 / 5;
}

#RinButton {
	background-color: #FFCC11;
	grid-area: 2 / 6;
}

#HonamiButton {
	background-color: #EE6666;
	grid-area: 3 / 1;
}

.Hidden {
	display:none;
}

#ShihoButton {
	background-color: #BBDD22;
	grid-area: 4 / 1;
}

#AiriButton {
	background-color: #FFAACC;
	grid-area: 3 / 2;
}

#ShizukuButton {
	background-color: #99EEDD;
	grid-area: 4 / 2;
}

#AkitoButton {
	background-color: #FF7722;
	grid-area: 3 / 3;
}

#ToyaButton {
	background-color: #0077DD;
	grid-area: 4 / 3;
}

#NeneButton {
	background-color: #33DD99;
	grid-area: 3 / 4;
}

#RuiButton {
	background-color: #BB88EE;
	grid-area: 4 / 4;
}

#EnaButton {
	background-color: #CCAA88;
	grid-area: 3 / 5;
}

#MizukiButton {
	background-color: #DDAACC;
	grid-area: 4 / 5;
}

#LenButton {
	background-color: #FFEE11;
	grid-area: 3 / 6;
}

#LukaButton {
	background-color: #FFBBCC;
	grid-area: 4 / 6;
}

#MeikoButton {
	background-color:#DD4444;
	grid-area: 5 / 1 / 5 / 4
}

#KaitoButton {
	background-color: #3366CC;
	grid-area: 5 / 4 / 5 / 7
}

.Cutout {
	height: 12rem;
}

	

.CharacterLabel {
	position: absolute;
	text-align: center;
	margin-top: 11rem;
	display:block;
	color:black;
	background-color: rgba(255, 255, 255, 0.544);

}

@media screen and (max-width:640px) {
	.Cutout {
	height: 5rem;
}

.SoundBoardACTUALButton {
	height: 5rem;
	width: 33.33%;
}

.ACTUALButtonKaiMei {
	height: 5rem;
	width: 33.33%;
}

.CharacterLabel {
	margin-top: 3rem;
	max-width: 5rem;
	}
#homepage {
	display:grid;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
}

	#IchikaButton {
	grid-area: 1 / 1;
}

#MinoriButton {
	grid-area: 2 / 2;
}

#KohaneButton {
	grid-area: 3 / 3;
}

#TsukasaButton {
	grid-area: 5 / 1 ;
}

#KanadeButton {
	grid-area: 6 / 2;
}

#MikuButton {
	grid-area: 7 / 3;
}

#SakiButton {
	grid-area: 1 / 2;
}

#HarukaButton {
	grid-area: 2 / 3;
}

#AnButton {
	grid-area: 4 / 1;
}

#EmuButton {
	grid-area: 5 / 2;
}

#MafuyuButton {
	grid-area: 6 / 3;
}

#RinButton {
	grid-area: 8 / 1;
}
#HonamiButton {
	grid-area: 1 / 3;
}

#ShihoButton {
	grid-area: 2 / 1;
}

#AiriButton {
	grid-area: 3 / 1;
}

#ShizukuButton {
	grid-area: 3 / 2;
}

#AkitoButton {
	grid-area: 4 / 2;
}

#ToyaButton {
	grid-area: 4 / 3;
}

#NeneButton {
	grid-area: 5 / 3;
}

#RuiButton {
	grid-area: 6 / 1;
}

#EnaButton {
	grid-area: 7 / 1;
}

#MizukiButton {
	grid-area: 7 / 2;
}

#LenButton {
	grid-area: 8 / 2;
}

#LukaButton {
	grid-area: 8 / 3;
}

#MeikoButton {
	grid-area: 9 / 1;
}

#KaitoButton {
	grid-area: 9 / 2
}
}

@media (min-width:641px) and (max-width:1200px){
	.Cutout {
		height: 6rem;
	}

	.SoundBoardACTUALButton {
	height: 6rem;
	width: 25%;
}

.ACTUALButtonKaiMei {
	height: 6rem;
	width: 50%;
}

.CharacterLabel {
	margin-top: 5rem;
}

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

	#IchikaButton {
	grid-area: 1 / 1;
}

#MinoriButton {
	grid-area: 2 / 1;
}

#KohaneButton {
	grid-area: 3 / 1;
}

#TsukasaButton {
	grid-area: 4 / 1 ;
}

#KanadeButton {
	grid-area: 5 / 1;
}

#MikuButton {
	grid-area: 6 / 1;
}

#SakiButton {
	grid-area: 1 / 2;
}

#HarukaButton {
	grid-area: 2 / 2;
}

#AnButton {
	grid-area: 3 / 2;
}

#EmuButton {
	grid-area: 4 / 2;
}

#MafuyuButton {
	grid-area: 5 / 2;
}

#RinButton {
	grid-area: 6 / 2;
}

#HonamiButton {
	grid-area: 1 / 3;
}

#ShihoButton {
	grid-area: 1 / 4;
}

#AiriButton {
	grid-area: 2 / 3;
}

#ShizukuButton {
	grid-area: 2 / 4;
}

#AkitoButton {
	grid-area: 3 / 3;
}

#ToyaButton {
	grid-area: 3 / 4;
}

#NeneButton {
	grid-area: 4 / 3;
}

#RuiButton {
	grid-area: 4 / 4;
}

#EnaButton {
	grid-area: 5 / 3;
}

#MizukiButton {
	grid-area: 5 / 4;
}

#LenButton {
	grid-area: 6 / 3;
}

#LukaButton {
	grid-area: 6 / 4;
}

#MeikoButton {
	grid-area: 7 / 1 / 7 / 3;
}

#KaitoButton {
	grid-area: 7 / 3 / 7 / 5;
}}

h2 {
	text-align: center;
	padding: 5px;
	padding-bottom: 10px;
	font-family: 'Courier New', Courier, monospace;
	font-weight: bolder;
}

h3 {
	font-family: 'Courier New', Courier, monospace;
	font-weight: bolder;
}

.CharacterLabel {
	position: absolute;
	text-align: center;
}

#Welcome {
	text-align: center;
	padding: 5px;
	font-family: 'Courier New', Courier, monospace;
	font-weight: bolder;
	font-size:xx-large;
}