@import url("https://cdn.jsdelivr.net/npm/@fontsource/titillium-web@5.3.0/index.css"); /* font */

:root {
	color-scheme: light dark; /* this enables the built-in light/dark theme */
}

body {
	max-width: 48rem;
	margin-inline: auto; /* this centers the page */
	padding-inline: 1rem;

	text-align: center; /* this centers the text */

	font-family: "Titillium Web", sans-serif;
	line-height: 1.5; /* adds a bit more spacing between text to make it look nicer */

	background-color: light-dark(rgb(157, 182, 250), rgb(3, 3, 70));
	background-image: url("./tile_stars2.png");

	color: light-dark(rgb(3, 3, 70), rgb(157, 182, 250));
}

main {
	position: relative;
	border: 2px solid currentColor; /* currentColor means text color, but you can replace that with any color! */
	background-color: light-dark(rgba(205, 217, 250), rgba(2, 2, 22));
	border-radius: 32px;
	padding: 1rem;
	margin-block: 1rem;
}

footer {
	background-color: rgba(255, 0, 0, 0.5);

	font-weight: bold;

	padding: 1rem;

	transition:
		background-color 0.25s,
		transform 0.25s;

	border-radius: 32px;

	&:hover {
		background-color: rgba(0, 0, 255, 0.5);
		transform: scale(1.1);
	}
}

details {
	background-color: light-dark(rgb(157, 182, 250), rgb(3, 3, 70));

	padding: 0.5rem;
	border-radius: 16px;

	&:hover {
		cursor: pointer;
	}
}

#adoburg,
#adosleep {
	position: fixed;
	top: 50%;
	translate: 0 -50%;
	width: 180px;
	border-radius: 16px;
	z-index: -2;
}

#adoburg {
	left: 2rem;
}

#adosleep {
	right: 2rem;
}