@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,700;0,900;1,100;1,400;1,700;1,900&display=swap');

:root {

	/* page colours */

	--ColourPrimaryHue: 212;
	--ColourPrimarySat: 76%;
	--ColourPrimaryLvl: 42%;

	--ColourSecondaryHue: 212;
	--ColourSecondarySat: 80%;
	--ColourSecondaryLvl: 31%;

	--ColourTertiaryHue: 212;
	--ColourTertiarySat: 36%;
	--ColourTertiaryLvl: 54%;

	--ColourPrimaryAccent: hsl(var(--ColourPrimaryHue), var(--ColourPrimarySat), var(--ColourPrimaryLvl));
	--ColourSecondaryAccent: hsl(var(--ColourSecondaryHue), var(--ColourSecondarySat), var(--ColourSecondaryLvl));
	--ColourTertiaryAccent: hsl(var(--ColourTertiaryHue), var(--ColourTertiarySat), var(--ColourTertiaryLvl));

	--ColourObjectBackground1: #1A1A1A;
	--ColourObjectBackground2: #2A2A2A;
	--ColourObjectBackground3: #3A3A3A;
	--ColourObjectBorder1: #101010;

	/* page fonts */

	--FontFamilyNormal: 'Poppins', 'Segoe UI', 'Helvetica', sans-serif;
	--FontWeightNormal: 300;
	--FontSpacingNormal: 0.02em;

	--FontFamilyMonotype: 'Consolas', 'Menlo', monospace;
	--FontWeightMonotype: 300;
	--FontSpacingMonotype: 0.02em;

	/* html layer */

	--ColourForegroundRoot: #F4F4F4;
	--ColourBackgroundRoot: #111111;

	/* body layer */

	--ColourForegroundPage: #FDFDFD;
	--ColourBackgroundPage: #222222;

	/* misc items */

	--ColourCode: hsl(var(--ColourPrimaryHue), calc(var(--ColourPrimarySat) - 30%), calc(var(--ColourPrimaryLvl) + 30%));
	--ColourTextAccent: #666666;

	--ColourBackgroundPageAlt0: var(--ColourBackgroundPage);
	--ColourBackgroundPageAlt1: #1A1A1A;
	--ColourBackgroundPageAlt2: #151515;

	--ThemeHeaderBackground: #000000;
	--ThemeHeaderHeight: 100px;
}

html, body {
	background-color: var(--ColourBackgroundRoot);
	color: var(--ColourForegroundRoot);
	font-family: var(--FontFamilyNormal);
	font-weight: var(--FontWeightNormal);
	letter-spacing: var(--FontSpacingNormal);
}

code {
	color: var(--ColourCode);
	font-family: var(--FontFamilyMonotype);
	font-weight: var(--FontWeightMonotype);
	letter-spacing: var(--FontSpacingMonotype);
}

img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.form-control,
.form-select {
	background-color: #000;
	border-color: #444;
	color: #ddd;
	transition: background-color 200ms;
}

.form-control:focus {
	background-color: #555;
	border-color: #444;
	color: #ddd;
	transition: background-color 200ms;
}

.form-control::placeholder {
	color: #7d7d7d;
	font-size: 0.8rem;
	letter-spacing: 0.1rem;
}

.btn {
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	text-transform: uppercase;
}

h1, h2, h3, h4 {
	font-weight: bold;
}

hr {
	opacity: 1.0;
}

strong {
	font-weight: bold;
}

.table {
	--bs-table-border-color: var(--ColourObjectBorder1);
	--bs-table-bg: var(--ColourObjectBackground1);
	--bs-table-striped-bg: var(--ColourObjectBackground2);
}

.table td {
	vertical-align: middle;
}

/*
.table thead > tr > * {
	background-color: var(--ColourObjectBackground1) !important;
	box-shadow: none !important;
}

.table tbody > tr > * {
	background-color: var(--ColourObjectBackground1) !important;
	box-shadow: none !important;
}

.table tbody > tr:nth-of-type(2n+1) > * {
	background-color: var(--ColourObjectBackground2) !important;
}
*/

#PageHeader {
	position: relative;
	z-index: 9001;

	background: var(--ThemeHeaderBackground);
	box-shadow: 0px 5px 5px #000000AA;
	padding: 16px 0px;

	height: var(--ThemeHeaderHeight);
}

#PageHeader nav {
	text-transform: uppercase;
}

#PageHeader nav a:link:not(.btn),
#PageHeader nav a:visited:not(.btn) {
	color: #FFFFFF;
	text-decoration: none;
	transition: color 200ms;
}

#PageHeader nav a:hover:not(.btn),
#PageHeader nav a:active:not(.btn) {
	color: var(--ColourPrimaryAccent);
}

#PageHeader nav .btn {
	font-size: 0.8em;
	font-weight: bold;
	padding: 1px 8px 2px 8px;
}

#PageMain {
	background-color: var(--ColourBackgroundPage);
	color: var(--ColourForegroundPage);
}

#PageMain a:link:not(.Block):not(.Tag):not(.btn),
#PageMain a:visited:not(.Block):not(.Tag):not(.btn) {
	color: var(--ColourForegroundRoot);
	border-bottom: 1px dotted;
	border-bottom-color: var(--ColourForegroundRoot);
	text-decoration: none;
	transition: border-bottom-color 200ms;
}

#PageMain a:active:not(.Block):not(.Tag):not(.btn),
#PageMain a:hover:not(.Block):not(.Tag):not(.btn) {
	border-bottom-color: var(--ColourTertiaryAccent);
}

#PageFooter {
	background: var(--ColourBackgroundRoot);
	padding: 64px 0px;
}

/*******************************************************************************
**** themed items in the style of bootstrap ***********************************/

.btn-primary { background-color: var(--ColourPrimaryAccent); border-color: var(--ColourPrimaryAccent); }
.btn-dark { background-color: #111111; border-color: #111111; }

.font-family-monotype { font-family: var(--FontFamilyMonotype); }
.font-family-normal { font-family: var(--FontFamilyNormal); }

.text-primary,
.fg-primary,
.fg-primary:link,
.text-primary:link,
.fg-primary:visited,
.text-primary:visited,
.fg-primary:hover,
.text-primary:hover {
	color: var(--ColourPrimaryAccent) !important;
}

.fg-secondary,
.fg-secondary:link,
.fg-secondary:visited,
.fg-secondary:hover {
	color: var(--ColourSecondaryAccent) !important;
}

.fg-tertiary,
.fg-tertiary:link,
.fg-tertiary:visited,
.fg-tertiary:hover {
	color: var(--ColourTertiaryAccent);
}

.bg-primary { background-color: var(--ColourPrimaryAccent); }
.bg-secondary { background-color: var(--ColourPrimarySecondary); }
.bg-tertiary { background-color: var(--ColourPrimaryTertiary); }
.bg-alt0 { background-color: var(--ColourBackgroundPageAlt0); }
.bg-alt1 { background-color: var(--ColourBackgroundPageAlt1); }
.bg-alt2 { background-color: var(--ColourBackgroundPageAlt2); }

.border-primary { border-color: var(--ColourPrimaryAccent) !important; }
.border-secondary { border-color: var(--ColourSecondaryAccent) !important; }
.border-tertiary { border-color: var(--ColourTertiaryAccent) !important; }

.underdot { border-bottom: 1px solid dotted !important; }

.bg-alt0 code.cli, code.cli,
.bg-alt0 pre.cli, pre.cli {
	background-color: var(--ColourBackgroundPageAlt1);
	border-radius: 3px;
	color: var(--ColourCode);
	padding: 2px 10px;
}

.bg-alt1 code.cli,
.bg-alt1 pre.cli {
	background-color: var(--ColourBackgroundPageAlt2);
	border-radius: 3px;
	color: var(--ColourCode);
	padding: 2px 10px;
}

.bg-alt2 code.cli,
.bg-alt2 pre.cli {
	background-color: var(--ColourBackgroundPageAlt0);
	border-radius: 3px;
	color: var(--ColourCode);
	padding: 2px 10px;
}

.bg-alt0 code.file, code.file,
.bg-alt0 pre.file, pre.file {
	background-color: var(--ColourBackgroundPageAlt1);
	border-radius: 3px;
	color: var(--ColourForegroundPage);
	padding: 2px 10px;
}

.bg-alt1 code.file,
.bg-alt1 pre.file {
	background-color: var(--ColourBackgroundPageAlt2);
	border-radius: 3px;
	color: var(--ColourForegroundPage);
	padding: 2px 10px;
}

.bg-alt2 code.file,
.bg-alt2 pre.file {
	background-color: var(--ColourBackgroundPageAlt0);
	border-radius: 3px;
	color: var(--ColourForegroundPage);
	padding: 2px 10px;
}

/*******************************************************************************
**** structured widget stuff **************************************************/

.ArticlePrelabel {
	color: var(--ColourTertiaryAccent);
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1rem;
	text-transform: uppercase;
}

.PrettyBrandText {
	display: inline-block;
	font-weight: bold;
	border-top: 0.15em solid;
	border-color: var(--ColourPrimaryAccent);
	text-transform: uppercase;
}

.PrettyFooterLinkGrid a:link {
	border-top: 2px solid transparent;
	margin-top: -2px;
}

.PrettyFooterLinkGrid a:hover {
	border-top: 2px solid #FFFFFF;
}

.PrettyModernBox {
	background-color: #1A1A1A;
	border-radius: 5px;
	padding: 1.0em;
}

.PrettyModernBox h3,
.PrettyModernBox dt {
	display: flex;
	align-items: center;
	justify-content: center;

	letter-spacing: 0.12em;
	margin-bottom: 0.5em;
	font-weight: 200;
	text-transform: uppercase;
}

.PrettyModernBox h3 a,
.PrettyModernBox h3 span,
.PrettyModernBox dt a,
.PrettyModernBox dt span {
	flex-grow: 0;
}

.PrettyModernBox h3 hr,
.PrettyModernBox dt hr {
	flex-grow: 1;
	margin: 0px 0.5rem;
	padding: 0px
}

.PrettyModernBox h3 hr:first-child,
.PrettyModernBox dt hr:first-child {
	margin: 0px 0.5em 0px 0px;
}

.PrettyModernBox h3 hr:last-child,
.PrettyModernBox dt hr:last-child {
	margin: 0px 0px 0px 0.5em;
}

.PrettyModernBox a:link:not(.underdot),
.PrettyModernBox a:visited:not(.underdot) {
	border-bottom: 0px !important;
}

.PrettyModernBox dd {
	margin: 0px;
	padding: 0px;
}

.PrettyModernBox blockquote {
	letter-spacing: 0.12em;
	line-height: 1em;
	font-size: 2em;
	font-weight: 200;
	margin-bottom: 0px;
	text-align: right;
}

.PrettyModernBox .PrettyBrandText {
	border-top: 0.10em solid;
	font-weight: 200;
}

.PrettyModernBox .line-clamp-terminator {
	background: linear-gradient(90deg, #1A1A1A00 0%, #1A1A1AFF 100%);
}

.PrettyModernNavbar {
	font-weight: 600;
	background-color: #1A1A1A;
	border-radius: 5px;
	padding: 0.75rem 1.0rem 1.0rem 1.0rem;
}

.PrettyModernNavbar span {
	opacity: 0.50;
}

.HideTheLastHR hr:last-of-type {
	display: none;
}

/*******************************************************************************
**** fancy or *****************************************************************/

.FancyOrVH {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	height: 100%;
}

.FancyOrVH > div {
	flex-grow: 1;
	flex-shrink: 1;
	margin: 0px;
	padding: 0px;
	opacity: 0.25;
	text-align: center;
}

.FancyOrVH > div:after {
	content: ' ';
	background: #fff;
	display: inline-block;
	height: 100%;
	width: 1px;
}

.FancyOrVH > label {
	flex-shrink: 1;
	flex-grow: 0;
	font-style: italic;
	padding: 6px;
	text-align: center;
	text-transform: uppercase;
}

@media(max-width: 767.99px) {
	/** md or smaller */

	.FancyOrVH {
		flex-direction: row;
	}

	.FancyOrVH > div:after {
		background: #fff;
		height: 1px;
		width: 100%;
	}
}

.FancyStateButton {
	display: flex;
}

.FancyStateButton > i {
	overflow: auto;
	width: 0rem;

	transition: width 200ms;
}

.FancyStateButton.btn-primary .Idle {
	margin-right: 0.25rem;
	width: 1.0rem;
}

.FancyStateButton.btn-success .Success {
	margin-left: 0.25rem;
	width: 1.0rem;
}

.FancyStateButton.btn-danger .Danger {
	margin-left: 0.25rem;
	width: 1.0rem;
}

/*******************************************************************************
**** fancy or *****************************************************************/

.dropdown-menu {
	background-color: var(--ColourObjectBackground2);
	padding: 6px;
	border-radius: 0px;
	box-shadow: 0px 0px 72px #000;
}

.dropdown-menu li {
	margin-bottom: 6px;
}

.dropdown-menu li:last-of-type {
	margin-bottom: 0px;
}

.dropdown-menu a.dropdown-item:link,
.dropdown-menu a.dropdown-item:visited {
	border-bottom: 0px !important;
	text-decoration: none !important;
}

.dropdown-menu a.dropdown-item:active,
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus {
	background-color: var(--ColourObjectBackground3);
}

/*******************************************************************************
**** text editor **************************************************************/

.Editor {
	background-color: var(--ColourObjectBackground1);
	border: 0px solid var(--ColourObjectBorder1);
	border-radius: 6px;
	padding: 6px;
}

.Editor .EditorItem.Selected {
	border-radius: 0.25rem;
	outline: 2px solid var(--ColourPrimaryAccent);
}

.Editor .Viewport {
	background-color: var(--ColourObjectBackground2);
	border-radius: 6px;
	padding: 6px;
}

.Editor .Viewport:focus-visible {
	outline: 0px solid var(--ColourBackgroundRoot);
}

.Editor .Toolbar {
	gap: 0.50rem;
	padding: 6px;
	border-radius: 6px;
	margin-bottom: 6px;
}

.Editor .Toolbar > div {
	padding: 0px !important;
}

.Editor .ToolbarButton {
	display: flex;
	align-items: center;
	flex-grow: 0;

	font-size: 1.2em;
	padding: 1px 6px 0px 6px;
}

.Editor .ToolbarButton > span {
	display: none;
}

.Editor .ToolbarDropdown .dropdown-menu {
	background-color: var(--ColourObjectBackground2);
}

.Editor .ToolbarDropdown .row {
	gap: 0.50rem;
}

.Editor .ToolbarDropdown .row > div {
	padding: 0px !important;
}

.Editor .Debug {
	font-size: 0.8rem;
	margin-top: 10px;
	white-space: break-word;
}

.EditorItem {
	user-select: none;
}