audio::-webkit-media-controls-panel{
    background-color:#F8FAFF !important;
}
* {
     scrollbar-width: auto;
     scrollbar-color: #2e526d #ffffff00;
}
 ::-webkit-scrollbar {
     width: 10px;
}
 ::-webkit-scrollbar-track {
     background: #ffffff00;
}
 ::-webkit-scrollbar-thumb {
     background-color: #2e526d;
}
 @font-face {
     font-family: shirens;
     src: url(https://novalite.rest/font/shirens.ttf);
}
 @font-face {
     font-family: temp;
     src: url(https://novalite.rest/font/templ.ttf);
}
 .menu1 {
     grid-area: menu;
     width: 13em;
}
 .menu2 {
     grid-area: menu2;
     width: 13em;
}
 .menu3 {
     grid-area: menu3;
     width: 13em;
}
 .main {
     grid-area: main;
     width: 43em;
}
 .right1 {
     grid-area: right;
     width: 13em;
}
 .right2 {
     grid-area: right2;
     width: 13em;
}
 .right3 {
     grid-area: right3;
     width: 13em;
}
 body {
     background-image: url("https://novalite.rest/siteImage/shrines/neonwhite/bg.png");
     background-size: cover;
     background-attachment: fixed;
     width:73em;
     margin:auto;
     margin-top:1.6em;
     font-family: temp;
}
 h2 {
     font-family: shirens;
     font-size: 2em;
     margin: 0.1em;
     -webkit-text-stroke: 0.5px #132030;
     color: #fcfdff;
}
mark {
     background: #132030;
     color: #fcfdff;
     font-style: italic;
     text-transform: lowercase;
     margin: 0.6em 0;
     display: block;
    width: fit-content;
    margin: 0.4em 0 0;
}
.menu2 mark:first-child {
    display: block;
    width: fit-content;
    margin: 0.25em 0 0;
}
#completionStats mark:first-child, #challengeStats mark:first-child {
    display: inline-block;
}
 .grid-container {
     display: grid;
     grid-template-areas: 'menu main main main main right' 'menu2 main main main main right2' 'menu3 main main main main right3';
     gap: 7px;
     border-radius: 4px;
     padding: 5px;
}
 .grid-container > div {
     background: rgb(249,250,255);
     background: linear-gradient(180deg, rgba(249,250,255,1) 0%, rgba(206,233,255,1) 100%);
     color: #2e526d;
     border: 1px solid #2e526d;
     border-radius: 3px;
     padding: 5px;
}
 a {
     display: inline-block;
     transition: .3s ease;
     z-index: 40;
}
 a:hover {
     transform: translateY(-5%);
     z-index: 40;
}
 #logo {
     text-align: center;
}
 #logo img {
     width: 18em;
     -webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
    filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
}
 #charactersHead {
     font-size: 1.6em;
     -webkit-text-stroke: 0.5px #132030;
}
 .menu1 img {
     height: 8em;
}
 .menu2 h2 {
     font-size: 1.4em;
     -webkit-text-stroke: 0.5px #132030;
}
 #completionStats {
     font-size: 0.8em;
     margin-bottom: 0.4em;
     text-transform: lowercase;
}
 #challengeStats {
     font-size: 0.8em;
     text-transform: lowercase;
}
 .menu3 {
     height: 7.5em;
}
 .menu3 img, .right1 img {
     width: 100%;
}
 .main {
     height: 43.47em;
}
 #openingGif {
     display: inline-block;
     width: 20em;
     margin-top: 0.3em;
}
 #aboutHead {
     position: absolute;
     margin-left: 10.9em;
     margin-top: -6.5em;
     font-size: 1.9em;
}
 #aboutContent {
     position: absolute;
     font-size: 0.9em;
     margin-left: 23em;
     margin-top: -10.75em;
     width: 24.6em;
     line-height: 1.2em;
     text-transform: lowercase;
}
 #castImage {
     position: absolute;
     width: 18em;
     margin-left: 4.5em;
     margin-top: 14em;
}
 #whyHead {
     font-size: 1.8em;
     margin: 0.1em;
}
 #whyInfo {
     font-size: 0.9em;
     width: 26em;
     height: 18.5em;
     overflow: auto;
     margin-left: 0.3em;
     margin-top: 0.3em;
     line-height: 1.2em;
     text-transform: lowercase;
}
 .main marquee {
     margin-top: 0em;
}
 .main marquee img {
     height: 11em 
}
 .right1 {
     height: 7.4em;
}
 .right2 {
     margin-top: -3.7em;
}
 .right2 div {
     text-align: center;
}
 #music {
     width: 100%;
}
 #neonWhiteDoll {
     width: 100%;
     margin-top: 1em;
}
 .right3 {
     height: 8em;
}
 .right3 marquee {
     margin-top: 0.2em;
}
 .right3 marquee img {
     height: 7.5em;
}
 #back {
     text-align: center;
}
 #back img {
     width: 9em;
     margin-top: 0.5em;
}
@media screen and (max-width: 799px) {
	body {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.grid-container {
		display: flex;
		flex-wrap: wrap;
		grid-template-areas: none;
		gap: 0;
		margin: 0;
		padding: 0;
	}
	.menu1, .menu2, .menu3, .main, .right1, .right2, .right3 {
		width: 90%;
		margin: 0.6em auto auto auto;
	}
	.menu1 {
		order: 1;
	}
	.menu1 h2 {
		display: none;
	}
	.menu2 {
		order: 3;
	}
	.menu3 {
		order: 4;
		height: auto;
	}
	.main {
		order: 2;
		height: auto;
	}
	.main #openingGif, .main #castImage {
		display: block;
		position: relative;
		width: 80%;
		margin: 0.75em auto 0.5em auto;
		float: none;
	}
	.main #aboutContent, .main #aboutHead, .main #whyHead, .main #whyInfo {
		display: block;
		position: relative;
		width: 90%;
		margin: 0.25em auto 0.25em auto;
		float: none;
		text-align: center;
	}
	.right1 {
		order: 5;
		display: none;
	}
	.right2 {
		order: 7;
		display: none;
	}
	.right3 {
		order: 6;
	}
	#back {
		margin: 2em auto;
	}
}