main.css

/* Variable overrides */
:root {
	--reactpy-color: #58b962;
	--reactpy-color-dark: #42914a;
	--reactpy-color-darker: #34743b;
	--reactpy-color-opacity-10: rgba(88, 185, 98, 0.1);
}

[data-md-color-accent="red"] {
	--md-primary-fg-color--light: var(--reactpy-color);
	--md-primary-fg-color--dark: var(--reactpy-color-dark);
}

[data-md-color-scheme="slate"] {
	--md-default-bg-color: rgb(35, 39, 47);
	--md-default-bg-color--light: hsla(var(--md-hue), 15%, 16%, 0.54);
	--md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 16%, 0.26);
	--md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 16%, 0.07);
	--md-primary-fg-color: var(--md-default-bg-color);
	--md-default-fg-color: hsla(var(--md-hue), 75%, 95%, 1);
	--md-default-fg-color--light: #fff;
	--md-typeset-a-color: var(--reactpy-color);
	--md-accent-fg-color: var(--reactpy-color-dark);
}

[data-md-color-scheme="default"] {
	--md-primary-fg-color: var(--md-default-bg-color);
	--md-default-fg-color--light: #000;
	--md-default-fg-color--lighter: #0000007e;
	--md-default-fg-color--lightest: #00000029;
	--md-typeset-color: rgb(35, 39, 47);
	--md-typeset-a-color: var(--reactpy-color);
	--md-accent-fg-color: var(--reactpy-color-dark);
}

/* Font changes */
.md-typeset {
	font-weight: 300;
}

.md-typeset h1 {
	font-weight: 600;
	margin: 0;
	font-size: 2.5em;
}

.md-typeset h2 {
	font-weight: 500;
}

.md-typeset h3 {
	font-weight: 400;
}

/* Intro section styling */
p.intro {
	font-size: 0.9rem;
	font-weight: 500;
}

/* Hide "Overview" jump selector */
h2#overview {
	visibility: hidden;
	height: 0;
	margin: 0;
	padding: 0;
}

/* Reduce size of the outdated banner */
.md-banner__inner {
	margin: 0.45rem auto;
}

/* Desktop Styles */
@media screen and (min-width: 60em) {
	/* Remove max width on desktop */
	.md-grid {
		max-width: none;
	}
}

/* Max size of page content */
.md-content {
	max-width: 56rem;
}