/* Classic Blue Theme: Designed to look very 2000s, featuring a copious amount of gradients, drop-shadows, beveled edges, inset text, and more.
Colors, design, and code made by SKCro for the CPC Opposition Admin Panel. */
*{scrollbar-color:#048c #0248;} /* This never works right so I have to force it on absolutely everything */
::selection{background:#0080ff80;} /* Override the default text highlight color */
html{ /* Font variables */
	--standard-font:SourceSans,Source Sans Pro,Tahoma,Helvetica,Helvetica Neue,Lucida Grande,Lucida Sans,system-ui,Verdana,MS Sans Serif,sans-serif;
	--monospace-font:Lucida Console,Monaco,Consolas,monospace;
}
@font-face{
	font-family:SourceSans;
	src:url(SourceSans3.ttf)format(truetype);
	font-weight:100 900;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:SourceSans;
	src:url(SourceSans3-Italic.ttf)format(truetype);
	font-weight:100 900;
	font-style:italic;
	font-display:swap;
}

body{
	height:calc(100vh - 48px); /* Account for the margin set below */
	margin:48px 0 0 0;
	font-family:var(--standard-font);
	font-size:16px;
	word-wrap:break-word; /* Prevent text from overflowing off the page */
	overflow:hidden; /* These two will hopefully prevent Safari scrolling nonsense */
	touch-action:none;
	background:radial-gradient(ellipse farthest-corner at 50% 100%,#048 10%,#001222 90%);
	background-size:200% 100%;
	background-position:center;
	background-color:#001222;
	color:#f0f0f0;
	text-shadow:0 2px 1px #000810;
	color-scheme:only dark;
}
.bg{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:-4;
}
.stars{animation:starScroll 15s linear infinite;}
.star{animation:twinkle 2s infinite;}
g.logo{filter:drop-shadow(0 2px 4px #000);animation:float 5s ease-in-out infinite;}
rect{shape-rendering:geometricPercision;}
@keyframes starScroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@keyframes twinkle{0%,100%{opacity:1;}50%{opacity:.5;}}
@keyframes float{0%,100%{transform:translateY(-1%);}50%{transform:translateY(1%);}}

h1,ul,ol{margin:8px 0;}
h1{font-weight:900;}
h2{font-weight:800;}
h3{font-weight:700;}
p{margin:4px 0;}
p:empty{display:none;}
code{font-family:var(--monospace-font);font-size:.95em;} /* Make font height consistent with standard */
hr{
	margin:4px 0;
	border-style:solid; /* Create an inset effect */
	border-width:1.5px;
	border-radius:6px;
	border-color:#000e #dddc #f0f0f0cc #dddc;
	padding:1px;
	filter:blur(1px); /* Make the inset blurry to make the lighting more realistic and less "hard" */
}

form{
	width:auto; /* Layout fix */
	margin:auto;
	text-align:center;
}
form table{width:max-content;margin:auto;text-align:left;}
form table tr td:nth-of-type(1){font-weight:bold;} /* I don't know why it's this specific but I guess something was really not working */

table{
	border:0; /* Disable the border itself but keep its properties around for spacing */
	border-spacing:0 4px;
	border-radius:4px;
	padding:0 4px;
	width:100%;
	text-align:left;
	background:#0004;
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(2px);
}thead{
	position:sticky;
	top:0;
	left:0;
	font-weight:bold;
	background:#000d;
	box-shadow:0 2px 2px #000d,0 -10px 2px #000c;
}
td{
	border:0;
	padding:4px 8px;
	white-space:nowrap;
	background:#0004;
}td.zero-width{width:0;} /* Zero-width <td> to compact the amount of space the "Edit" button cell uses */

#topBar{
	display:flex;
	position:fixed;
	top:0;
	left:0;
	width:calc(100% - 8px);
	height:48px;
	padding:0 4px;
	justify-content:space-between;
	background:linear-gradient(#048c,#024c 50%,#001222cc);
	background-size:auto 96px;
	box-shadow:0 2px 2px #000810;
	backdrop-filter:blur(2px);
	-webkit-backdrop-filter:blur(1px);
	animation:topPulse 5s ease-in-out infinite alternate;
	z-index:1;
}@keyframes topPulse{from{background-position-y:top;}to{background-position-y:bottom;}}
#topBar button{
	height:100%;
	font-size:16px;
	margin:0 2px 0 0;
	border:0;
	border-radius:0;
	padding:0 6px;
	flex-shrink:0;
	background:#0001;
	color:#f0f0f0;
	box-shadow:inset 0 6px 2px -4px #f0f0f032,inset 0 -6px 2px -4px #0008;
	text-shadow:0 -1px #000810;
}
#topBar button:hover,#topBar button:focus-visible{transform:none;background:linear-gradient(#f0f0f025 25%,#f0f0f015 90%);}
#topBar button:active{transform:none;background:linear-gradient(#024,#001222);}
.top-separator{
	width:2px;
	height:100%;
	margin:0 4px;
	flex-shrink:0;
	background:linear-gradient(90deg,#001222 40%,#0064c8 65%);
	opacity:.5;
}
#topBar > .top-separator:nth-of-type(2){margin-left:-2px;}
.empty-space{width:100%;flex-shrink:9999;}
.top-logo{
	display:flex;
	position:fixed;
	left:50%;
	height:inherit;
	transform:translate(-50%);
}
.top-logo img{
	height:29px;
	margin:auto;
	filter:drop-shadow(0 -1px #000810);
	cursor:pointer;
	transition:filter 0.2s ease-out;
}.top-logo img:hover,.top-logo img:focus-visible{filter:drop-shadow(0 0 4px #f0f0f0f0);outline:none;}
.top-logo img:active{filter:drop-shadow(0 -2px #001222);}
.top-bar-buttons{color:#f0f0f0a0;}
.top-bar-buttons,.account-container{
	flex-shrink:.2;
	white-space:nowrap;
	overflow:auto;
	scrollbar-width:thin;
}
.account-container .username{font-weight:bold;}
.account-container #logout{margin-left:-2px;margin-right:0;}

#mainPanel{ /* Padding around main content area */
	display:flex;
	width:100%;
	height:calc(100vh - 76px);
	box-sizing:border-box;
	justify-content:space-between;
	padding:8px;
	padding-bottom:4px;
}
section,output{ /* Main content area */
	display:flex;
	width:100%;
	max-height:calc(100% - 20px);
	text-align:center;
	flex-direction:column;
	align-items:center;
	overflow:auto;
	touch-action:pan-x pan-y; /* Disable zooming but make sure it's scrollable */
	border:2px solid;
	border-radius:4px;
	border-color:#0008;
	padding:8px;
	background:#0008;
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(2px);
}

button,input,textarea,select{ /* Pretty much all types of input field or method */
	font-family:var(--standard-font);
	font-size:1rem; /* Prevent annoying page zoom on iOS Safari, improves readability */
	margin:2px;
	border:2px solid #001222;
	border-radius:6px;
	padding:2px 4px;
	background:#00448880;
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(2px);
	color:#f0f0f0;
	accent-color:#0064c8;
	text-shadow:0 -1px #000810;
	box-shadow:0 2px 2px #0008;
}
button,input[type='submit'],input[type='button'],input[type='reset']{ /* Buttons in particular */
	width:max-content;
	border:2px solid #024;
	background:linear-gradient(#0064c8cc,#048c,#024c,#001222cc) #0000;
	background-size:auto 200%;
	background-position-y:50%;
	box-shadow:inset 0 -2px 2px #0004,inset 0 1.5px 2px #f0f0f048,0 2px 2px #0008;
	transition-property:transform,font-weight,background-position-y,box-shadow,text-shadow;
	transition-duration:.1s;
	cursor:pointer;
}td > button{width:36px;margin:0;}
button#newClient{position:sticky;bottom:0;}
button:hover,
button:focus-visible,
input[type='submit']:hover,
input[type='submit']:focus-visible,
input[type='reset']:hover,
input[type='reset']:focus-visible{ /* Buttons that are hovered over or otherwise focused */
	transform:translateY(-1px);
	font-weight:bold;
	outline:0;
	background-position-y:0%;
	box-shadow:inset 0 -2px 2px #0004,inset 0 2px 2px #f0f0f064,0 4px 2px #0006;
	text-shadow:0 -1px .5px #000810;
}
button:active,
input[type='submit']:active,
input[type='reset']:active{ /* Buttons being actively clicked */
	transform:translateY(1px);
	font-weight:900!important;
	background-position-y:100%;
	box-shadow:inset 0 -2px 2px #0008,inset 0 1px 2px #f0f0f016,0 1px 2px #000a;
}

button.accept, /* The above styles, just for buttons of different types */
input.accept[type='submit'],
input.accept[type='button']{
	border-color:#002212!important;
	background-image:linear-gradient(#00c864dd,#084d,#042d,#002212dd)!important;
	text-shadow:0 -1px #001008!important;
}
button.accept:hover,
button.accept:focus-visible,
input.accept[type='submit']:hover,
input.accept[type='submit']:focus-visible,
input.accept[type='button']:hover,
input.accept[type='button']:focus-visible{text-shadow:0 -1px .5px #001008!important;}

button.danger,
input.danger[type='submit'],
input.danger[type='button'],
input[type='reset']{
	border-color:#320000!important;
	background-image:linear-gradient(#ac0000,#a00000,#640000,#320000)!important;
	text-shadow:0 -1px #160000!important;
}
button.danger:hover,
button.danger:focus-visible,
input.danger[type='submit']:hover,
input.danger[type='submit']:focus-visible,
input[type='reset']:hover,
input[type='reset']:focus-visible{text-shadow:0 -1px .5px #160000!important;}

input:not([type='submit'],[type='button'],[type='reset']),textarea{font-family:var(--monospace-font);margin:2px 4px;} /* Any input that isn't a button */
input:not([type='submit'],[type='button'],[type='reset']):focus,textarea:focus{outline:none;border-color:#0064c8;} /* Above, just focused */
input[disabled]{opacity:.5;}
input::placeholder,textarea::placeholder{color:#f0f0f0;opacity:.5;}
input:autofill{background-color:#024!important;color:#f0f0f0!important;}

.login{width:fit-content;margin:auto;}
.login-field{display:flex;justify-content:space-between;}

dialog#uiAlert,#accessibilityFlyout{
	width:320px;
	padding:16px;
	scrollbar-width:thin;
	border:0;
	border-radius:6px;
	background:linear-gradient(#048c,#024c);
	box-shadow:inset 0 4px 4px #fff5,
	inset 0 -4px 4px #0008,
	0 4px 6px #000e;
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(2px);
	color:#f0f0f0;
	outline:none;
	z-index:9999;
}
dialog#uiAlert{
	display:none;
	min-height:64px;
	max-height:90vh;
	flex-direction:column;
}
dialog#uiAlert::backdrop{
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(2px);
	background:#0004;
	cursor:not-allowed;
}
dialog#uiAlert.flexible-width{
	min-width:128px;
	width:max-content;
	max-width:calc(100vw - 48px);
}
dialog#uiAlert.shown{display:flex;visibility:visible;}

.message-container{
	text-align:center;
	min-height:72px;
	overflow-y:auto;
	scrollbar-width:thin;
	z-index:10000;
}

#alertIcon{
	width:64px;
	height:64px;
	animation:blink 1s cubic-bezier(1,0,0,1) infinite;
	filter:drop-shadow(0 2px 1px #000);
	pointer-events:none;
}@keyframes blink{0%,100%{opacity:0;}50%{opacity:1;}}

#alertMsg{
	text-align:left;
	word-wrap:break-word;
	padding:0 8px;
}

.alert-separator{margin:4px 0;}
.alert-buttons{display:flex;justify-content:center;}
.alert-button{width:max-content;font-size:16px;}

#topBar button.asbestos{
	width:2px;
	padding:0;
	overflow:hidden;
	opacity:0;
	transition-property:width,padding,overflow,opacity;
	transition-duration:.2s;
}#topBar button.asbestos:hover{width:72px;opacity:1;}

.tip{margin-top:0;margin-bottom:10px;opacity:.5;} /* The tip at the top of the main page */

.bottom-section{
	display:flex;
	width:100%;
	height:24px;
	padding:0 8px;
	font-size:16px;
	justify-content:space-between;
	align-items:center;
	white-space:nowrap;
	overflow:auto hidden;
	scrollbar-width:thin;
	box-sizing:border-box;
	color:#f0f0f0;
	text-shadow:0 0 2px #000810, /* Create a more intense shadow */
	0 0 2px #000810,
	0 0 2px #000810,
	0 0 2px #000810,
	0 0 2px #000810;
	opacity:.75;
	transition:opacity .2s,text-shadow .2s;
	z-index:9999;
}.bottom-section:hover,.bottom-section:focus-within{opacity:1;text-shadow:0 0 2px #000810,0 0 2px #000810,0 0 2px #000810;}
#accFlyoutToggle{
	display:flex;
	margin:0;
	margin-right:max(calc(1px - 1px),calc(25% - 164px)); /* That first value is a stupid workaround to get around the minifier incorrectly truncating 0px to 0 */
	padding:0 4px;
	width:172px;
	height:22px;
	font-size:14px;
	text-align:left;
	transition-property:transform,font-weight,background-position-y,box-shadow,text-shadow,opacity;
	transition-duration:0.1s,0.1s,0.1s,0.1s,0.1s,0.2s;
}#accFlyoutToggle::after{content:'▲';margin-left:auto;padding-left:8px;}
#accFlyoutToggle.open{
	font-weight:bold;
	box-shadow:inset 0 -2px 2px #0008,inset 0 1px 2px #f0f0f016,0 1px 2px #000a;
	background-position-y:100%;
	pointer-events:none;
}#accFlyoutToggle.open::after{content:'▼'}
#accessibilityFlyout{
	position:fixed;
	bottom:48px;
	left:24px;
	margin:0;
	transform:translateY(256px);
	transition:transform 0.2s ease-out;
	list-style:none;
	backdrop-filter:none;
	z-index:0;
}#accessibilityFlyout.open{transform:translateY(0);}
#accessibilityFlyout h1{margin:0;text-align:center;text-shadow:0 2px 1px #000810;}
.bottom-section label{
	display:flex;
	min-width:fit-content;
	width:25%;
	text-align:center;
	align-items:center;
	justify-content:right;
	cursor:pointer;
	transition:font-weight .1s;
}.bottom-section label:hover,.bottom-section label:focus-within{font-weight:500;}
.bottom-section label.disabled:hover,.bottom-section label.disabled:focus-within{font-weight:revert;}
.bottom-section select{cursor:pointer;}
.bottom-section p{margin:auto;}
.bottom-section p::before,.bottom-section p::after{content:' - ';display:none;}
.bottom-section p::before{margin-left:4px;}
.bottom-section p::after{margin-right:4px;}
.bottom-section input[type='checkbox']{
	width:16px!important;
	height:16px!important;
	margin:0 4px 0 0;
}
.bottom-section select{
	margin:0 0 0 4px;
	padding:0 4px;
	height:22px;
	font-size:13px;
	background:#048;
	color:#f0f0f0;
}
#theme option{text-align:right;}
#theme option[selected]{font-weight:900;}
#theme option:nth-of-type(1){background:#a00000;}
#theme option:nth-of-type(2){background:#063;}
#theme option:nth-of-type(3){background:#036;}
#theme option:nth-of-type(4){background:#191919;}
#theme option:nth-of-type(5){background:#800000;text-shadow:2px 2px #000;}
#theme option:nth-of-type(6){background:#840;}

.hidden,
body.screensaver .account-container span,
body.screensaver .top-bar-buttons,
body.screensaver .top-separator{display:none;visibility:hidden;}
body.screensaver #mainPanel,
body.screensaver #accFlyoutToggle,
body.screensaver .bottom-section label{opacity:0;pointer-events:none;}
#mainPanel,.bottom-section label{transition:opacity .2s;}

/* Crimson Red + Shadow themes */
body.red{background-image:linear-gradient(#100 10%,#a00000 90%);text-shadow:0 2px 1px #160000;}
body.red *,body.shadow *{scrollbar-color:#a00000cc #640000cc;}
body.red *::selection,body.shadow *::selection{background:#a0000080;}
body.red #topBar,body.shadow #topBar{background-image:linear-gradient(#a00000cc,#640000cc 50%,#320000cc);}
body.red #topBar button:active,body.shadow #topBar button:active{background:linear-gradient(#320000,#160000);}
body.red .top-separator,body.shadow .top-separator{background-image:linear-gradient(90deg,#160000 40%,#b00 65%);}
body.red button,body.red input,body.red textarea,body.red select,
body.shadow button,body.shadow input,body.shadow textarea,body.shadow select{
	border-color:#160000;
	accent-color:#a00000;
	background-color:#a0000080;
	text-shadow:0 -1px #000810;
}body.red select,body.shadow select{background:#600000;}
body.red button,input[type='submit'],body.red input[type='button'],body.red input[type='reset'],
body.shadow button,input[type='submit'],body.shadow input[type='button'],body.shadow input[type='reset']{
	border-color:#320000;
	background-image:linear-gradient(#a00000cc,#640000cc,#320000cc,#160000cc);
	text-shadow:0 -1px #160000;
}
body.red input:not([type='submit'],[type='button'],[type='reset']):focus,body.red textarea:focus,
body.shadow input:not([type='submit'],[type='button'],[type='reset']):focus,body.shadow textarea:focus{border-color:#a00000;}
body.red dialog#uiAlert,body.shadow dialog#uiAlert,body.red #accessibilityFlyout{background:linear-gradient(#a00000cc,#640000cc);}
body.red .bottom-section select,body.shadow .bottom-section select{background:#500;}

/* Forest Green theme */
body.green{background-image:linear-gradient(#002212 10%,#063 90%);text-shadow:0 2px 1px #0001008;}
body.green *{scrollbar-color:#084c #042c;}
body.green *::selection{background:#00884480;}
body.green #topBar{background-image:linear-gradient(#084c,#042c 50%,#002212cc);}
body.green #topBar button:active{background:linear-gradient(#042,#002212);}
body.green .top-separator{background-image:linear-gradient(90deg,#002212 40%,#084 65%);}
body.green button,body.green input,body.green textarea,body.green select{
	border-color:#002212;
	accent-color:#084;
	background-color:#0848;
	text-shadow:0 -1px #001008;
}body.green select{background:#042;}
body.green button,input[type='submit'],body.green input[type='button'],body.green input[type='reset']{
	border-color:#002212;
	background-image:linear-gradient(#063c,#042c,#002212cc,#001008cc);
	text-shadow:0 -1px #001008;
}
body.green input:not([type='submit'],[type='button'],[type='reset']):focus,body.green textarea:focus{border-color:#00c864;}
body.green dialog#uiAlert,body.green #accessibilityFlyout{background:linear-gradient(#084c,#042c);}
body.green .bottom-section select{background:#042;}

/* Back in Black theme, background for Shadow and Myers theme */
body.black,body.shadow,body.jeffy{background-image:linear-gradient(#191919 10%,#262626 90%);text-shadow:0 2px 1px #000;}
body.black *{scrollbar-color:#444c #191919cc;}
body.black *::selection{background:#a0a0a080;}
body.black #topBar{background-image:linear-gradient(#262626cc,#191919cc 50%,#040404cc);}
body.black #topBar button:active{background:linear-gradient(#191919,#000);}
body.black .top-separator{background-image:linear-gradient(90deg,#000 40%,#444 65%);}
body.black button,body.black input,body.black textarea,body.black select{
	border-color:#191919;
	accent-color:#262626;
	background-color:#19191980;
	text-shadow:0 -1px #000;
}body.black select{background:#0c0c0c;}
body.black button,input[type='submit'],body.black input[type='button'],body.black input[type='reset']{
	border-color:#191919;
	background-image:linear-gradient(#484848cc,#262626cc,#191919cc,#0c0c0ccc);
	text-shadow:0 -1px #000;
}
body.black input:not([type='submit'],[type='button'],[type='reset']):focus,body.black textarea:focus{border-color:#444;}
body.black dialog#uiAlert,body.black #accessibilityFlyout{background:linear-gradient(#262626cc,#191919cc);}
body.black .bottom-section select{background:#111;}

/* Myers Halloween theme */
body.jeffy,body.shadow,body.jeffy{background-image:linear-gradient(#191919 10%,#1f1f1f 90%);text-shadow:0 2px 1px #000;}
body.jeffy *{scrollbar-color:#840c #420c;}
body.jeffy *::selection{background:#ff800080;}
body.jeffy #topBar{background-image:linear-gradient(#c0b9b8cc,#646464cc 50%,#323232cc);}
body.jeffy #topBar button:active{background:linear-gradient(#1f1f1f,#191919);}
body.jeffy .top-separator{background-image:linear-gradient(90deg,#000 40%,#c6c5c4cc 65%);}
body.jeffy button,body.jeffy input,body.jeffy textarea,body.jeffy select{
	border-color:#420;
	accent-color:#f07800;
	background-color:#221200;
	text-shadow:0 -1px #000;
}body.jeffy select{background:#840;}
body.jeffy button,input[type='submit'],body.jeffy input[type='button'],body.jeffy input[type='reset']{
	border-color:#420;
	background-image:linear-gradient(#f07800cc,#840d,#420d,#221200dd);
	text-shadow:0 -1px #000;
}
body.jeffy input:not([type='submit'],[type='button'],[type='reset']):focus,body.jeffy textarea:focus{border-color:#840;}
body.jeffy dialog#uiAlert,body.jeffy #accessibilityFlyout{background:linear-gradient(#f07800cc,#630c);}
body.jeffy .bottom-section select{background:#840;}

/* Various media queries and stuff */
@media(max-width:760px){
	.top-logo,.you-are{display:none;} /* Disable logo on screen sizes less than 760px, except on the login page */
	.top-logo.login{display:flex;}
	#mainPanel{flex-direction:column;} /* Ensure sections stack vertically in mobile mode... not like the multi-section functionality is ever used though :P */
	section{width:auto;height:100%;align-items:revert;}
	.bottom-section p::before,.bottom-section p::after{display:initial;}
}
/* Rodents */
@media(pointer:fine){input[type="checkbox"]{width:17px;height:17px;}}
/* Touch-based devices */
@media(pointer:coarse){input[type="checkbox"]{width:27px;height:27px;}}
/* Reduced-motion users */
@media(prefers-reduced-motion){.stars,.star,g.logo{animation:none;}*{animation-play-state:paused!important;transition:none!important;}}
body.no-animation *,
body.no-animation *::before,
body.no-animation *::after{animation-play-state:paused!important;transition:none!important;}
body.no-animation .star,
body.no-animation g.logo,
body.no-animation #alertIcon{animation:none!important;}
/* Reduced-transparency users - TODO: work on these styles - there will probably be a lot to do if we're gonna account for every theme */
body.no-transparency *::backdrop,body.no-transparency .asbestos-overlay{background:#002244ee;}
body.no-transparency #topBar{background-image:linear-gradient(#048,#024 50%,#001222);}
body.no-transparency section{background:#000d;}
/* Users with blur disabled */
body.no-vfx *,
body.no-vfx *::before,
body.no-vfx *::after,
body.no-vfx *::backdrop{filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
body.no-vfx dialog#uiAlert::backdrop,body.no-vfx .asbestos-overlay{background:#0008;}

/* Easter eggs */
.asbestos-overlay{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background:#0004;
	backdrop-filter:blur(2px);
	-webkit-backdrop-filter:blur(1px);
	z-index:9999;
}.asbestos-funny{
	width:100%;
	height:100%;
	object-fit:contain;
	user-select:none;
	-webkit-user-select:none;
	filter:drop-shadow(0 2px 12px #000)drop-shadow(0 2px 12px #000)drop-shadow(0 2px 12px #000);
}.asbestos-stop-button{position:fixed;top:32px;left:64px;min-width:5%;scale:2;}

.the-voices{
	position:fixed;
	left:50%;
	width:256px;
	font-size:32px;
	font-family:SimSun,NSimSun,times,var(--standard-font);
	font-weight:100;
	letter-spacing:4px;
	font-style:italic;
	transform:translateX(-50%);
	overflow:hidden;
	white-space:nowrap;
	user-select:none;
	-webkit-user-select:none;
}.the-voices.help{animation:theVoices 1s ease-out forwards;}
@keyframes theVoices{
	from{width:256px;font-size:32px;}
	to{
		width:100%;
		font-size:14vw;
		opacity:0;
		letter-spacing:3vw;
	}
}

.school-bus{
	position:fixed;
	left:0;
	width:100%;
	height:64px;
	margin-top:8px;
	background-image:url(../img/schoolbus.svg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:150%;
	pointer-events:none;
	animation:busAnim 5s linear infinite;
}@keyframes busAnim{from{background-position:-156px;}to{background-position:125%;}}

.screenbug{
	position:fixed;
	bottom:2vw;
	right:2vw;
	width:16vw;
	height:14.5vw;
	background-image:url(../img/screenbug.svg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:bottom center;
	opacity:0.5;
	pointer-events:none;
	pointer-events:visiblePainted;
	transition:opacity 0.2s;
	z-index:-1;
}body.no-vfx .screenbug{bottom:calc(2vw + 34px);right:calc(2vw + 10px);z-index:0;} /* Counteract a stupid positioning bug where it suddenly decides it's a top-level element */
.screenbug:hover,body.no-transparency .screenbug{opacity:0.8;}
.screenbug.SKCro{background-image:url(../img/screenbug_SKCro.svg);}
body.red .screenbug:not(.jeffy),body.shadow .screenbug:not(.jeffy){filter:hue-rotate(145deg);}
body.green .screenbug:not(.jeffy){filter:hue-rotate(-64deg);}
body.black .screenbug:not(.jeffy){filter:saturate(0);}
body.jeffy .screenbug,.screenbug.jeffy{background-image:url(../img/screenbug_jeffy.svg);}

.rainbow-text{
	font-size:48px;
	font-weight:900;
	background:linear-gradient(90deg,#f00 0%,#ff9a00 10%,#d0de21 20%,#4fdc4a 30%,#3fdad8 40%,#2fc9e2 50%,#1c7fee 60%,#5f15f2 70%,#ba0cf8 80%,#fb07D9 90%,#f00 100%);
	background-size:25vw;
	background-position-x:0;
	background-clip:text;
	color:#0000;
	text-shadow:0 0;
	filter:drop-shadow(0 2px 1px #000810);
	animation:rainbowBGScroll 10s linear infinite;
	opacity:.9;
}@keyframes rainbowBGScroll{from{background-position-x:0vw;}to{background-position-x:100vw;}}