:root {
	--font-family-my-sans-serif: 'Open Sans', sans-serif;
	--font-family-my-serif: 'Vollkorn', serif;
	--light-gray: #e3e3e3;
	--darker-gray:#222;
	--h1-font-size:3rem;
	--h2-font-size:1rem;
	--text-size:1.2rem;
	--page-top-space:3rem;
	--page-body-width:100%;
	--page-body-padding:1rem;

}

input::placeholder {
	color:#ddd !important;
}

@media (min-width: var(--breakpoint-sm)) {

}

@media (min-width: 768px) {
	:root {
		--page-top-space:5rem;
		--page-body-width:40rem;
		--page-body-padding:0rem;
		--text-size:1.4rem;
		--h1-font-size:5rem;
		--h2-font-size:1.2rem;
	}
}

body.appearance-light {
	--main-text-color:var(--dark);
	--sub-text-color:var(--secondary);
	--light-text-color:var(--gray);
	--lighter-text-color:var(--light-gray);
	--faded-text-color:var(--light-gray);
	--footer-text-color:rgba(0,0,0,.25);
	--footer-bg-color:var(--light);
	--footer-border-color:rgba(0,0,0,.15);
	--page-bg-color:var(--white);
	--nav-bg-color:var(--white);
	--nav-toggler-bg-color:var(--white);
	--nav-border-color:var(--dark);
	--nav-button-text-color:var(--dark);
	--nav-button-border-color:var(--dark);
}

body.appearance-dark {
	--main-text-color:var(--white);
	--sub-text-color:var(--secondary);
	--light-text-color:var(--gray);
	--faded-text-color:var(--dark);
	--lighter-text-color:var(--light-gray);
	--footer-text-color:var(--light-text-color);
	--footer-bg-color:var(--darker-gray);
	--footer-border-color:rgba(255,255,255,.15);
	--page-bg-color:var(--darker-gray);
	--nav-bg-color:var(--darker-gray);
	--nav-toggler-bg-color:rgba(255,255,255,.75);
	--nav-border-color:var(--white);
	--nav-button-text-color:var(--white);
	--nav-button-border-color:var(--white);
}

body {
	font-family: var(--font-family-my-serif);
	background:var(--page-bg-color);
}

.mt-neg1 {
	margin-top:-1rem !important;
}

.white-space-nowrap {
	white-space:nowrap !important;
}

.navbar-light .navbar-toggler {
	background:var(--nav-toggler-bg-color);
}

nav.navbar div.navbar-collapse {
	x-margin-left:-1rem;
	x-margin-right:-1rem;
	x-margin-top:0.5rem;
	padding:1rem;
	background:var(--nav-bg-color);
	x-border-top: 1px solid var(--dark);
	border-bottom: 1px solid var(--nav-border-color);
	position:absolute;
	top:0;
	left:0;
	right:0;
}

nav.navbar div.navbar-collapse div.navbar-nav {
	margin-top: 0 !important;
	flex-direction: row;
	justify-content: space-between;
}

nav.navbar div.navbar-collapse div.navbar-nav button {
	x-margin-right:1rem;
}

nav.navbar div.navbar-collapse div.navbar-nav > div.header {
	display:none;
}

.btn-outline-navbar {
	background:transparent;
	border-color:var(--nav-button-border-color);
	color:var(--nav-button-text-color);
}


@media (max-width:767.98px) {
	nav.navbar div.navbar-collapse div.navbar-nav {
		flex-direction: column !important;
	}
	nav.navbar div.navbar-collapse div.navbar-nav > div {
		display:flex;
		flex-direction: column !important;
	}
	nav.navbar div.navbar-collapse div.navbar-nav > div > button {
		margin-bottom:0.5rem;
	}

	nav.navbar div.navbar-collapse div.navbar-nav > div.header {
		display:block;
	}
}

header.site {
	position:relative;
}

header.site.push-down {
	margin-top:4.5rem;
}

.big-parentheses {
	font-size: 6rem;
	color: var(--faded-text-color);
}

header.site figure.background {
	background: url(/images/bubbles_1.jpg);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-size: cover;
	background-position-y: 46%;
	opacity: .5;
	margin: 0;
	z-index: 1;
	filter:grayscale(1);
	-moz-filter:grayscale(1);
	-webkit-filter:grayscale(1);
}


header.site h1 {
	margin-bottom:0;
	font-size:var(--h1-font-size);
	font-weight: bold;
	padding-top:var(--page-top-space);
	position: relative;
	z-index: 2;
	color:var(--main-text-color);
}

header.site h2 {
	font-weight: normal;
	font-size:var(--h2-font-size);
	color:var(--white);
	padding-bottom:calc(var(--page-top-space) * 0.3);
	margin-bottom:calc(var(--page-top-space) * 0.3);
	position: relative;
	z-index: 2;
	text-shadow:0px 0px 5px rgba(0,0,0,1)
}

main.page-body {
	width:var(--page-body-width);
	font-size:var(--text-size);
	text-align:justify;
	-webkit-hyphens:auto;
	hyphens:auto;
	color:var(--main-text-color);
	padding-left:var(--page-body-padding);
	padding-right:var(--page-body-padding);
	margin-left:auto;
	margin-right:auto;
}

main.page-body article header {
	font-weight:bold;
	margin-bottom:calc(0.5 * var(--text-size));
	color:var(--main-text-color);
}

main.page-body article header h3 {
	font-weight:bold;
	font-size:1.5rem;
	margin-bottom:0.2rem;
	text-align: left;
}

main.page-body article header h4 {
	font-size: 1.1rem;
	color: var(--sub-text-color);
	margin-left: 2rem;
	font-style: italic;
}


article {
	padding-top:2rem;
	border-bottom:1px solid #ccc;
	padding-bottom:3rem;
}

article:last-child {
	border-bottom:none;
}

.dropcap {
	font-size: 7rem;
	line-height: 7rem;
	float: left;
	margin-right: 0.5rem;
	margin-bottom: -1rem;
}

footer.site {
	background: var(--footer-bg-color);
	margin-bottom: 0;
	padding: 1rem;
	border-top: 1px solid var(--footer-border-color);
	margin-top: 5rem;
	font-size:.75rem;
	color:var(--footer-text-color);
}

footer.site div a {
	color:var(--footer-text-color);
	text-decoration: underline;
}

button {
	font-family: var(--font-family-my-sans-serif);
	font-size:0.8rem;
}

.invite-text {
	font-family: 'Courier New','Courier',monospace;
	font-size:0.85rem;
}

.text-gray {
	color:var(--gray) !important;
}

.text-light {
	color:var(--light-text-color) !important;
}

.text-sans-serif {
	font-family: var(--font-family-my-sans-serif);
}

.text-small {
	font-size:1rem;
}

.text-smaller {
	font-size:0.8rem;
}

.bg-lightgray {
	background:#ddd;
}

.badge-pill-ring-border {
	border:5px double;
}