:root {
	--red: 100;
	--green: 100;
	--blue: 100;
	--rgb: rgb(var(--red), var(--green), var(--blue));
	--hue: 180;
	--sat: 50%;
	--lig: 50%;
	--hsl: hsl(var(--hue), var(--sat), var(--lig));
}

body {
	margin: 0;
}
header {
	background-color: black;
	color: white;
	overflow: auto;
}
h1 {
	max-width: 600px;
	margin: 1em auto;

}

main {
	display: grid;
	grid-template-columns: 1fr 2fr;
	max-width: 600px;
	margin: 1em auto;
	grid-gap: 2em;
}

.inputs {
	display: grid;
	grid-template-columns: 1fr 3fr;
	padding: 1em 0;
}

.rgb {
	background-color: var(--rgb);
}

.hsl {
	background-color: var(--hsl);
}