:root {
	--bottom-glow: radial-gradient(farthest-corner at bottom center,	rgba(255, 255, 255, 0.7),	transparent);
	--stripes: repeating-linear-gradient(to bottom, #eee 0px, #eee 2px, #fff 2px, #fff 4px);
}

body {
	background: var(--stripes);
	height: 100dvh;
	width: 100dvw;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

button.aero {
	/* Colors */
	--hue: 245;
	--button-background: oklch(75% 0.1 var(--hue) / 0.8);
	--bg-dark: oklch(45% 0.1 var(--hue) / 0.75);
	--button-foreground: oklch(15% 0.05 var(--hue));
	/* Style */
	background-color: var(--button-background);
	background: var(--bottom-glow),	linear-gradient(to bottom, var(--bg-dark), var(--button-background));
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
	border: 1px solid var(--button-background);
	border-radius: 9999px;
	cursor: pointer;
	margin: 1em 1ex;
	padding: 1ex 1em;
	position: relative;
	text-shadow: 0 2px .5em #0003;
	transition: all 300ms;
	/* Text */
	color: var(--button-foreground);
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lunasima", sans-serif;
	font-weight: 700;

	&::after {
		content: "";
		position: absolute;
		top: 4%;
		left: 0.5em;
		width: calc(100% - 1em);
		height: 40%;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
		border-radius: 9999px;
		transition: background 400ms;
	}

	&:hover,
	&:focus {
		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4)
	}

	&:active {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	}
}

input#hue {
	appearance: none;
	background: linear-gradient(to right in oklch longer hue, oklch(75% 0.1 0), oklch(75% 0.1 360));
	border-radius: 9999px;
}