:root {
	--page-width: 1920px;
	--page-height: 1400px;
	--text: #000;
	--link-text: #32556a;
	--link-hover: #131745;
	--shadow: drop-shadow(4px 4px 3px #21120c88);
	--paper-color: #fff;
	--cursor: url("/graphix/cursors/toy_arrow_red.png"), auto;
	--cursor-pointer: url("/graphix/cursors/toy_arrow_blue.png"), auto;
	--font-halogen: 'Halogen', 'Comic Sans MS', 'Comic Sans', sans-serif;
}

body {
	background: #000;
	background-image: url('/graphix/bg/cool_star_flash.gif');
	font-family: var(--font-halogen);
}

/* 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); }
}

.paper-popout {
	span {
		display: flex;
		background-image: url('images/polkadot_ribbon.png');
		font-family: var(--font-halogen);
		font-weight: bold;
		user-select: none;
		padding-top: none; padding-bottom: none;
	}
	&:not(.left) span {
		clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%);
	}
	&.left span {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 10% 50%);
	}
}

#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);
}

.blob {
	position: absolute;
	aspect-ratio: 1;
}
#water-blob {
	width: 900px;
	background-image: url('/graphix/bg/water.png'),
										url('/graphix/bg/pool_tiles.jpg'),
										none;
	background-blend-mode: hard-light;
	background-size: 300px, 400px;
	mask: url('clip-paths/water-blob.svg');
}
#perler-blob {
	width: 700px;
	background-image: url('/graphix/bg/perler_smiles_green.png');
	background-size: 300px;
	mask: url('clip-paths/perler-blob.svg');
}
#fur-blob {
	width: 1000px;
	background-image: url('/graphix/bg/fauxfur_white.jpg');
	background-size: 300px;
	mask: url('clip-paths/mats_blob.svg');
}

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