---
title = "CSS Experiments"
layout = "base.njk"
---

<style>
.warning {
	display: none;
}

.warning + span {
	color: #3d4041;
	text-shadow: none;
	border: 1px solid #3d4041;
	border-radius: 0.25em;
	padding: 0 0.25em;
}

.warning:checked + span {
	color: pink;
	text-shadow: 0 0 4px red, 0 0 12px red;
	border: 1px solid pink;
	border-radius: 0.25em;
	box-shadow: 0 0 8px red;
	padding: 0 0.25em;
}
</style>
<p>Silly warning label. I've made it toggleable, because why not:
<label>
	<input type=checkbox class=warning checked />
	<span>MERCURY IN RETROGRADE</span>
</label>
</p>

<style>
.decor {
	user-select: none;
	z-index: -3
}
#background-moon {
	position: relative;
	font-size: 25rem;
	opacity: 10%;
	left: 40%;
	top: -0.4em;
	height: 0;
}
</style>
<div id=background-moon class=decor>🌔︎</div>
<p>The background moon here would ideally be an SVG (and one generated to match the current moon) since it shows as a giant moon emoji on phones and that's a weird background. I thought once about the Cryptic Command symbol from MTG, but decided against putting a symbol with fourfold rotational question marks on the front page.