:root {
	--fg-color: #191E23;
	--bg-color: #C5C8C6;
	--dark: #191E23;
	--darker: #0f1419;
	--light: #C5C8C6;
	--blue-light: #9cdcfe;
	--blue-dark: #569bd4;
	--green-light: #b5cea8;
	--green-dark: #4ec9b0;
	--yellow: #dcdcaa;
	--red: #ce9178;
	--purple: #c586c0;
	--purple-dark: #543952;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg-color: rgb(195, 200, 205);
		--bg-color: rgb(25, 30, 35);
		--fg-light: rgba(25, 30, 35, 1);
		--bg-light: rgba(195, 200, 205, .25);
		--dark: #191E23;
		--darker: #0f1419;
		--light: #C5C8C6;
		--blue-light: #9cdcfe;
		--blue-dark: #569bd4;
		--green-light: #b5cea8;
		--green-dark: #4ec9b0;
		--yellow: #dcdcaa;
		--red: #ce9178;
		--purple: #c586c0;
		--purple-dark: #543952;
	}
}

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

html {
	font-size: 10px;
}



body { padding: 2rem; background: var(--bg-color); color: var(--fg-color); font-size: 1.6rem; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
p, ul, ol, h1, h2, h3, h4, h5, h6, table, figure { margin: 2rem 0; }
ul, ol { padding: 0 0 0 2rem; }
h1 { font-size: 2rem; }
input, button { padding: 1rem; border-radius: .5rem; border: 0 none; }
input { background: var(--bg-light); color: var(--fg-light) }
button, .button, .btn { background: var(--fg-color); color: var(--bg-color); font-weight: bold; }
img { width: 100%; height: auto; }

.info { border: .1rem solid var(--bg-light); padding: 2rem; border-radius: .5rem; text-align: center; margin: 2rem 0; }
.itemList { border: .1rem solid var(--bg-light); padding: 2rem 2rem 2rem 4rem; border-radius: .5rem; margin: 2rem 0; }
.condensed { max-width: 90rem; margin: 0 auto; }


@media (min-width: 960px) {
	body { padding: 5rem; font-size: 1.8rem;  }
	h1 { font-size: 4rem; }
}