:root {
	--background: rgb(10,10,10);
	--background-card: rgb(30,30,30);
	/* --background: rgb(30,30,30);
	--background-card: rgb(10,10,10); */
	--color: rgb(245,245, 245);
	--muted: rgb(128, 128, 128);
	--border: rgb(64, 64, 64);
}

* {
	box-sizing: border-box;
}

body {
	background: var(--background);
	color: var(--color);
	margin: 0;
	font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.main {
	max-width: 1200px;
	margin: 0 auto;
}

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

.border {
	border: 1px solid var(--border);
}

.normal-border-radius, .border-radius-normal {
	border-radius: 1rem;
}

.large-border-radius, .border-radius-large {
	border-radius: 2rem;
}

.font-2x {
	font-size: 2rem;
}



.font-small {
	font-size: 0.8rem;
}

.font-1p5 {
	font-size: 1.5rem;
}

.font-bold {
	font-weight: bold;
}

.font-muted {
	color: var(--muted);
}

.normal-padding, .padding-normal {
	padding: 1rem;
}

.normal-horizontal-padding, .padding-horizontal-normal {
	padding-left: 1rem;
	padding-right: 1rem;
}

.large-vertical-padding, .padding-vertical-large {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.large-padding, .padding-large {
	padding: 2rem;
}

.grid-2-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-normal-gap, .flex-gap-normal {
	gap: 1rem;
}

.flex-row {
	display: flex;
}

.space-between {
	justify-content: space-between;
}

.align-center {
	align-items: center;;
}

.justify-center {
	justify-content: center;
}

.width-100 {
	width: 100%;
}

.margin-top {
	margin-top: 1rem;
}

.margin-top-2 {
	margin-top: 2rem;
}

.margin-bottom {
	margin-bottom: 1rem;
}

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

.grid-mobile-1-column {
	@media screen and (max-width: 800px) {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

.flex-mobile-column-reverse {
	@media screen and (max-width: 800px) {
		flex-direction: column-reverse;
	}
}