:root {

	/* values */

	--red  : #6b1c2a;
	--green: #2d4a3e;
	--blue : #1a2634;
	--white: #ffffff;

	--r-s   : .5rem;
	--r-l   : 2rem;
	--r-xl  : 5rem;
	--r-full: 9999px;

	--serif     : serif;
	--sans-serif: sans-serif;

	/* variables to use in the styles */
	--c: var(--white);
	--bg: var(--red);
	--r : 0;
	--ff: var(--serif);

}

html[data-theme="green"] {
	--bg: var(--green);
}

html[data-theme="blue"] {
	--bg: var(--blue);
}

html[data-r="s"] {
	--r: var(--r-s);
}

html[data-r="l"] {
	--r: var(--r-l);
}

html[data-r="xl"] {
	--r: var(--r-xl);
}

html[data-r="full"] {
	--r: var(--r-full);
}

html[data-ff="ss"] {
	--ff: var(--sans-serif);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	align-items: center;
	background-color: var(--bg);
	color: var(--c);
	display: flex;
	flex-direction: column;
	font-family: var(--ff);
	gap: 1rem;
	justify-content: center;
	min-height: 100vh;
	padding: 2rem;
}

img {
	border-radius: var(--r);
	max-width: 48rem;
	height: auto;
	display: block;
	width: 100%;
}

html[data-r="full"] img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	max-width: 24rem;
}