body {
	margin: 0;
	padding: 0;
	display: none; /* Hide the body content initially */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	font-family: 'Arvo', serif;
	background-color: #e0e0e0;
	transition: background-color 0.3s;
}

h1.logo {
	font-size: 6rem;
	text-transform: lowercase;
	letter-spacing: -0.15em;
	-webkit-user-select: none;
	user-select: none;
	padding: 32px;
	box-sizing: content-box;
	margin: 0;
}

.logo-good {
	font-weight: 700;
	color: #d4a603;
}

.logo-brick {
	font-weight: 700;
	color: #d94433;
}

body.dark-mode .logo-good {
	color: #efbf04;
}

body.dark-mode .logo-brick {
	color: #ff4b33;
}

.logo-letter {
	display: inline-block;
	position: relative;
	transition: transform 0.1s ease;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.logo-letter:hover,
.logo-letter.pop {
	z-index: 1000;
}

.logo-good > .logo-letter:hover {
	transform: rotate(2deg) scale(1.25);
}

.logo-brick > .logo-letter:hover {
	transform: rotate(-2deg) scale(1.25);
}

/* .logo-good:hover > .logo-letter {
	transform: rotate(2deg) scale(1.25);
}

.logo-brick:hover > .logo-letter {
	transform: rotate(-2deg) scale(1.25);
} */

.logo-good > .logo-letter.pop {
	transform: rotate(5deg) scale(1.75);
}

.logo-brick > .logo-letter.pop {
	transform: rotate(-5deg) scale(1.75);
}

#controls {
	position: absolute;
	top: 20px;
	right: 20px;
	gap: 10px;
	display: none;
}

.controls-emoji-button {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 5px;
	border-radius: 50%;
	transition: background-color 0.3s ease;
}

.controls-emoji-button:hover {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.1);
}

.controls-emoji-button:focus {
	outline: none;
	background-color: rgba(0, 0, 0, 0.1);
}

body.dark-mode {
	background-color: #1a1a1a;
}

body.dark-mode .logo-letter {
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

body.dark-mode .controls-emoji-button:hover {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
	background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .controls-emoji-button:focus {
	outline: none;
	background-color: rgba(255, 255, 255, 0.1);
}