/* @import url('/assets/css/theme.css'); */

/* originally theme.css */
:root {
	--background-color-darker: rgb(93, 12, 6);
	--background-color: rgb(136, 17, 9);
	--background-color-lighter: rgb(187, 27, 16);
	--max-content-width: 684px;
	--table-alternate-color: rgba(255, 255, 255, .05);
	--border-color: #ffffff66;
	--content-padding: 1rem 2rem;
	--header-height: 4rem;
	--border-radius: 8px;
}

@media screen and (max-width: 640px) {
	:root {
		--content-padding: .5rem 1.5rem;
	}
}
@media screen and (min-width: 1280px) {
	:root {
		--max-content-width: 896px;
	}
}
@media screen and (min-width: 1280px) {
	:root {
		--max-content-width: 896px;
	}
}
/* ==================== */

* {
	box-sizing: border-box;
	color: inherit;
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html, body {
	background-color: var(--background-color);
	min-height: 100%;
	margin: 0px !important;
	color: white;
}

p {
	line-height: 1.6rem;
}

button,
select {
	cursor: pointer;
}

.content {
	padding: var(--content-padding);
	max-width: var(--max-content-width);
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	margin-bottom: 2rem;
}
/* because a top margin is already applied, if the first child also has a margin-top, there will be too much space */
/* when the first few children are arranged horizontally, this messes things up, and needs to be overridden */
.content > *:first-child {
	margin-top: 0px;
}
.content > *:last-child {
	margin-bottom: 0px;
}

page-layout {
	min-height: 100%;
	display: block;
}

/* the most convenient way to center an element horizontally and vertically in CSS (without grid) */
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.rounded {
	border-radius: var(--border-radius);
	/* hide everything that overflows out of the rounded border, so it actually look rounded */
	overflow: hidden;
}