@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ysabeau+Infant&display=swap');

:root {
	--font-size-icon: 1.6em;
	--border-radius: 8px;
}

:root:has(.dark) {
	--primary-color: #333;
	--primary-color-dark: #222;
	--primary-color-light: #ddd;
	--accent-color: limegreen;
}

:root:has(.light) {
	--primary-color: #ccc;
	--primary-color-dark: #ddd;
	--primary-color-light: #333;
	--accent-color: forestgreen;
}

body {
	background-color: var(--primary-color-dark);
	color: var(--primary-color-light);
	font-family: 'Montserrat', sans-serif;
	text-align: center;

	transition-property: background-color, color;
	transition-duration: 500ms;

	/* display: flex; */
	/* justify-content: center; */
	/* align-items: center; */
}

main {
	background-color: var(--primary-color);
	border-radius: var(--border-radius);

	max-width: 400px;
	width: 60%;
	margin: 4em auto;
	padding: 2em;
}

.icon {
	font-size: var(--font-size-icon);
}

@media (width > 48em) {
	main {
		max-width: 800px;
		width: 75%;
	}
}