/* Copyright 2024 McPherran
https://www.codepages.net
See LICENSE.txt file */

/* @import "Example_Import.css"; */

/* A version number in a stylesheet file name helps to ensure that updates to
 * the stylesheet are retrieved by the client. The file name won't be in the
 * the browser cache, so the file will be retrieved from the server. */

/*========== Default Values ==================================================== */

*
{
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	overflow: hidden;
}

body, div, button, span
{
	margin: 0;
	padding: 0;
}

:root
{
	--std-font: sans-serif;


	/* corresponds to 1rem */
	--root-font-size: 16px;
	/* --root-font-size_n: 16; */
}
	

html
{
	font-family: var(--std-font);
	font-size: var(--root-font-size);
}

:root
{
	/* ========== Colors ======================================================== */

	--color-light: hsl(30, 100%, 99%);

	--color2-light: hsl(276, 23%, 62%);
	--color2: hsl(298, 65%, 37%);
	--color2-slightly-dark: hsl(288, 69%, 30%);
	--color2-medium-dark: hsl(300, 66%, 20%);
	--color2-dark: hsl(298, 74%, 26%);
	--color2-text: hsla(290, 25%, 71%, 0.93);
	--color2-very-dark: hsl(317, 86%, 16%);

	--color3-slightly-light: hsl(200, 100%, 60%);
	--color3: hsl(200, 100%, 50%);

	--color4-very-light: hsl(188, 87%, 91%); 	/* legal background */
	--color4-light: hsl(293, 82%, 73%); 			/* code background and text box text */
	--color4-medium-light: hsl(283, 87%, 65%);	/* special text */
	--color4: hsl(305, 53%, 45%);
	--color4-medium-dark: hsl(298, 74%, 40%);	/* code border page border */
	--color4-dark: hsl(288, 44%, 32%);				/* page side inner borders */

	
	/* Code, command samples, and related */

	--code-background: var(--color4-light);
	--code-border: var(--color4-medium-dark);

	/* Site Framework Colors */

	--frame-border-color: var(--color4-medium-light);
	--legal-border-color: var(--color4-light);
	--legal-background: var(--color4-very-light);

	--page-side-border-color: var(--color4-dark);

	--color-banner-background: var(--color2);
	--color-banner-subdued-text: var(--color2-slightly-dark);
	--color-company-name: var(--color4-medium-light);
	--color-site-title-text: var(--color4-light);
	--banner-annotation-text: var(--color4-medium-light);

	--legal-text-color: black;

	
	--button-background-color-light: var(--color2);
	--button-background-color: var(--color2-slightly-dark);
	--button-background-color-slightly-dark: var(--color2-medium-dark);
	--button-background-color-medium-dark: var(--color2-dark);
	--button-background-color-dark: var(--color2-very-dark);
	--button-text-color: var(--color4-light);

	/*===== Fonts ===============================================================*/

	/* Default Font Sizes (chrome browser):
		H1: 32px
		H2: 24px
		H3: 19px
		H4: 16px	*/

	/* Default heading fonts are serif types */

	--H1-font-size: 26px;
	--H2-font-size: 22px;
	--H3-font-size: 18px;

	--site-title-font-size: 30px;
	--site-company-font-size: 20px;

	--ad-font-size: var(--H2-font-size);
	--small-font-size: 14px;

	--std-serif-font: Cambria, 'Noto Serif', serif;

	--std-ui-font: 'Segoe UI', 'Noto Sans', Roboto, sans-serif;

	--std-code-font: 'Cascadia Code', 'Noto Sans Mono', 'Fira Code', Consolas, monospace;

	/* --font-width-scalar adjusts the size unit of 1ch for the typical character
		width. */
	--font-width-scalar: 0.82;

	/* --font-size-scalar, multiplied by a font size, yields the average width of
		a character (for non-monospace fonts). E.g. for font-size = 16,
		80 * 16 * var(--font-size-scalar) yields the approximate length in pixels
		of an 80-character line. */
	--font-size-scalar: 0.455;

	--line-height-factor: 1.2;
	--size-scalar-font-to-ui-element: 2.25;

	/* ========== Site Layout =================================================== */

	--site-border-width: 2px;

	--navbar-button-font-size: var(--H3-font-size);

	/* --navbar-button-height:
			calc(var(--navbar-button-font-size) * var(--size-scalar-font-to-ui-element)); */
	--navbar-button-height: 40px;

	--partition-top-panel-height: var(--navbar-button-height);

	/* This is the string length of the longest navbar item string. This is used
		in the maximum site width calculation. It's an approximate value because
		the actual character width varies with character for non-monospace fonts. */
	/* --navbar-text-width: 13ch; */

	/* right padding of navigation buttons is larger than left in order to
		accommodate for a scroll bar */
	--navbar-button-right-pad: 1.5ch;
	--navbar-button-left-pad: 1ch;

	/* Pixel units are sometimes used for variable values instead of em, ch, etc.
		This is to enable JavaScript calculations to use the variables. */

	/* --navbar-width: calc(var(--navbar-text-width) +
			var(--navbar-button-right-pad) +	var(--navbar-button-left-pad)); */
	--navbar-width: 160px;

	/* right margin is slightly larger than left to allow for scroll bar */
	--page-left-margin: 13px;
	--page-right-margin: 22px;

	--width-80-chars: 582px;
	--page-side-border-width: 1px;

	/* --page-max-width: calc(var(--width-80-chars) + var(--page-margin) * 2 + var(--page-side-border-width)); */
	/* --nav_and_page_max_width: calc(var(--navbar-width) + var(--page-max-width)); */
	--nav_and_page_max_width: 780px;

	/* ===== General Layout ===================================================*/

	--indent: 1rem;
}

/* ===== Site Framework =======================================================*/

.center
{
	margin-left: auto;
	margin-right: auto;
}

.center-right
{
	margin-left: 70%;
	margin-right: 30%;
}

body { background: var(--color-banner-background); }

#site
{
	max-width: var(--nav_and_page_max_width);

	min-height: 100vh;
	max-height: 100vh;
	min-height: 100dvh;
	max-height: 100dvh;

	display: grid;
	grid: "t" "m" 1fr "b";
	border-color: var(--frame-border-color);
	border-width: 1px;
	border-style: solid;
}

/*===== Main Site Areas ========================================================*/

#banner
{
	grid-area: t;
	display: grid;
	margin-left: 1ch;
	grid-auto-flow: column;
	align-items: center;
}

#middle
{
	grid-area: m;
	display: grid;
	grid-template-columns: 0 1fr 0;
}

#legal
{
	grid-area: b;
	display: flex;
	flex-flow: row wrap;
	margin: 0;
	padding: 2px 0 1px 1ch;
	font-size: var(--small-font-size);
	font-family: var(--std-font);
	font-weight: 500;
	color: var(--legal-text-color);

	background: linear-gradient(to bottom,
		var(--legal-border-color), var(--legal-background), var(--legal-border-color));
}

/*===== Site Banner (Top) Contents =============================================*/

#site-title
{
	display: grid;
	max-width: fit-content;
	/* grid-auto-flow: row; */
	min-width: 260px;
	padding: .15em 0;
	 
}

#site-title .company
{
	font-size: var(--site-company-font-size);
	font-family: var(--std-font);
	color: var(--color-company-name);
}

#site-title .name
{
	margin: -.15em  0 0 .5ch;
	white-space: nowrap;
	font-size: var(--site-title-font-size);
	font-weight: 500;
	color: var(--color-site-title-text);
    font-family: "Bilbo Swash Caps", cursive;
  font-weight: 400;
  font-style: normal; 
	
	
}

.bilbo-swash-caps-regular 
{
	
  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 400;
  font-style: normal; 
}

.banner.annotation
{
	font-family: var(--std-font);
	color: var(--banner-annotation-text);
}

.banner.annotation sup { font-size: 0.5em; }

.banner.sales
{
	display: none;
	margin-right: 2ch;
	justify-self: right;
	font-size: var(--small-font-size);
	color: var(--color-banner-subdued-text);
}

/*===== Site Middle Area Framework =============================================*/

.partition
{
	display: grid;
	grid-template-rows: var(--partition-top-panel-height) 1fr;
}

.partition > .title { grid-row: 1; }

.partition > .content
{
	grid-row: 2;
	justify-self: stretch;
	overflow-y: auto;
	color: var(--color2-text);
}

.partition .title
{
	text-align: center;
}

.partition > .title
{
	line-height: var(--partition-top-panel-height);
	font-size: var(--H1-font-size);
}

.partition > .title.main
{
	background: var(--button-background-color);
	color: var(--button-text-color);
}

.partition > .title.aux
{
	background: var(--button-background-color-slightly-dark);
	color: var(--color3-slightly-light);
}

.partition .content.aux
{
	display: grid;
	max-width: fit-content;
	margin-left: auto; margin-right: auto;
}

/*===== Site Middle Area Contents  =============================================*/

#links
{
	/* display: none; */
	grid-column: 1;
}

.partition.main
{
	grid-column: 2;
	/* max-width: var(--nav_and_page_max_width); */
}

#links2
{
	/* display: none; */
	grid-column: 3;
}

.partition > .title.main
{
	display: grid;
	grid-template-columns: auto 1fr;
}

#navbar-toggle
{
	grid-column: 1;
	width: var(--navbar-width);
	/* width: 200px; */

	background: linear-gradient(to right, var(--button-background-color-dark) 2%,
		var(--button-background-color) 43%, var(--button-background-color) 57%,
		var(--button-background-color-dark));
}

#navbar_open_button { display: none; }

.partition > .content.main
{
	display: grid;
	grid-template-columns: auto 1fr;
}

#navbar
{
	grid-column: 1;
	/* display: grid; */
	width: var(--navbar-width);
	background: var(--button-background-color);
	overflow-y: auto;
}

nav ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

nav ul li
{
	display: grid;
	margin-top: 0;
	margin-bottom: 0;
	border-bottom: 1px solid var(--color2-medium-dark);
}

nav ul li button
{
	/* The right padding is slighly larger than the left. If the container, the
		navigation bar, has a vertical scroll bar, then the additional right
		padding accommodates the vertical scroll bar and still provides some right
		padding space for the button content (text). */

	/* box-sizing: content-box; */
	/* padding: 0 1.5ch 0 1ch; */
	height: var(--navbar-button-height);
	/* font-family: monospace; */
	font-size: var(--navbar-button-font-size);
	font-weight: 500;
}

#site-page
{
	grid-column: 2;
	/* display: grid; */
	padding: 11px var(--page-right-margin) 16px var(--page-left-margin);
	overflow-y: auto;
	background: var(--color-light);
	border-right-width: var(--page-side-border-width);
	border-style: solid;
	border-color: var(--page-side-border-color);
}

#site-page H1:first-of-type {	margin-top: 0; }

#site-page p:first-of-type {	margin-top: 0; }

/*===== Site Bottom Area Contents  =============================================*/

#legal a { text-decoration: none; }

/*===== Dynamics Based on Screen Width =========================================*/

/* @media max-width and min-width media ranges are inclusive of the argument
	value. E.g. (min-width: 620px) includes 620px and (max-width: 400px) includes
	400px. */

@media screen and (max-width: 800px) { #site { border-style: none; } }

/* The width of the basic site area (navigation bar and content page) is
	approximately 760px. When the browser viewport width is roughly wide
	enough to accommodate content in addition to the basic site area, then
	additional columns of complimentary content are presented on each side of
	the site basic content. */

@media screen and (min-width: 1200px)
{
	#site { max-width: 2400px; }

	#middle { grid-template-columns: 1fr var(--nav_and_page_max_width) 1fr; }

	.banner.sales { display: block; }
}

@media screen and (max-width: 620px)
{
	.banner.news { display: none; }

	.image
	{
		margin: 30px 0 0 20px;
	}
}

@media screen and (max-width: 760px)
{
	.image
	{
		margin: 30px 0 0 20px;
		width: 180px;
		height: 180px;
	}
}

@media screen and (max-width: 360px)
{
	.image
	{
		display: block;
		margin: 20px 0 0 20px;
		width: 140px;
		height: 140px;
	}
}

/*===== General Framework ======================================================*/

.title, nav button
{
	font-family: var(--std-ui-font);
	white-space: nowrap;
}

/*===== Auxiliary Content ======================================================*/

:root
{
	--aux-h2-indent: 2ch;
	--aux-h3-indent: 4ch;
}

/* Evidence from experimentation indicates that ul has a default padding. */

/* ul { padding-left: 0; } */
 /* justify-items is not for flex */

.content.aux
{
	/* justify-self: stretch; */
	padding: 1lh;

	/* & H1, H2, H3 */

	& H1, H2, H3
	{
		color: var(--color3);
		font-weight: 500;
	}

	& H2 { margin-left: var(--aux-h2-indent); }

	& H3 { margin-left: var(--aux-h3-indent); }

	& H2 + ul { margin-left: calc(var(--aux-h2-indent) + var(--indent)); }

	& H3 + ul { margin-left: calc(var(--aux-h3-indent) + var(--indent)); }

	& ul + H1 { margin-top: 1.5em; }

	& ul + H2 { margin-top: 1.5em; }

	& ul + H3 { margin-top: 1.5em; }

	& a
	{
		margin: 0;
		display: block;
		color: var(--color3-slightly-light);
	}

	& ul { list-style: none; }

	& ul > li:not(:first-child) { margin-top: 1.2em; }
}

/*===== General Content ========================================================*/

.raw-box
{
	margin: 0;
	padding: 0;
}

/* This class can be applied to a block element (e.g. a div) that is contained
	by a grid, that also contains a grid element to be horizontally centered and
	(as needed) vertically scrollable. */

.vscroll-container
{
	justify-self: stretch;
	overflow-y: auto;
}

.vscroll-item
{
	display: grid;
	max-width: fit-content;
	margin-left: auto; margin-right: auto;
}

/* Margin:
	top right bottom left
	V H
	T H B	*/
.vspace { margin-top: 1em; }

.vspace-large { margin-top: 2em; }

.vspace-very-large { margin-top: 4em; }

.vspace-small { margin-top: 0.5em; }

.no-vspace { margin-top: 0; }

H1
{
	/* margin-top: 1em; */
	font-size: var(--H1-font-size);
}

H2
{
	font-size: var(--H2-font-size);
	/* font-family: var(--std-font); */
}

H3
{
	/* margin-top: 1em; */
	font-size: var(--H3-font-size);
}

/* H4 { font-family: var(--std-font); } */

.faded-comment
{
	margin: 10px;
	font-weight: 250;
	font-size: 16px;
}

.indent
{
	margin-left: var(--indent);
}

.indent2
{
	margin-left: calc(var(--indent) * 2);
}

.indent3
{
	margin-left: calc(var(--indent) * 3);
}

.indent4
{
	margin-left: calc(var(--indent) * 4);
}

/* .content > :not(p:first-of-type) { margin-top: 1em; } */

.text-small { font-size: var(--small-font-size); }

.subdued
{
	font-size: smaller;
	font-weight: lighter;
}

a { margin-top: 12px; }

sup { margin-left: 0.3ch; }

ul li, ol li { overflow: visible; }

ul li:first-child, ol li:first-child { margin-top: 0; }

ul li:not(:first-child), ol li:not(:first-child) { margin-top: 0.4em; }

.image
{
	display: inline;
	margin: 50px 0 0 40px;
	width: 240px;
	height: 240px;
}

.image:hover
{
	cursor: pointer;
}

/* a:visited {	color: var(--color2); } */

a.local
{
	text-decoration: underline;
	color: blue;
	cursor: pointer;
}

div > a, main > a { display: block; }

/* li.list-example::marker  { content: '+'; color: green; font-size: 40px;}  */

button
{
	background: var(--button-background-color);
	color: var(--button-text-color);
	/* border-style: none; */
}

button:hover
{
	cursor: pointer;
	background: var(--button-background-color-light);
}

/* When button is pressed. *
/* "active" applies while button is held pressed. */

button:active
{
	background: radial-gradient(var(--button-background-color) 20%, var(--button-background-color-dark));
}

/* Focus state starts When button is released (e.g. at the end of a mouse
click). Focus state ends when another element has focus. */

button:focus
{
	border-width: 1px;
	border-style: dotted;
	border-color: var(--button-background-color-dark);
}

button.text-box
{
	margin: 2em 3%;
	display: grid;
	padding: 1rem;
	border-radius: 8px;
	background: var(--button-background-color-dark);
	font-size: 1rem;
}

button.text-box:hover
{
	cursor: pointer;
	background: radial-gradient(var(--button-background-color-slightly-dark), var(--button-background-color-dark));
}

.text-box p
{
	margin: .5em 0;
	text-align: left;
}

.text-box p:first-of-type { margin: 0; }

.ad
{
	font-size: var(--ad-font-size);
	color: var(--color4-medium-light);
}

.ad2 { color: var(--color2-light); }

code,
pre.code
{
	text-align: left;
	font-family: var(--std-code-font);
	font-weight: 450;
	border-width: 1px;
	font-variant-ligatures: normal;
	background-color: var(--code-background);
	border-color: var(--code-border);
}

code
{
	display: inline flow-root;
	/* display: inline flex; */
	border-style: normal;
	padding: 0 .5ch;
	font-size: .8rem;
}

pre.code
{
	display: inline flex;
	/* display: inline flow-root; */
	display: inline-block;			/* fallback */
	margin-top: 0.8em;
	border-style: ridge;
	border-width: 2px;
	margin-left: 2ch;
	padding: 0.5em;
}

/* code is phrasing content and therefore inline by default. However, use of
	inline flex causes the text to align more vertically centered on the line.*/

p > code { display: inline flex; }

/*===== Notes ==================================================================

Fonts

	The standard font is a sans serif type.

	Arial is a satisfactory general purpose font.

	Corbel is an attractive font.

	Tahoma and Verdana are good special-purpose fonts.	They are both generally
	larger (taller) than other fonts. Tahoma is has small character spacing.
	Verdana g, p, and q don't extend minimally below the baseline.

	'Trebuchet MS' and Calibri have unattractive 'g' characters

Approximate Pixel Lengths that Correspond to String Lengths at 16px Font Size

	chars					px
	-----					--
	137		==>		1000px
	110		==>		800px
	82			==>		600px
	80			==>		582px
	69			==>		500px
	55			==>		400px
	45			==>		330px
	41			==>		300px
	28			==>		200px
	21			==>		150px
	14			==>		100px
	8			==>		60px

CSS box model

	margin and padding shorthand order of properties: top, right, bottom, left

	align-self, justify-self, and place-self apply only to flex items and grid
	items.

	Also place-content

Border Gradient

	border-image-source: linear-gradient(to bottom, var(--frame-border-color), var(--frame-border-color-2) 100vh);
	border-image-slice: 2;
	border-image-width: 2px;

*/