:root {
	--page-width: 1920px;
	--page-height: 1080px;
	--text: #000;
	--link-text: #32556a;
	--link-hover: #131745;
	--shadow: drop-shadow(4px 4px 3px #21120c88);
	--paper-color: #fff;
	--cursor: url("cursor_arrow.png"), auto;
	--cursor-pointer: url("cursor_pointer.png"), auto;
}

body {
	background: #000;
	font-family: 'Halogen', 'Comic Sans MS', 'Comic Sans', sans-serif;
}

/* color adjustment layers */
.effect-layers.el-1 { background: #f00; mix-blend-mode: saturation; opacity: .2; }

.page-settings {
	--open-button-fill: none;
	--open-button-background: none;
	--open-button-border: none;
	--background: var(--paper-color);
	--border: none;
	--outline: 0px;
	--color: var(--text);
	--accent: var(--text);
}
#page-settings-button {
	width: max(50px, min(25vw, 150px));
	padding: 0; margin: 0;
}
#page-settings-button .paper-popout {
	line-height: initial;
	right: calc(100% - 22px);
	span { padding-right: calc(.5em + 22px); }
}
#page-settings-contents {
	border-radius: 0;
	filter: var(--shadow);
	padding-top: 1.5em;
	label { font-weight: bold; }
	button { color: var(--link-text); }
	button:hover { color: var(--link-hover); }
}

#intro {
	position: absolute;
	z-index: 900;
	left: 180px; top: 100px;
	display: block;
	font-size: 32px;
	color: #text;
	background: var(--paper-color);
	padding: 1em;
	p { margin: 0; }
}

.sticker, #credit-button.sticker {
	filter: drop-shadow(1px 1px 2px #21120c77);
}

.water-blob {
	position: absolute;
	width: 900px; height: 900px;
	background-image: url('/graphix/bg/water.jpg'),
										url('/graphix/bg/pool_tiles.jpg'),
										none;
	background-blend-mode: hard-light;
	background-size: 300px, 400px;
	mask: url('clip-paths/water-blob.svg');
}

#garfield:hover img, #garfield:focus img, #garfield:focus-visible img { scale: 1.1; }