@font-face {
	font-display: swap;
	font-family: "Satoshi";
	font-style: normal;
	font-weight: 400;
	src: local(""),
		url("./fonts/Satoshi-Regular.woff2") format("woff2"),
		url("./fonts/Satoshi-Regular.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-family: "Satoshi";
	font-style: normal;
	font-weight: 700;
	src: local(""),
		url("./fonts/Satoshi-Bold.woff2") format("woff2"),
		url("./fonts/Satoshi-Bold.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-family: "Gambarino";
	font-style: normal;
	font-weight: 400;
	src: local(""),
		url("./fonts/Gambarino-Regular.woff2") format("woff2"),
		url("./fonts/Gambarino-Regular.woff") format("woff");
}

:root {
	--dark: 12, 21, 31;
	--light: 254, 225, 194;
	--theme: 255, 158, 173;
	--theme-secondary: 255, 190, 61;
	--pad: 7vw;
	--sans-serif: "Satoshi", "Inter", "Helvetica Neue", Arial,
		sans-serif;
	--serif: "Gambarino", "Baskerville", serif;

	--background: var(--light);
	--color: var(--theme);
	--text: var(--dark);
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: var(--dark);
		--color: var(--theme);
		--text: var(--light);
	}
}

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	background: rgba(var(--background), 1);
	color: rgba(var(--text), 1);
	font-family: var(--sans-serif);
	font-size: clamp(1.1em, 4vw, 1.75em);
	line-height: 1.65;
	margin: 0;
	word-wrap: break-word;
	padding: 5vw;
}

*:focus-visible {
	outline: .2em dotted blue;
	/* outline-offset: .1em; */
}

@media (prefers-color-scheme: dark) {
	*:focus-visible {
		outline-color: gold;
	}
}

header,
main {
	max-width: 42ch;
	margin: auto;
}

h1,
h2 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.1;
}

h1 {
	text-align: center;
	text-decoration: underline;
	text-decoration-color: rgba(var(--theme), 1);
	text-decoration-style: wavy;
}

a {
	color: rgba(var(--text), 1);
	text-decoration-color: mediumblue;

	@media (prefers-color-scheme: dark) {
		text-decoration-color: #e4485b;
	}

	&[href^="http"]::after {
		content: " ↗";
		color: rgba(var(--color), 1);

		@media (prefers-color-scheme: dark) {
			color: gold;
		}
	}
}

form {
	background-color: rgba(var(--theme), .5);
	border-radius: 2.5vw;
	padding: 2vw 5vw 5vw;
	margin-top: 5vw;
}

@media (prefers-color-scheme: dark) {
	form {
		background-color: rgba(var(--theme), .9);
		--text: var(--dark);
		--background: var(--light);
	}
}

legend,
h2 {
	color: rgb(var(--text));
}

label {
	color: rgb(var(--text));
	margin: 1em 0 .2em;
}

input[type=text] {
	background: rgba(var(--background), 1);
	border: 4px solid rgba(var(--theme-secondary), 1);
	border-radius: .5em;
	display: block;
	font-size: 1em;
	font-family: inherit;
	padding: .5em;
}

fieldset {
	background-color: rgba(var(--theme-secondary), 1);
	border: .1em solid rgba(var(--text), .4);
	border-radius: .5em;
	margin: 1em 0;
}

fieldset div {
	display: inline-block;
}

.calendar {
	margin-top: 3em;
	text-align: center;
}

.calendar + p,
.calendar + p + p {
	font-size: 1.25em;
	text-align: center;
}

button {
	background-color: rgba(var(--text), 1);
	border-radius: .4em;
	border: none;
	box-shadow: 0 .1em .3em rgba(0, 0, 0, .1),
		inset 0 0 .2em rgba(var(--background), .2);
	color:rgba(var(--background), 1);
	font-family: inherit;
	font-size: 1em;
	font-weight: bold;
	margin-top: 1em;
	padding: .6em 1em;
	text-shadow: 0 .05em .1em rgba(var(--background), .2);
	transition: all 150ms cubic-bezier(.19,1,.22,1);
}

button:hover,
button:focus-visible {
	transform: translateY(-.12em);
	box-shadow: 0 .2em .4em rgba(0, 0, 0, .2),
		inset 0 0 .2em rgba(var(--background), .4);
}

button:active {
	transform: translate(0);
}

input[type="checkbox"] {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	/* Remove most all native input styles */
	appearance: none;
	/* Not removed via appearance */
	margin: 0;

	background: rgba(var(--light), 1);  
	font: inherit;
	color: currentColor;
	width: 1em;
	height: 1em;
	border: 0.1em solid rgba(var(--text), 1);
	border-radius: 0.15em;
  
	display: inline-grid;
	place-content: center;
}

input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	transform: scale(0);
	box-shadow: inset 1em 1em var(--form-control-color);
	background-color: rgba(var(--theme), 1);
}

input[type="checkbox"]:checked {
	background: rgba(var(--text), 1);
}

input[type="checkbox"]:checked::before {
	transform: scale(1);
}

input[type="checkbox"] + label {
	margin-right: 1em;
}

ul {
	list-style: none;
	padding-left: 2em;
	position: relative;
}

li {
	margin-bottom: .5em;
	line-height: 1.4;
	text-wrap: balance;
}

li::before {
	left: .2em;
	position: absolute;
}

li:nth-child(1)::before {
	content: "🕚"
}

li:nth-child(2)::before {
	content: "🏠"
}

li:nth-child(3)::before {
	content: "🎨"
}

li:nth-child(4)::before {
	content: "🎂"
}

li:nth-child(5)::before {
	content: "🎁"
}

.menu::before,
.menu::after {
	content: "👇";
}

.menu {
	display: flex;
	gap: 1em;
	list-style-type: none;
	justify-content: center;
	padding: 0;
	margin: .5em 0 2em;
}

.menu li::before {
	display: none;
}

.menu a {
	color: mediumblue;	
	text-decoration-color: rgba(var(--theme), 1);
}


@media (prefers-color-scheme: dark) {
	.menu a {
		color: rgba(var(--theme), 1);
		text-decoration-color: #e4485b;
	}
}

.center {
	text-align: center;
}