@charset "utf-8";

@import url("0000.css");

@font-face {
	src:
		local("Source Serif Pro"),
		url("/fonts/source-serif-pro.woff2");
	font-family: "Source Serif Pro";
	font-display: swap;
}
@font-face {
	src:
		local("Courier Prime"),
		url("/fonts/courier-prime.woff2");
	font-family: "Courier Prime";
	font-display: swap;
}
@font-face {
	src:
		local("Comic Neue"),
		url("/fonts/comic-neue.woff2");
	font-family: "Comic Neue";
	font-display: swap;
}

@keyframes background-scroll-x {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: 960px;
	}
}
@keyframes background-scroll-y {
	0% {
		background-position-y: 0;
	}
	100% {
		background-position-y: 960px;
	}
}

:root {
	--emoji-fonts: "";
	--fonts:
		"Source Serif Pro",
		"Times New Roman",
		serif,
		var(--emoji-fonts);
	--monospace-fonts:
		"Courier Prime",
		"Courier New",
		monospace,
		var(--emoji-fonts);
	--heading-fonts:
		"Comic Neue",
		"Comic Sans MS",
		sans-serif,
		var(--emoji-fonts);
	--background-image: #007F7F;
	--background-color: #007F00D8;
	--foreground-color: #FFFFFF;
	--subtle-color: #FFFFFF69;
	--accent-color: #FFFF00;
	--background-animation: none;
	--background-scroll-x: background-scroll-x 32s infinite linear;
	--background-scroll-y: background-scroll-y 32s infinite linear;
	--background-scroll-xy:
		background-scroll-x 45.254s infinite linear,
		background-scroll-y 45.254s infinite linear;
}

* {
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
	scrollbar-color: #888888 #C0C0C0;
	scrollbar-width: auto;
}

::selection {
	color: #FFFFFF;
	background: #00007F;
}

body {
	cursor: url("/images/cursors/default.png") 1 2, default;
	background: var(--background-image);
	animation: var(--background-animation);
}

.theme-1997 {
	display: block;
}

.page-wrapper {
	margin: 16px 0;
	border:
		var(--border-style)
		var(--border-width)
		var(--subtle-color);
	background: var(--background-color);
	box-shadow: 16px 16px var(--shadow-color);
}

@media (max-width: 745px) {
	body:not(.home) .page-wrapper {
		min-height: 100vh;
		margin: 0;
		border: none;
	}
}

h1, h2, h3, h4, h5, h6 {
	color: #FF99CC;
}

a, summary {
	cursor: url("/images/cursors/pointer.png") 5 1, pointer;
}

.breadcrumbs a {
	color: #00FF00;
}

.breadcrumbs a:first-child::before {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	content: url("/images/icons/globe.png");
}

.page-title a {
	color: #00FFFF;
}

.links a::before, summary::before {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-right: 8px;
	vertical-align: -8px;
	content: url("/images/icons/web-page.png");
}

.links a.page::before {
	content: url("/images/icons/document.png");
}
.links a.node::before {
	content: url("/images/icons/folder.png");
}
.links a.link::before {
	content: url("/images/icons/profile.png");
}

summary::before {
	content: url("/images/icons/more.png");
}
details[open] > summary::before {
	content: url("/images/icons/less.png");
}

.buttons {
	display: block;
	text-align: center;
}

.buttons img {
	width: 88px;
	height: 31px;
}

.music {
	--progress: 0%;
	--complete-color: #303030D8;
	--left-color: #101010D8;
	
	display: flex;
	align-items: center;
	padding: 0 5px;
	margin-bottom: 0.5em;
	border:
		var(--border-style)
		var(--border-width)
		var(--subtle-color);
	color: #00FF00;
	background: linear-gradient(to right,
		var(--complete-color),
		var(--complete-color) var(--progress),
		var(--left-color) var(--progress),
		var(--left-color)
	);
}

.music > *:not(:last-child) {
	margin-right: 5px;
}

.music audio {
	display: none;
}

.music button {
	padding: 13px;
	line-height: 0;
	border: none;
	cursor: inherit;
	background: none;
}

.music button img {
	width: 11px;
	height: 14px;
}

.music button:hover img {
	opacity: 0.5;
}

.music .song-name {
	margin: 0;
	font-size: 0.75em;
}

.music .song-name::after {
	content: ".mid";
}