:root {
	--mono-purple: #c695e8;
	--mono-yellow: #fffe72;
	--mono-red: #db6f6f;
	--mono-blue: #609dff;
	--mono-dark-blue: #2f6aca;
	--mono-pink: #fe6cfe;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

main {
	background-color: var(--mono-blue);
	background-image: url('/bday2024/ui/mono_background.webp');
	background-size: contain;

	text-align: center;
	font-family: 'Comic Sans MS', 'Comic Sans';
	font-size: 1.5em;
	font-weight: bold;
	text-shadow:
		-1px 0 5px var(--mono-purple),
		0 1px 5px var(--mono-purple),
		1px 0 5px var(--mono-purple),
		0 -1px 5px var(--mono-purple);

	cursor: url('/bday2024/ui/brush_cursor.png'), auto;

	padding-top: 50px;
}

a,
a:hover {
	cursor: url('/bday2024/ui/brush_cursor_hover.png'), auto;
}

.cibo-kiss {
	height: auto;
	pointer-events: none;
	position: absolute;
	width: auto;
	z-index: 1;
}

p::first-letter {
	font-size: 2em;
	color: var(--mono-yellow);
}

li > b {
	font-size: 1.5em;
	color: var(--mono-red);
}

b::first-letter {
	font-size: 1.75em;
	color: var(--mono-yellow);
}

p,
span,
ul,
li {
	color: var(--mono-dark-blue);
}

.text-content {
	width: 80%;
	max-width: 800px;
	background: #fe6cfe;
	background-attachment: local;
	text-align: center;
	border: 5px outset var(--mono-yellow);
	background-image: url('/bday2024/ui/rainbow_pattern.webp');
	margin-bottom: 50px;
	padding: 15px;
	position: relative;
	box-shadow: 10px 10px 25px #609dff;
}

.title_hydrangea {
	width: 80%;
	max-width: 800px;
	min-width: 600px;
	background-image: url('/bday2024/ui/flower_background.png');
	background-attachment: local;
	margin: 0 auto 50px auto;
	text-align: center;
	align-items: center;
	border: 5px outset #29adff;
	padding: 15px;
	box-shadow: 10px 10px 25px #fe77a8;
}

#cibo-list {
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.cibo-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;
	background-color: var(--mono-purple);
	border: 5px ridge #9758c0;
	padding: 0.5rem 4rem;
}

.cibo-message > img {
	padding: 2rem 0;
}

.cibo-message > h2 {
	margin: 0;
	text-shadow: none;
}

#container {
	margin-left: 20%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

#sidebar {
	height: 100%;
	width: 20%;
	min-width: 200px;
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #cb91e5;
	background-image: url('/bday2024/ui/confetti.gif');
	border-right: 5px ridge #9758c0;
	top: 0px;
	left: 0px;
	float: left;
	padding: 15px;
	box-shadow: 10px 0px 25px #9758c0;
}

@media (max-width: 1400px) {
	.spinning-flower-image {
		display: none;
	}
	#cibo-hello {
		display: none;
	}
}