/* 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 website. */
*{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:SourceCode,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;
}
@font-face{
	font-family:SourceCode;
	src:url(SourceCode.ttf)format(truetype);
	font-weight:100 900;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:SourceCode;
	src:url(SourceCode-Italic.ttf)format(truetype);
	font-weight:100 900;
	font-style:italic;
	font-display:swap;
}

body{
	height:100vh;
	margin: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 */
	box-sizing:border-box;
	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:32px 0 0 0;}
h1{font-weight:900;font-size:4rem;}
h2{font-weight:800;font-size:3rem;}
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" */
}

.fade-in{
	margin:0;
	max-width:80vw;
	animation:fade-in 1s forwards;
	animation-delay:1s;
	opacity:0;
}.fade-in.text{animation-delay:5s;}
@keyframes fade-in{0%{opacity:0;}100%{opacity:0.8;}}

.coming-soon{
	justify-content:center;
	background:none;
	border:none;
	backdrop-filter:none;
}.coming-soon img{
	width:676px;
	max-width:80vw;
	height:208px;
	filter:drop-shadow(0 4px 8px #000810c0);
}

main{ /* Padding around main content area */
	display:flex;
	width:100%;
	height:100%;
	box-sizing:border-box;
	justify-content:space-between;
	padding:8px;
}
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);
}

/* Various media queries and stuff */
/* 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 */
body.no-transparency *::backdrop{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{background:#0008;}