* {
	--background: #2d2a35;
	--background-secondary: #3e3a48;
	--foreground: #fff;
	--accent-clubhouse: #39dbff;
	--accent-passers: #98ff98;
	--accent-rookies: #e66710;
	--accent-parkour: #00768d;
	--accent-competitive: #269cfe;
	--accent-mature: #fff;
	--accent-gwd: #ff86bf;
	--accent-discord: #5865f2;
	--font: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
		helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial,
		sans-serif;
}

html {
	height: 100%;
}

body {
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font);
	margin: 0;

	min-height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

nav {
	background-color: var(--background-secondary);
	box-shadow: 0 0 1em 0 #000;
	-webkit-box-shadow: 0 0 10px 0 #000;
	-moz-box-shadow: 0 0 10px 0 #000;
	padding: 1em;
	/*
		if its sticky then auto scroll will scroll too far so for now im leaving it like this
	*/
	/* position: sticky; */
	/* top: 0; */
}

.nav-title {
	margin: 0;
}

.nav-list {
	list-style: none;
	padding: 0;
}

.nav-item {
	display: inline;
	padding-right: 1em;
}

.nav-link {
	color: var(--foreground);
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1em;
	margin-top: 0;
}

section {
	width: 100%;
	max-width: 1000px;
}

.title {
	font-size: 2em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.cards {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.card {
	background-color: var(--background-secondary);
	padding: 1em;
	padding-top: 0.8em;
	border-radius: 1em;
}

.card-title {
	margin-bottom: 0.5em;
}
.card-title.clubhouse-accent {
	border-bottom: 0.2em var(--accent-clubhouse) solid;
}
.card-title.passers-accent {
	border-bottom: 0.2em var(--accent-passers) solid;
}
.card-title.rookies-accent {
	border-bottom: 0.2em var(--accent-rookies) solid;
}
.card-title.parkour-accent {
	border-bottom: 0.2em var(--accent-parkour) solid;
}
.card-title.competitive-accent {
	border-bottom: 0.2em var(--accent-competitive) solid;
}
.card-title.mature-accent {
	border-bottom: 0.2em var(--accent-mature) solid;
}
.card-title.gwd-accent {
	border-bottom: 0.2em var(--accent-gwd) solid;
}
.card-title.discord-accent {
	border-bottom: 0.2em var(--accent-discord) solid;
}

.card-title-icon {
	width: 1.5em;
	vertical-align: text-bottom;
	display: inline;
}

.card-title-text {
	margin: 0;
	display: inline;
}

.card-description {
	margin: 0;
}

.link-button {
	background-color: var(--background);
	color: var(--foreground);
	padding: 0.25em;
	border-radius: 0.25em;
	width: fit-content;
	display: block;
}

footer {
	background-color: var(--background-secondary);
	box-shadow: 0 0 1em 0 #000;
	-webkit-box-shadow: 0 0 10px 0 #000;
	-moz-box-shadow: 0 0 10px 0 #000;
	padding: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2em;
}

footer p {
	margin: 0;
}