:root {
	--DropdownMaxHeight: 300px;
}

/*******************************************************************************
**** font stuff ***************************************************************/

.font-family-monotype { font-family: monospace; }
.font-family-normal { font-family: 'Segoe UI', 'Helvetica', sans-serif; }

.font-size-reset         { font-size: 1.0rem; }
.font-size-mostest-small { font-size: 0.44em; }
.font-size-most-small    { font-size: 0.52em; }
.font-size-smallerest    { font-size: 0.60em; }
.font-size-smallerer     { font-size: 0.68em; }
.font-size-smallest      { font-size: 0.76em; }
.font-size-smaller       { font-size: 0.84em; }
.font-size-small         { font-size: 0.92em; }
.font-size-normal        { font-size: 1.00em; }
.font-size-large         { font-size: 1.20em; }
.font-size-larger        { font-size: 1.40em; }
.font-size-largest       { font-size: 1.60em; }
.font-size-largerer      { font-size: 1.80em; }
.font-size-largerest     { font-size: 2.00em; }
.font-size-most-large    { font-size: 2.40em; }
.font-size-mostest-large { font-size: 2.80em; }

.letter-space-reset             { letter-spacing:  0.0rem; }
.letter-space-literally-space   { letter-spacing:  0.80em; }
.letter-space-mostest-loose     { letter-spacing:  0.54em; }
.letter-space-most-loose        { letter-spacing:  0.48em; }
.letter-space-looserest         { letter-spacing:  0.40em; }
.letter-space-looserer          { letter-spacing:  0.32em; }
.letter-space-loosest           { letter-spacing:  0.24em; }
.letter-space-looser            { letter-spacing:  0.16em; }
.letter-space-loose             { letter-spacing:  0.08em; }
.letter-space-normal            { letter-spacing:  0.00em; }
.letter-space-tight             { letter-spacing: -0.04em; }
.letter-space-tighter           { letter-spacing: -0.08em; }
.letter-space-tightest          { letter-spacing: -0.12em; }
.letter-space-tighterer         { letter-spacing: -0.16em; }
.letter-space-tighterest        { letter-spacing: -0.20em; }
.letter-space-most-tight        { letter-spacing: -0.24em; }
.letter-space-mostest-tight     { letter-spacing: -0.28em; }
.letter-space-literally-nothing { letter-spacing: -0.42em; }

.line-height-normal { line-height: 1em; }

.text-align-right { text-align: right; }
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }

.text-overline { text-decoration: underline; }
.text-underline { text-decoration: underline; }
.text-underline-none { text-decoration: none; }
.text-muted { color: #7d7d7d !important; }
.text-decoration-none { border-bottom: 0px !important; text-decoration: none !important; }

.text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.white-space-nowrap { white-space: nowrap; }
.white-space-lines { white-space: pre-line; }

.user-select-none { user-select: none; }
.user-select-normal { user-select: all; }

.fw-bold { font-weight: 600 !important; }
.fw-bolder { font-weight: 900 !important; }

@media (max-width: 991.9px) {
	.font-size-mostest-small { font-size: 0.44em; }
	.font-size-most-small    { font-size: 0.52em; }
	.font-size-smallerest    { font-size: 0.60em; }
	.font-size-smallerer     { font-size: 0.68em; }
	.font-size-smallest      { font-size: 0.76em; }
	.font-size-smaller       { font-size: 0.84em; }
	.font-size-small         { font-size: 0.92em; }
	.font-size-normal        { font-size: 1.00em; }
	.font-size-large         { font-size: 1.10em; }
	.font-size-larger        { font-size: 1.20em; }
	.font-size-largest       { font-size: 1.30em; }
	.font-size-largerer      { font-size: 1.40em; }
	.font-size-largerest     { font-size: 1.50em; }
	.font-size-most-large    { font-size: 1.60em; }
	.font-size-mostest-large { font-size: 1.70em; }

	.letter-space-literally-space   { letter-spacing:  0.60em; }
	.letter-space-mostest-loose     { letter-spacing:  0.42em; }
	.letter-space-most-loose        { letter-spacing:  0.36em; }
	.letter-space-looserest         { letter-spacing:  0.32em; }
	.letter-space-looserer          { letter-spacing:  0.24em; }
	.letter-space-loosest           { letter-spacing:  0.18em; }
	.letter-space-looser            { letter-spacing:  0.12em; }
	.letter-space-loose             { letter-spacing:  0.06em; }
	.letter-space-normal            { letter-spacing:  0.00em; }
	.letter-space-tight             { letter-spacing: -0.04em; }
	.letter-space-tighter           { letter-spacing: -0.08em; }
	.letter-space-tightest          { letter-spacing: -0.12em; }
	.letter-space-tighterer         { letter-spacing: -0.16em; }
	.letter-space-tighterest        { letter-spacing: -0.20em; }
	.letter-space-most-tight        { letter-spacing: -0.24em; }
	.letter-space-mostest-tight     { letter-spacing: -0.28em; }
	.letter-space-literally-nothing { letter-spacing: -0.42em; }
}

/*******************************************************************************
**** give em the clamps *******************************************************/

.line-clamp {
	--LocalLineHeight: 1.4em;
	position: relative;
	line-height: var(--LocalLineHeight);
	overflow: hidden;
}

.line-clamp-terminator {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 33%;
	text-align: right;
}

.line-clamp-1 { height: calc(var(--LocalLineHeight) * 1); }
.line-clamp-2 { height: calc(var(--LocalLineHeight) * 2); }
.line-clamp-3 { height: calc(var(--LocalLineHeight) * 3); }
.line-clamp-4 { height: calc(var(--LocalLineHeight) * 4); }
.line-clamp-5 { height: calc(var(--LocalLineHeight) * 5); }
.line-clamp-6 { height: calc(var(--LocalLineHeight) * 6); }
.line-clamp-7 { height: calc(var(--LocalLineHeight) * 7); }
.line-clamp-8 { height: calc(var(--LocalLineHeight) * 8); }

.dropdown-menu.dropdown-menu-scrolled {
	max-height: var(--DropdownMaxHeight);
	overflow-y: scroll;
}

/*******************************************************************************
**** opacity stuff ************************************************************/

.opacity-0 { opacity: 0.0; }
.opacity-10 { opacity: 0.10; }
.opacity-25 { opacity: 0.25; }
.opacity-20 { opacity: 0.20; }
.opacity-30 { opacity: 0.30; }
.opacity-40 { opacity: 0.40; }
.opacity-50 { opacity: 0.50; }
.opacity-60 { opacity: 0.60; }
.opacity-70 { opacity: 0.70; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.80; }
.opacity-90 { opacity: 0.90; }
.opacity-100 { opacity: 1.0; }

.opacity-hover-0:hover { opacity: 0.0; }
.opacity-hover-10:hover { opacity: 0.10; }
.opacity-hover-25:hover { opacity: 0.25; }
.opacity-hover-20:hover { opacity: 0.20; }
.opacity-hover-30:hover { opacity: 0.30; }
.opacity-hover-40:hover { opacity: 0.40; }
.opacity-hover-50:hover { opacity: 0.50; }
.opacity-hover-60:hover { opacity: 0.60; }
.opacity-hover-70:hover { opacity: 0.70; }
.opacity-hover-75:hover { opacity: 0.75; }
.opacity-hover-80:hover { opacity: 0.80; }
.opacity-hover-90:hover { opacity: 0.90; }
.opacity-hover-100:hover { opacity: 1.0; }

/*******************************************************************************
**** positioning stuff ********************************************************/

.position-absolute { position: absolute; }
.position-absolutely { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; }
.position-relative { position: relative; }
.position-sticky { position: sticky; }

.position-top-left { top: 0px; left: 0px; }
.position-top-right { top: 0px; right: 0px; }
.position-bottom-left { bottom: 0px; left: 0px; }
.position-bottom-right { bottom: 0px; right: 0px; }

.position-bottom { bottom: 0px; }
.position-top { top: 0px; }
.position-left { left: 0px; }
.position-right { right: 0px; }
.position-h-center { left: 50%; transform: translateX(-50%); }
.position-v-center { top: 50%; transform: translateY(-50%); }
.position-h-center.position-v-center { transform: translateX(-50%) translateY(-50%); }

.zindex-high { z-index: 9001; }
.zindex-normal { z-index: 0; }
.zindex-low { z-index: -9001; }

.vh-100 { height: 100vh !important; }
.vh-75 { height: 75vh !important; }
.vh-50 { height: 50vh !important; }
.vh-25 { height: 25vh !important; }
.vh-0 { height: 0vh !important; }

.vw-100 { width: 100vw !important; }
.vw-75 { width: 75vw !important; }
.vw-50 { width: 50vw !important; }
.vw-25 { width: 25vw !important; }
.vw-0 { width: 0vw !important; }

.row.tight { margin-left: -0.25rem; margin-right: -0.25rem; }
.row.tight > *[class^='col'] { padding-left: .25rem; padding-right: .25rem; }

/*******************************************************************************
**** animating stuff **********************************************************/

.opacity-fade { transition: opacity 250ms; }

.transition-none { transition: none !important; }
.transition-timing-linear { transition-timing-function: linear; }
.transition-timing-inout { transition-timing-function: ease-in-out; }

/*******************************************************************************
**** table stuff **************************************************************/

.td-normal { white-space: nowrap; }
.td-shrink { white-space: nowrap; width: 1%; }
.td-valign-middle { vertical-align: middle !important; }

/*******************************************************************************
**** ratiobox stuff************************************************************/

.ratiobox {
	position: relative;
	padding-top: 100%;
	overflow: hidden;
}

.ratiobox.one-x-one,
.ratiobox.square {
	padding-top: 100%;
}

.ratiobox.four-x-three,
.ratiobox.tv,
.ratiobox.photo {
	padding-top: 75%;
}

.ratiobox.sixteen-x-ten,
.ratiobox.widemeh {
	padding-top: 62.5%;
}

.ratiobox.photo2 {
	padding-top: 66.65%;
}

.ratiobox.sixteen-x-nine,
.ratiobox.widescreen {
	padding-top: 56.25%;
}

.ratiobox.nineteen-x-one,
.ratiobox.imax {
	padding-top: 52.63%;
}

.ratiobox.two-x-one,
.ratiobox.univisium {
	padding-top: 50%;
}

.ratiobox.twentyone-x-nine,
.ratiobox.ultrawide {
	padding-top: 42.85%;
}

.ratiobox.one-x-two
.ratiobox.book {
	padding-top: 150%;
}

.ratiobox.hoverzoom .wallpapered {
	transform: scale(1.0);
	transition: transform 350ms;
}

.ratiobox.hoverzoom:hover .wallpapered {
	transform: scale(1.15);
	transition: transform 350ms;
}

/*******************************************************************************
**** background image stuff ***************************************************/

.accented,
.accented-top {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.accented-bottom {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
}

.wallpapered {
	background: #000;
	background-repeat: no-repeat;
	background-position: center center;
	color: #fff;
	text-shadow: 0px 0px 4px #000a;
}

.wallpapered,
.wallpapered.covered {
	background-size: cover;
}

.wallpapered.contained {
	background-size: contain;
}

/*******************************************************************************
**** some gradient fills ******************************************************/

/* focus grads are soft vignettes */

.grad-focus-normal {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.0) 0%, rgba(0,0,0,0.80) 100%);
}

.grad-focus-dark {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.35) 10%, rgba(0,0,0,0.80) 100%);
}

.grad-focus-darker {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.45) 0%, rgba(0,0,0,0.90) 100%);
}

/* tunnel grads are hard vignettes */

.grad-tunnel-normal {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.0) 10%, rgba(0,0,0,0.80) 88%);
}

.grad-tunnel-dark {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.35) 10%, rgba(0,0,0,0.80) 88%);
}

.grad-tunnel-darker {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.45) 10%, rgba(0, 0, 0, 0.90) 88%);
}

/* bottom grads are mostly transparent until near the bottom of the element */

.grad-bottom-normal {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 1%, rgba(0, 0, 0, 0.10) 51%, rgba(0, 0, 0, 0.85) 100%);
}

.grad-bottom-dark {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.40) 1%, rgba(0, 0, 0, 0.45) 51%, rgba(0, 0, 0, 0.90) 100%);
}

.grad-bottom-darker {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.45) 1%, rgba(0, 0, 0, 0.55) 51%, rgba(0, 0, 0, 0.95) 100%);
}

/*******************************************************************************
**** misc stuff ***************************************************************/

.btn-block {
	display: block;
	width: 100%;
}

.btn-left {
	display: block;
	text-align: left;
	width: 100%;
}

.btn-left > .mdi {
	margin-right: 0.25rem;
}

.btn-spread {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.btn:active:focus,
.btn:focus {
	outline: none !important;
	box-shadow: none !important;
}

.form-control:focus {
	outline: none !important;
	box-shadow: none !important;
}

.blockquote-edged,
.edged-left {
	border-left: 4px solid;
	border-left-color: var(--ColourTextAccent);
	padding-left: 0.75em;
}

.blockquote-edged-thicc,
.edged-left-thicc {
	border-left: 0.5em solid;
	padding-left: 0.75em;
}

.blockquote-edged-primary {
	border-left-color: var(--ColourPrimaryAccent);
}

.jumbotron {
	background: #1A1A1A;
	padding: 1em;
}

.rounded-extra { border-radius: 10px; }

.th-shrink,
.td-shrink {
	width: 1px;
}

.mdi-fw {
	text-align: center;
	width: 1.25em;
}

.mdi-spin-fast::before {
	-webkit-animation: mdi-spin 1s infinite linear;
	animation: mdi-spin 1s infinite linear;
}

.mdi-spin-hyper::before {
	-webkit-animation: mdi-spin 500ms infinite linear;
	animation: mdi-spin 500ms infinite linear;
}

.msi {
	display: inline-block;
	height: 1rem;
	vertical-align: middle;
	width: 1.25rem;
}

.msi-smol { width: 16px; }
.msi-sm { width: 24px; }
.msi-md { width: 32px; }
.msi-lg { width: 48px; }
.msi-huge { width: 64px; }

.msi-apple { mask: url(/share/icons/apple.svg) no-repeat center; mask-size: contain; mask-position: center center; }
.msi-discord { mask: url(/share/icons/discord.svg) no-repeat center; mask-size: contain; mask-position: center center; }
.msi-github { mask: url(/share/icons/github.svg) no-repeat center; mask-size: contain; mask-position: center center; }
.msi-google { mask: url(/share/icons/google.svg) no-repeat center; mask-size: contain; mask-position: center center; }
.msi-keyboard { mask: url(/share/icons/keyboard.svg) no-repeat center; mask-size: contain; mask-position: center center; }

.modal {
	box-shadow: 0px 0px 10px #000;
	z-index: 9011;
}

.modal-content {
	background-color: var(--ColourBackgroundPageAlt0) !important;
}

.modal-header,
.modal-footer {
	border: 0px;
}

.modal-header .btn {
	display: inline-block;
	padding-top: 0.20rem;
	padding-bottom: 0.18rem;
}

.modal-backdrop.show {
	background-color: #000 !important;
	backdrop-filter: blur(2px);
	opacity: 0.75;
	z-index: 9010;
}