* {
     scrollbar-width: auto;
     scrollbar-color: #F0AA1D #ffffff00;
}
::-webkit-scrollbar {
     width: 10px;
}
 ::-webkit-scrollbar-track {
     background: #ffffff00;
}
 ::-webkit-scrollbar-thumb {
     background-color: #F0AA1D;
     border-radius: 4px;
}
 @font-face {
     font-family: lime;
     src: url(https://novalite.rest/font/limelight.ttf);
}
 @font-face {
     font-family: byte;
     src: url(https://novalite.rest/font/byte.ttf);
}
 .menu1 {
     grid-area: menu;
     width: 13em;
     background: rgb(250,165,158);
     background: linear-gradient(180deg, rgba(250,165,158,1) 0%, rgba(255,124,133,1) 100%);
     border: 1px solid #E14A72;
}
 .menu2 {
     grid-area: menu2;
     width: 13em;
     background: rgb(145,252,184);
     background: linear-gradient(180deg, rgba(145,252,184,1) 0%, rgba(70,214,167,1) 100%);
     border: 1px solid #0FA47C;
}
 .menu2 img {
     width: 100%;
}
 .menu3 {
     grid-area: menu3;
     width: 13em;
     background: rgb(163,184,238);
     background: linear-gradient(180deg, rgba(163,184,238,1) 0%, rgba(58,187,234,1) 100%);
     border: 1px solid #0886ED;
}
 .menu3 img {
     width: 48%;
     display: inline-block;
}
 .main {
     grid-area: main;
     width: 43em;
     background: rgb(255,249,235);
     background: linear-gradient(180deg, rgba(255,249,235,1) 0%, rgba(255,240,202,1) 100%);
     border: 1px solid #F0AA1D;
     height:28.1em;
}
 h1 {
     font-family: lime;
     font-size: 2.4em;
     margin: 0.1em;
}
 body {
     background-image: url("https://novalite.rest/siteImage/shrines/wxs/bg.png");
     background-size: cover;
     background-attachment: fixed;
     background-position: center top;
     width: 58.7em;
     margin: auto;
     margin-top: 6em;
     font-family: byte;
     text-transform: lowercase;
}
 .grid-container {
     display: grid;
     grid-template-areas: 'menu main main main main main' 'menu2 main main main main main' 'menu3 main main main main main';
     gap: 7px;
     border-radius: 4px;
     padding: 5px;
     position: relative;
     z-index: 10;
}
 .grid-container > div {
     color: #6B3F00;
     border-radius: 3px;
     padding: 5px;
}
 a {
     display: inline-block;
     transition: .3s ease;
     z-index: 40;
     color: #6B3F00;
}
 a:hover {
     transform: translateY(-5%);
     z-index: 40;
}
 #playlist {
     color: white;
}
 #playlist p {
     cursor: pointer;
     padding: 2px;
     display: inline-block;
     transition: .3s ease;
     z-index: 40;
     margin: 0.1em;
     text-decoration: underline;
}
 #playlist p:hover {
     transition: .3s ease;
     transform: translateY(-8%);
     z-index: 40;
}
 #videoarea {
     width: 100%;
     margin-bottom: 0.2em;
}
 .head {
     position: fixed;
     z-index: 99;
     animation: 50s headpopping infinite;
     top: 0;
     left: 0;
     transform: translateY(-50vh) rotate(180deg);
}
 @keyframes headpopping {
     3%, 8% {
         transform: translateY(-50vh) rotate(180deg);
    }
     6% {
         transform: translateY(0) rotate(180deg);
    }
     10% {
         transform: translateY(-50vh) translateX(110vw) rotate(270deg);
    }
     12%, 20% {
         transform: translateY(50vh) translateX(110vw) rotate(270deg);
    }
     15% {
         transform: translateY(50vh) translateX(80vw) rotate(270deg);
    }
     22% {
         transform: translateY(50vh) translateX(110vw) rotate(0);
    }
     24% {
         transform: translateY(110vh) translateX(110vw) rotate(0);
    }
     26%, 30% {
         transform: translateY(110vh) translateX(70vw) rotate(0);
    }
     28% {
         transform: translateY(80vh) translateX(70vw) rotate(0);
    }
     32% {
         transform: translateY(110vh) translateX(70vw) rotate(90deg);
    }
     34% {
         transform: translateY(110vh) translateX(-50vw) rotate(90deg);
    }
     36%, 40% {
         transform: translateY(30vh) translateX(-50vw) rotate(90deg);
    }
     38% {
         transform: translateY(30vh) translateX(0) rotate(90deg);
    }
     42% {
         transform: translateY(-45vh) translateX(-50vw) rotate(230deg);
    }
     44%, 48% {
         transform: translateY(-45vh) translateX(100vw) rotate(230deg);
    }
     46% {
         transform: translateY(-3vh) translateX(85vw) rotate(230deg);
    }
     50% {
         transform: translateY(-45vh) translateX(100vw) rotate(180deg);
    }
     52%, 56% {
         transform: translateY(-45vh) translateX(50vw) rotate(180deg);
    }
     54% {
         transform: translateY(0) translateX(50vw) rotate(180deg);
    }
     58% {
         transform: translateY(-45vh) translateX(-50vw) rotate(0);
    }
     60% {
         transform: translateY(115vh) translateX(-50vw) rotate(0);
    }
     62%, 65% {
         transform: translateY(75vh) translateX(0) rotate(0);
    }
     72% {
         transform: translateY(85vh) translateX(53vw) rotate(0);
    }
     74% {
         transform: translateY(110vh) translateX(53vw) rotate(0);
    }
     76% {
         transform: translateY(110vh) translateX(53vw) rotate(90deg);
    }
     78% {
         transform: translateY(110vh) translateX(-50vw) rotate(90deg);
    }
     80%, 88% {
         transform: translateY(15vh) translateX(-50vw) rotate(90deg);
    }
     82% {
         transform: translateY(15vh) translateX(0) rotate(90deg);
    }
     83% {
         transform: translateY(15vh) translateX(0) rotate(98deg);
    }
     84% {
         transform: translateY(15vh) translateX(0) rotate(83deg);
    }
     85% {
         transform: translateY(15vh) translateX(0) rotate(92deg);
    }
     86% {
         transform: translateY(15vh) translateX(0) rotate(87deg);
    }
     90% {
         transform: translateY(15vh) translateX(-50vw) rotate(180deg);
    }
     92% {
         transform: translateY(-50vh) translateX(-50vw) rotate(180deg);
    }
     94% {
         transform: translateY(-50vh) translateX(0) rotate(180deg);
    }
}
 @-moz-document url-prefix() {
     .menu2 marquee {
         height: 9em;
    }
     .menu2 marquee img {
         height: 9em;
         width: auto;
    }
}
 #wxsMainGraphic {
     width: 34em;
     position: absolute;
     z-index: 1;
     margin-top: -12em;
     margin-left: 25em;
}
 #albumA {
     width: 14em;
     position: absolute;
     margin-left: 28.6em;
     margin-top: 0.4em;
}
 #albumB {
     width: 13.5em;
     position: absolute;
     margin-top: 0.4em;
     margin-left: 0.6em;
}
 #stampMarqA {
     position: absolute;
     margin-left: 8.5em;
     margin-top: 0.6em;
     width: 19.4em;
     height: 2em;
}
 #stampMarqB {
     position: absolute;
     margin-left: 14.8em;
     margin-top: 0.6em;
     width: 15.8em;
     height: 2em;
}
 #stampMarqA img, #stampMarqB img {
     height: 2em;
}
 #aboutHead {
     position: relative;
}
 #mainAbout {
     margin: 0.2em;
     border: 1px solid #F0AA1D;
     padding: 4px;
     background: white;
     border-radius: 3px;
     width: 27em;
     height: 10em;
     overflow: auto;
     position: relative;
}
 #whyHead {
     position: relative;
     text-align: right;
     margin-bottom: -0.1em;
}
 #whyAbout {
     margin-top: 0.1em;
     margin-left: 15em;
     border: 1px solid #F0AA1D;
     padding: 4px;
     background: white;
     border-radius: 3px;
     width: 27em;
     height: 10em;
     overflow: auto;
     position: relative;
}
 #back {
     text-align: center;
}
 #back img {
     width: 9em;
     margin-top: 0.5em;
}
@media screen and (max-width: 799px) {
	.head {
		display: none;
	}
	body {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.grid-container {
		display: flex;
		flex-wrap: wrap;
		grid-template-areas: none;
		gap: 0;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.main, .menu1, .menu2, .menu3 {
		width: 92%;
		margin: 0.5em auto;
	}
	.menu1 {
		order: 2;
	}
	.menu2 {
		order: 3;
	}
	.menu3 {
		order: 4;
		display: none;
	}		
	.main {
		order: 1;
		text-align: center;
		height: auto;
	}
	.main #aboutHead, .main #whyHead {
		display: block;
		margin: 0.25em auto 0em;
		text-align: center;
	}
	.main #mainAbout {
		height: auto;
		width: 92%;
		margin: auto;
	}
	.main #whyAbout {
		width: 92%;
		margin: auto auto 1em auto;
		height: 23em;
	}
	.main #stampMarqA, .main #stampMarqB {
		display: block;
		position: relative;
		margin: 0.1em auto;
		width: 98%;
	}
	.main #albumA, .main #albumB {
		display: block;
		position: relative;
		margin: 1em auto;
		width: 80%;
	}
	#logo {
		display: block;
		position: absolute;
		top: 12em;
		width: 100%;
		right: auto;
		z-index: 3;
	}
	#wxsMainGraphic {
		display: block;
		position: relative;
		z-index: 2;
		width: 95%;
		margin: 2em auto 1em auto;
	}
}