:root {
	--brand: hsl(337 77% 63%);
}
:where(html) {
  --csstools-color-scheme--light: ;
	--link: var(--indigo-3);
	--link-visited: var(--purple-3);
	--text-1: var(--gray-1);
	--text-2: var(--gray-4);
	--surface-1: var(--gray-9);
	--surface-2: var(--gray-8);
	--surface-3: var(--gray-7);
	--surface-4: var(--gray-6);
	--scrollthumb-color: var(--gray-6);
	--shadow-strength: 10%;
	--shadow-color: 220 40% 2%;
	color-scheme: dark;
}
body {
	padding: 1rem;
}
header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.logo {
	inline-size: 32rem;
}

.align-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.content-wrap {
	padding: 5rem 2rem;
	max-inline-size: 100rem;
	margin-inline: auto;

	& > * + * {
		margin-block-start: 1rem;
	}
}

.box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 4rem;
	padding: 2rem;

	& img {
		max-inline-size: 30rem;
	}
}

.mini-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 2rem;
	padding: 1rem;
}

.emoji {
	--size: var(--size-8);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .5rem;
	text-decoration: none;
	block-size: var(--size);
	inline-size: var(--size);
	font-size: 2.5em;
	color: var(--link);

	&:is(:hover, :focus-visible) {
		outline: 2px solid var(--brand);
		border-radius: var(--radius-2);
	}

	&:visited {
		color: var(--link);
	}
}
.code {
	block-size: auto;
	inline-size: auto;
}
@keyframes spinner {
	to { transform: rotate(360deg); }
}
.animated .emoji {
  animation: spinner 2s linear infinite;

	&:nth-child(3n+1) {
		animation-direction: reverse;
	}
}
.switch {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;

	& > * {
		padding: 0;
	}
	& :last-child {
		display: none;
	}

	&:focus-visible {
		& :first-child {
			display: none;
		}
		& :last-child {
			display: block;
		}
	}
}

pre.secret {
	max-inline-size: var(--size-content-4);
	letter-spacing: 1rem;
	white-space: wrap;
	word-break: break-all;

	&::selection {
		color: var(--surface-1);
		background-color: var(--surface-1);
	}

	& span {
		letter-spacing: 0;
		padding-inline-end: 1rem;

		&::selection {
			color: var(--brand);
			background-color: var(--surface-1);
		}
	}
}

.bag {
	display: flex;
}
.bag input[type="checkbox"] {
	position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.bag-item {
	padding: .25rem;
}
#sandwich:checked ~ .bag-item:has([for="sandwich"]),
#newspaper:checked ~ .bag-item:has([for="newspaper"]),
#mirror:checked ~ .bag-item:has([for="mirror"]),
#wood:checked ~ .bag-item:has([for="wood"]),
#candy:checked ~ .bag-item:has([for="candy"]),
#candle:checked ~ .bag-item:has([for="candle"]),
#notebook:checked ~ .bag-item:has([for="notebook"]) {
	outline: 2px solid var(--green-7);
	border-radius: var(--radius-2);
}

.dark {
	color: var(--surface-1);
	-webkit-user-select: none; /* Safari fix */
	user-select: none;
	inline-size: 100%;
}

.bag:has(#sandwich:not(:checked) + #newspaper:checked + #wood:checked + #mirror:not(:checked) + #candy:not(:checked) + #candle:checked + #notebook:not(:checked)) + .dark {
	color: var(--text-1);
	user-select: initial;

	& .fire-wrapper {
		visibility: visible;
	}
}

.fire-wrapper {
	visibility: hidden;
	position: relative;
	inline-size: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-inline: 2px;
	row-gap: 2rem;
}
.fire {
	flex: 0 0 100px;
	block-size: auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5em;
}
.blank {
	visibility: hidden;
}

form {
	display: flex;
	gap: 1rem;
}

.error strong {
	color: var(--red-9);
}