/*Custom Font Definition*/
@font-face{
	font-family: FriantIcons;
	src: url(icons.woff2)
}

/*Global Variables*/
:root{
	/*Modes*/
	color-scheme: dark light;
	&[data-color-scheme="light"] {
		color-scheme: light;
		#lightModeIcon{
			display: none;
		}
		#darkModeIcon{
			display: inline-block;
		}
	}
	&[data-color-scheme="dark"] {
		color-scheme: dark;
		#lightModeIcon{
			display: inline-block;
		}
		#darkModeIcon{
			display: none;
		}
	}

	/*General Colors*/
	--text-dark:                       230, 230, 230;
	--text-light:                      040, 040, 040;
	--text-unvisited-link-dark:        230, 230, 230;/*000, 150, 255*/
	--text-unvisited-link-light:       040, 040, 040;/*000, 150, 255*/
	--text-visited-link-dark:          230, 230, 230;/*255, 000, 255*/
	--text-visited-link-light:         040, 040, 040;/*255, 000, 255*/
	--background-dark:                 040, 040, 040;
	--background-light:                230, 230, 230;
	--background-secondary-dark:       080, 080, 080;
	--background-secondary-light:      190, 190, 190;
	--text-select-background-dark:     230, 230, 230;
	--text-select-background-light:    040, 040, 040;
	--text-select-dark:                040, 040, 040;
	--text-select-light:               230, 230, 230;
	--text-highlight-dark:             135, 135, 135;
	--text-highlight-light:            135, 135, 135;
	--hover-mode-dark:                 135, 135, 135;
	--hover-mode-light:                135, 135, 135;
	--nav-directory-hover-dark:        128, 128, 128;
	--nav-directory-hover-light:       128, 128, 128;
	--nav-directory-active-dark:       085, 085, 085;
	--nav-directory-active-light:      185, 185, 185;
	--border-dark:                     135, 135, 135;
	--border-light:                    135, 135, 135;
	--primary-accent-dark:             087, 087, 087;
	--primary-accent-light:            183, 183, 183;
	--secondary-accent-dark:           183, 183, 183;
	--secondary-accent-light:          087, 087, 087;
	
	/*Code Colors*/
	--code-unhandled-token-dark:       255, 000, 155;
	--code-unhandled-token-light:      255, 000, 255;
	--code-text-token-dark:            230, 230, 230;
	--code-text-token-light:           040, 040, 040;
	--code-whitespace-token-dark:      230, 230, 230;
	--code-whitespace-token-light:     040, 040, 040;
  /*--code-error-token-dark:           213,  94,   0;*/
  /*--code-error-token-light:          213,  94,   0;*/
	--code-other-token-dark:           230, 230, 230;
	--code-other-token-light:          040, 040, 040;
	--code-keyword-token-dark:         204, 121, 167;
	--code-keyword-token-light:        174,  91, 137;
	--code-name-token-dark:             86, 180, 233;
	--code-name-token-light:            46, 120, 193;
	--code-name-class-token-dark:        0, 114, 178;
	--code-name-class-token-light:       0, 114, 178;
	--code-literal-token-dark:         230, 159,   0;
	--code-literal-token-light:        200, 129,   0;
	--code-string-token-dark:          230, 159,   0;
	--code-string-token-light:         200, 129,   0;
	--code-string-special-token-dark:  204, 121, 167;
	--code-string-special-token-light: 174,  91, 137;
	--code-number-token-dark:          230, 159,   0;
	--code-number-token-light:         200, 129,   0;
	--code-operator-token-dark:        213,  94,   0;
	--code-operator-token-light:       243,  64,   0;
	--code-punctuation-token-dark:     220, 208,  46;
	--code-punctuation-token-light:     40,  40,  40;
	--code-comment-token-dark:           0, 158, 115;
	--code-comment-token-light:          0, 128,  85;
  /*--code-generic-token-dark:      ;*/
  /*--code-generic-token-light:     ;*/

	/*Data Series Colors: Black and White*/
	--data-series-bw-0-dark:  214, 214, 214;
	--data-series-bw-0-light:  61,  61,  61;
	--data-series-bw-1-dark:  163, 163, 163;
	--data-series-bw-1-light: 112, 112, 112;
	--data-series-bw-2-dark:  112, 112, 112;
	--data-series-bw-2-light: 163, 163, 163;
	--data-series-bw-3-dark:   81,  81,  81;
	--data-series-bw-3-light: 194, 194, 194;

	/*Data Series Colors: Paul Tol's Muted*/
	--data-series-ptm-0-dark:  181, 181, 181;
	--data-series-ptm-0-light: 181, 181, 181;
	--data-series-ptm-1-dark:   66,  57, 153;
	--data-series-ptm-1-light:  46,  37, 133;
	--data-series-ptm-2-dark:   51, 117,  56;
	--data-series-ptm-2-light:  51, 117,  56;
	--data-series-ptm-3-dark:   93, 168, 153;
	--data-series-ptm-3-light:  93, 168, 153;
	--data-series-ptm-4-dark:  148, 203, 236;
	--data-series-ptm-4-light: 148, 203, 236;
	--data-series-ptm-5-dark:  220, 205, 125;
	--data-series-ptm-5-light: 220, 205, 125;
	--data-series-ptm-6-dark:  194, 106, 119;
	--data-series-ptm-6-light: 194, 106, 119;
	--data-series-ptm-7-dark:  159,  74, 150;
	--data-series-ptm-7-light: 159,  74, 150;
	--data-series-ptm-8-dark:  126,  41,  84;
	--data-series-ptm-8-light: 126,  41,  84;

	/*Data Series Colors: Okabe and Ito*/
	--data-series-oai-0-dark:  230, 230, 230;/*Black/White*/
	--data-series-oai-0-light:  40,  40,  40;
	--data-series-oai-1-dark:    0, 158, 115;/*Bluish Green*/
	--data-series-oai-1-light:   0, 158, 115;
	--data-series-oai-2-dark:    0, 114, 178;/*Blue*/
	--data-series-oai-2-light:   0, 114, 178;
	--data-series-oai-3-dark:   86, 180, 233;/*Sky Blue*/
	--data-series-oai-3-light:  86, 180, 233;
	--data-series-oai-4-dark:  220, 208,  46;/*Yellow, dark  mode*/
	--data-series-oai-4-light: 210, 198,  36;/*Yellow, light mode*/
	--data-series-oai-5-dark:  230, 159,   0;/*Orange*/
	--data-series-oai-5-light: 230, 159,   0;
	--data-series-oai-6-dark:  213,  94,   0;/*Vermillion*/
	--data-series-oai-6-light: 213,  94,   0;
	--data-series-oai-7-dark:  204, 121, 167;/*Reddish Purple*/
	--data-series-oai-7-light: 204, 121, 167;

	/*Transitions*/
	--color-scheme-transition-duration-post-load: 1.5s;
	--color-scheme-transition-duration: 0.0s;
	--hover-mode-transition-duration: 0.2s;

	/*Fonts*/
	--font-text-serif:      'Times New Roman', Times, serif;
	--font-text-sans-serif:  Arial, Helvetica, sans-serif;
	--font-text-monospace:  'Courier New', Courier, monospace;
	--font-icons:            FriantIcons;

	--font-size-desktop-background:   128pt;
	--font-size-desktop-normal-text:   15pt;
	--font-size-desktop-small-text:    12pt;
	--font-size-desktop-h1:            30pt;
	--font-size-desktop-h2:            25pt;
	--font-size-desktop-h3:            20pt;
	--font-size-desktop-h4:            15pt;
	--font-size-desktop-h5:             8pt;
	--font-size-desktop-h6:             4pt;
	--font-size-desktop-nav-head:      30pt;
	--font-size-desktop-nav-icon:      17pt;
	--font-size-desktop-nav-body:      15pt;

	--font-size-mobile-normal-text:  3.50vw;
	--font-size-mobile-small-text:   1.74vw;
	--font-size-mobile-h1:           5.00vw;
	--font-size-mobile-h2:           4.07vw;
	--font-size-mobile-h3:           3.49vw;
	--font-size-mobile-h4:           2.91vw;
	--font-size-mobile-h5:           2.33vw;
	--font-size-mobile-h6:           1.74vw;
	--font-size-mobile-nav-head:    10.00vw;
	--font-size-mobile-nav-icon:     8.00vw;
	--font-size-mobile-nav-body:     6.00vw;

	/*Border, margin, padding*/
	--border-width:  1px;
	--margin-width:  5px;
	--padding-width: 5px;
	--padding-nav-directory-arrow: 20px;

	/*Metrics*/
	--desktop-nav-max-width: 275px;
	--desktop-nav-margin: 25px;
	--desktop-nav-directory-radius: 10px;
	--desktop-nav-directory-step-width: calc(1.5 * var(--nav-directory-radius));
	--desktop-content-max-width: 900px;

	--mobile-nav-max-width: 100%;
	--mobile-nav-margin: 25px;
	--mobile-nav-directory-radius: 0px;
	--mobile-nav-directory-step-width: 0px;
	--mobile-content-max-width: 100%;
}

/*Local Fonts*/
/* @font-face { */
/* 	font-family: Icons; */
/* 	src: url(cc-icons/fonts/cc-icons.woff); */
/* } */

@media only screen and (max-width: 920px){
	:root{
		--font-size-normal-text:    var(--font-size-mobile-normal-text);
		--font-size-small-text:     var(--font-size-mobile-small-text);
		--font-size-h1:             var(--font-size-mobile-h1);
		--font-size-h2:             var(--font-size-mobile-h2);
		--font-size-h3:             var(--font-size-mobile-h3);
		--font-size-h4:             var(--font-size-mobile-h4);
		--font-size-h5:             var(--font-size-mobile-h5);
		--font-size-h6:             var(--font-size-mobile-h6);
		--font-size-nav-head:       var(--font-size-mobile-nav-head);
		--font-size-nav-icon:       var(--font-size-mobile-nav-icon);
		--font-size-nav-body:       var(--font-size-mobile-nav-body);

		--nav-max-width:            var(--mobile-nav-max-width);
		--nav-margin:               var(--mobile-nav-margin);
		--nav-directory-radius:     var(--mobile-nav-directory-radius);
		--nav-directory-step-width: var(--mobile-nav-directory-step-width);
		--content-max-width:        var(--mobile-content-max-width);
	}
}

@media only screen and (min-width: 920px){
	:root{
		--font-size-normal-text: var(--font-size-desktop-normal-text);
		--font-size-small-text:  var(--font-size-desktop-small-text);
		--font-size-h1:          var(--font-size-desktop-h1);
		--font-size-h2:          var(--font-size-desktop-h2);
		--font-size-h3:          var(--font-size-desktop-h3);
		--font-size-h4:          var(--font-size-desktop-h4);
		--font-size-h5:          var(--font-size-desktop-h5);
		--font-size-h6:          var(--font-size-desktop-h6); 
		--font-size-nav-head:    var(--font-size-desktop-nav-head);
		--font-size-nav-icon:    var(--font-size-desktop-nav-icon);
		--font-size-nav-body:    var(--font-size-desktop-nav-body);

		--nav-max-width:            var(--desktop-nav-max-width);
		--nav-margin:               var(--desktop-nav-margin);
		--nav-directory-radius:     var(--desktop-nav-directory-radius);
		--nav-directory-step-width: var(--desktop-nav-directory-step-width);
		--content-max-width:        var(--desktop-content-max-width);
	}
}

/*Core theme via basic HTML elements*/
html{
	scroll-behavior: smooth;

}

body{
	background-color: light-dark(
		rgb(var(--background-light)),
		rgb(var(--background-dark)));
	color: light-dark(rgb(var(--text-light)), rgb(var(--text-dark)));

	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;

	counter-reset: footnote-counter;
	counter-reset: citation-counter;
}

body ::selection{
	background-color: light-dark(
		rgb(var(--text-select-background-light)),
		rgb(var(--text-select-background-dark)));
	color: light-dark(rgb(var(--text-select-light)), rgb(var(--text-select-dark)));
}

/* body :focus-visible{ */
/* 	outline: 1px solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark))); */
/* 	outline: none; */
/* } */

hr{
	color: light-dark(rgb(var(--text-highlight-light)), rgb(var(--text-highlight-dark)));
}


.custom-icons{
	font-family: var(--font-icons);
}

/*Positioning and details via Semantic HTML & media queries*/

/*Nav*/
nav.site-nav-menu{
	background-color:rgba(0,0,0,0);
	position: fixed;
	top: 0;
	left: 0;
	height: fit-content;
	max-height: calc(100% - var(--font-size-normal-text) - 2.0 * var(--padding-width) - var(--border-width));
	width: var(--nav-max-width);
	z-index: 2;
	user-select: none;
}

nav .site-nav-menu-button{
	background-color: light-dark(rgb(var(--background-light)), rgb(var(--background-dark)));
	border-bottom: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	border-right:  var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	border-bottom-right-radius: 10px;
	margin: 0px;
	font-size: var(--font-size-nav-head);
	text-align: center;
	position: fixed;
	height: calc(var(--font-size-nav-head) + var(--padding-width));
	width: calc(var(--font-size-nav-head) + 2.0 * var(--padding-width));
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
	z-index: 12;
}

nav.active .site-nav-menu-button{
	border-bottom-right-radius: 0px;
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
	z-index: 12;
}

nav .site-nav-header{
	background-color: light-dark(rgb(var(--background-light)), rgb(var(--background-dark)));
	display: none;
	z-index: 5;
}

nav.active .site-nav-header{
	display: block;
	border-bottom: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	border-right: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	border-bottom-right-radius: var(--nav-directory-radius);
	margin: 0px;
	font-family: var(--font-text-serif);
	font-size: var(--font-size-nav-head);
	text-align: center;
	position: relative;
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
	z-index: 5;
}

.site-nav-title-bar{
	font-size: var(--font-size-nav-head);
	height: calc(var(--font-size-nav-head) + 1 * var(--padding-width));
	margin-left: calc(var(--font-size-nav-head) + var(--padding-width));
}

.site-nav-bar{
	border-top: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	margin: 0px;
	font-size: var(--font-size-nav-icon) !important;
	padding: calc(1.5 * var(--padding-width)) var(--padding-width) calc(0.5 * var(--padding-width)) var(--padding-width);
	/*width: calc(100% - 2.0 * var(--padding-width));*/
}

.site-nav-bar-element{
	display: inline-block;
	font-size: var(--font-size-nav-icon) !important;
	width: calc((100% - 2.0 * var(--padding-width)) / 7.0);
}

nav .site-nav-directory-container{
	display: none;
}

nav.active .site-nav-directory-container{
	display: block;
	direction: rtl;
	margin: 0px;
	padding: 0px;
	position: relative;
	top: -1px;
	left: -2px;
	height: fit-content;
	max-height: calc(100vh - var(--font-size-nav-head) - 2 * var(--font-size-nav-icon) - 14 * var(--padding-width) - var(--font-size-small-text));
	overflow-y: scroll;
}

.site-nav-directory{
	direction: ltr;
	margin: 0px;
	padding: 0px;
	font-family: var(--font-text-sans-serif);
	font-size: var(--font-size-nav-body);
	position: relative;
	right: var(--nav-directory-radius);
	width: calc(100% - var(--nav-directory-radius));
}

.site-nav-directory-header{
	background-color: light-dark(rgb(var(--background-light)), rgb(var(--background-dark)));
	/* box-shadow: 5px 0px 10px 10px; */
	border-top: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-bottom: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-right: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: var(--padding-width) var(--padding-nav-directory-arrow) var(--padding-width) calc(2.0 * var(--padding-width));
	position: relative;
	width: calc(100% - var(--border-width) - 2.0 * var(--padding-width) - var(--padding-nav-directory-arrow)x);
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
}

.site-nav-directory-header:after{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	/*   box-shadow: var(--nav-directory-step-width) 0 30px 5px light-dark(rgb(var(--background-light)), rgb(var(--background-dark)));*/
	/*transition: box-shadow var(--color-scheme-transition-duration) ease;*/
    z-index: -1;
}

:hover.site-nav-directory-header{
	background-color: light-dark(rgb(var(--nav-directory-hover-light)), rgb(var(--nav-directory-hover-dark)));
	cursor: pointer;
	transition: background-color var(--hover-mode-transition-duration) ease;
}

:focus-visible.site-nav-directory-header{
	background-color: light-dark(rgb(var(--nav-directory-hover-light)), rgb(var(--nav-directory-hover-dark)));
	cursor: pointer;
	transition: background-color var(--hover-mode-transition-duration) ease;
}

.site-nav-directory-header.active {
	background-color: light-dark(rgb(var(--nav-directory-active-light)), rgb(var(--nav-directory-active-dark)));
	transition: background-color var(--color-scheme-transition-duration) ease;
}

:hover.site-nav-directory-header.active{
	background-color: light-dark(rgb(var(--nav-directory-hover-light)), rgb(var(--nav-directory-hover-dark)));
	cursor: pointer;
	transition: background-color var(--hover-mode-transition-duration) ease;
}

:focus-visible.site-nav-directory-header.active{
	background-color: light-dark(rgb(var(--nav-directory-hover-light)), rgb(var(--nav-directory-hover-dark)));
	cursor: pointer;
	transition: background-color var(--hover-mode-transition-duration) ease;
}

.site-nav-directory-header-down{
	/* vertical-align: text-bottom; */
	display: inline !important;
	position: absolute;
	/* bottom: 0px; */
	right: 0px;
}

.site-nav-directory-header.active .site-nav-directory-header-down{
	display: none !important;
}

.site-nav-directory-header-up{
	/* vertical-align: text-bottom; */
	display: none !important;
	position: absolute;
	/* bottom: 0px; */
	right: 0px;
}

.site-nav-directory-header.active .site-nav-directory-header-up{
	display: inline !important;
}


.site-nav-directory-entry{
	background-color: light-dark(rgb(var(--background-light)), rgb(var(--background-dark)));
	border-top: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-bottom: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-right: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	display: none;
	margin: 0px;
	padding: var(--padding-width) 0px var(--padding-width) calc(2.0 * var(--padding-width));
	position: relative;
	width: calc(100% - var(--border-width) - 2.0 * var(--padding-width) - var(--nav-directory-step-width));
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
}

.site-nav-directory-entry:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*box-shadow: var(--nav-directory-step-width) 0 30px 5px rgb(var(--background-color));*/
    /*transition: box-shadow var(--color-scheme-transition-duration) ease;*/
	z-index: -1;
}

.site-nav-directory-header.active ~ .site-nav-directory-entry{
	display: block;
}

:hover.site-nav-directory-entry{
	background-color: light-dark(rgb(var(--nav-directory-hover-light)), rgb(var(--nav-directory-hover-dark)));
	cursor: pointer;
	transition: background-color var(--hover-mode-transition-duration);
}

.site-nav-directory-entry:focus-within{
	background-color: light-dark(rgb(var(--nav-directory-hover-light)), rgb(var(--nav-directory-hover-dark)));
	cursor: pointer;
	transition: background-color var(--hover-mode-transition-duration);
}

.site-nav-directory-entry > a{
	display:inherit;
	position:absolute;
	width:100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: inherit;
}

.site-nav-subdirectory{
	display: none;
	position: relative;
	width: calc(100% - var(--nav-directory-step-width));
}

.site-nav-directory-header.active ~ .site-nav-subdirectory{
	display: block;
}

/*Table of contents navigation menu*/
nav.toc-nav-menu{
	direction: rtl;
	background-color:rgba(0,0,0,0);
	position: fixed;
	top: 0;
	right: 0;
	/* right: calc(var(--font-size-h1) + var(--padding-width) - var(--nav-max-width)); */
	height: fit-content;
	max-height: calc(100% - var(--font-size-normal-text) - 2.0 * var(--padding-width) - var(--border-width));
	width: var(--nav-max-width);
	z-index: 2;
	user-select: none;
}

nav .toc-nav-menu-button{
	background-color: light-dark(rgb(var(--background-light)), rgb(var(--background-dark)));
	border-bottom: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-left:  var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-bottom-left-radius: 10px;
	display: block;
	font-size: var(--font-size-nav-head) !important;
	text-align: center;
	position: fixed;
	height: calc(var(--font-size-nav-head) + var(--padding-width));
	width: calc(var(--font-size-nav-head) + 2.0 * var(--padding-width));
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
	z-index: 10;
}

nav.active .toc-nav-menu-button{
	border-bottom-left-radius: 0px;
	display: block;
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
	z-index: 10;
}


nav .toc-nav-header{
	background-color: light-dark(rgb(var(--background-light)), rgb(var(--background-dark)));
	display: none;
	z-index: 5;
}

nav.active .toc-nav-header{
	display: block;
	/* border-bottom: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark))); */
	border-left: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	/* border-bottom-left-radius: var(--nav-directory-radius); */
	font-family: var(--font-text-serif);
	font-size: var(--font-size-nav-head);
	text-align: center;
	position: relative;
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
	z-index: 5;
}

.toc-nav-title-bar{
	height: calc(var(--font-size-nav-head) + 1 * var(--padding-width));
	font-size: var(--font-size-nav-head) !important;
	text-align: center;
	/* font-size: var(--font-size-normal-text); */
	margin-right: calc(var(--font-size-h1) + var(--padding-width));
}

nav .toc-nav-body{
	display: none;
	direction: ltr;
	background: light-dark(rgb(var(--background-light)), rgb(var(--background-dark)));
	font-family: var(--font-text-sans-serif);
	font-size: var(--font-size-nav-body) !important;
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
}

nav.active .toc-nav-body{
	display: block;
	border-top: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-bottom: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-left: var(--border-width) solid light-dark(rgb(var(--border-dark)), rgb(var(--border-dark)));
	border-bottom-left-radius: var(--nav-directory-radius);
	
	height: fit-content;
	max-height: calc(100vh - var(--font-size-nav-head) -  var(--padding-width) - var(--font-size-small-text));
	overflow-y: scroll;
}

ul.toc-nav-list{
	margin: 0px;
	padding: 0.0em 0em 0.5em 1.5em;
}

ul.toc-nav-list > ul{
	margin:  0px;
	padding: 0em 0em 0em 1.0em;
	/* border: 1px solid red; */
}

ul.toc-nav-list > ul > ul{
	margin: 0px;
	padding: 0em 0em 0em 1.0em;
	/* border: 1px solid green; */
}

ul.toc-nav-list > ul > ul > ul{
	margin: 0px;
	padding: 0em 0em 0em 1.0em;
	/* border: 1px solid blue; */
}

ul.toc-nav-list li{
	padding-right: var(--padding-width);
	/* display: block; */
	/* background: light-dark(rgb(var(--background-secondary-light)), rgb(var(--background-secondary-dark))); */
	/* border-top: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark))); */
	/* border-left: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark))); */
	/* border-bottom: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark))); */
	/* border-top-left-radius: var(--nav-directory-radius); */
	/* border-bottom-left-radius: var(--nav-directory-radius); */
}

/*Aside*/
aside > div.pagebackground{
	position: fixed;
	width: 50%;
	top: 50%;
	left: 50%;
	font-size: var(--font-size-desktop-background);
	text-align: center;
	color: light-dark(rgb(var(--background-secondary-light)), rgb(var(--background-secondary-dark)));
	transform: translate(-50%, -50%) rotate(-60deg);
	transition: color var(--color-scheme-transition-duration) ease;
}

/*Header*/

/*Main*/
main{
	/*background-color: rgb(45, 45, 45);*/
	font-family: var(--font-text-sans-serif);
	font-size: var(--font-size-normal-text);
	text-align: justify;
	line-height: 1.5em;
	margin-top: 10vh;
	margin-bottom: 10vh;
	/* margin-bottom: calc(60px + 1.5em); */
	/* margin-bottom: 50vh; */
	padding: 0px;
	width: var(--content-max-width);
	position: relative;

	/* border: 1px solid red; */
}

@media only screen and (min-width: 920px){
	main{
		left: calc((100% - var(--content-max-width)) / 2.0);
	}
}

main h1{
	position:relative;
	font-size: var(--font-size-h1);
	line-height: 125%;
	font-weight: bold;
}

main h2{
	position:relative;
	font-size: var(--font-size-h2);
	margin-top: var(--font-size-h2);
	margin-bottom: calc(0.5 * var(--font-size-h2));
	text-align: center;
	text-decoration: underline;
}

main h3{
	position:relative;
	font-size: var(--font-size-h3);
	margin-top: var(--font-size-h3);
	margin-bottom: calc(0.5 * var(--font-size-h3));
	text-align: center;
}

main h4{
	position:relative;
	font-size: var(--font-size-h4);
	margin-top: var(--font-size-h4);
	margin-bottom: calc(0.5 * var(--font-size-h4));
	text-align: center;
}

main h5{
	font-size: var(--font-size-h5);
}

main h6{
	font-size: var(--font-size-h6);
}

main p{
	text-indent: 5%;
	margin-top: 0px;
	margin-bottom: var(--font-size-normal-text)
}

main sup{
	vertical-align: 0;
	position: relative;
	bottom: 1ex;
}

main sub{
	vertical-align: 0;
	position: relative;
	top: 0.8ex;
}

main .boldtext{
	font-weight: bold;
}

main .italictext{
	font-style: italic;
}

main .monotext{
	font-family: var(--font-text-monospace);
}

main .underlinetext{
	text-decoration-line: underline;
	text-decoration-style: solid;
}
main .doubleunderlinetext{
	text-decoration-line: underline;
	text-decoration-style: double;
}
main .waveunderlinetext{
	text-decoration-line: underline;
	text-decoration-style: wavy;
}
main .dashunderlinetext{
	text-decoration-line: underline;
	text-decoration-style: dashed;
}
main .dotunderlinetext{
	text-decoration-line: underline;
	text-decoration-style: dotted;
}
main .overlinetext{
	text-decoration: overline;
}
main .striketext{
	text-decoration: line-through;
}

/*Title, abstract, and keyword divs*/
main > div.titleblock{
	text-align: center;
	margin-bottom: 5em;

	& > div.author{
		margin: 1em;
	}

	& > div.date{
		margin: 1em;
	}
}

main > div.abstract{
	padding-bottom: 0.5em;
	border-bottom: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	transition: border-bottom var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;

	& > div.abstracttitle{
		text-align: center;
		font-weight: bold;
		font-size: var(--font-size-h2);
		margin: 1em;
	}

	& > div.abstractcontent{
		text-indent: 5%;
		margin: 5%;
	}

	& > div.keywords{
		margin: 5%;

		& > span.keywordstitle{
			font-weight: bold;
			font-size: var(--font-size-h2);
			margin-right: 1em;	
		}

		/*& > span.keywordscontent{

		}*/
	}
}

/*Sections*/
section.section{
	border-top: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	margin: 0px;
	padding: 0px;
}
section.subsection{
	margin-top: var(--font-size-normal-text);
}
/* section > section{
	margin-left: 0.0em;
	margin-right: 0.0em;
	padding-left: 1.0em;
	padding-right: 1.0em;
	border-left: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	border-right: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
} */

/*Ordered and Unordered Lists*/
ol{
	margin-left: 5%;
	margin-right: 5%;
	padding: 0px;
	list-style-position: outside;
}

ul{
	margin-left: 5%;
	margin-right: 5%;
	padding: 0px;
	list-style-position: outside;
}

/*Captions*/
div.caption-block{
	/*border: 1px solid red;*/
	position: relative;
	width: 95%;
	left: 5%;
	margin-top: 1em;
	margin-left: 0%;
	margin-right: 5%;
	margin-bottom: 1em;

	display: table;
	table-layout: auto;
}

span.caption{
	text-align: justify;
	display: table-cell;
	/*border:1px solid green;*/
	width: 94.7%;

	& .caption-label{
		min-width: 50%;
		max-width: 50%;
		padding-right: 0.25em;
		font-weight: bold;
	}
	& .caption-content{
		padding-left: 0.25em;
	}
}

/*Bibliography*/
ol.bibliography{
	list-style-type: decimal;
	list-style-position: outside;
}

/*Footnotes*/
ol.footnotes{
	list-style-type: upper-latin;
	list-style-position: outside;
}

/*Tooltips*/
span.tooltipcontainer{
	position: relative;
}

sup.tooltipmark a{
	position: relative;
	z-index: 0;
}

span.tooltip{
	display: none;
	position: absolute;

	background-color: light-dark(
		rgb(var(--nav-directory-active-light)),
		rgb(var(--nav-directory-active-dark)));
	opacity: 0;
	transition: opacity var(--hover-mode-transition-duration);

	border: 1px solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	border-radius: 10px;
	padding: 5px;

	width: max-content;
	max-width: 50vw;
	top: 0;
	left: 0;
	text-align: justify;
	z-index: 2;
}

sup:hover + span.tooltip{
	display: block;
	position: absolute;
	opacity: 0;
	z-index: 2;
}

span.tooltip:hover{
	display: block;
	position: absolute;
	opacity: 1;
	z-index: 2;
}

/*Code Inline and Blocks*/

/*Generic inline code*/
code{
	border: 1px dashed light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	font-family: var(--font-text-monospace);
	padding-left: var(--padding-width);
	padding-right: var(--padding-width);
	transition: color var(--color-scheme-transition-duration) ease,
				border var(--color-scheme-transition-duration) ease;
	tab-size: 4;
}

/*Generic Code Block*/
pre{
	border: 1px solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	/* padding: 2px; */
	font-family: var(--font-text-monospace);
  	font-size: var(--font-size-small-text);
	line-height: 1.2em;
  	transition: color var(--color-scheme-transition-duration) ease,
	            border var(--color-scheme-transition-duration) ease;
	/* width: 90%; */
	/* margin-left: 5%; */
	/* margin-right: 5%; */
	tab-size: 4;

	counter-reset: line -1;

	& code{
		display: block;
		border: none;
		margin: 1px;
		counter-increment: line;
  		transition: color var(--color-scheme-transition-duration) ease,
	                border var(--color-scheme-transition-duration) ease;

		& .w{/*Whitespace*/
			color: light-dark(rgb(var(--text-light)), rgb(var(--text-dark)));
			/* text-decoration: underline; */
		}
		& .err{/*Error*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .x{/*???*/
			color: light-dark(rgb(var(--code-other-token-light)),
				rgb(var(--code-other-token-dark)));
			transition: inherit;
		}
		& .k{/*Keyword*/
			color: light-dark(rgb(var(--code-keyword-token-light)),
				rgb(var(--code-keyword-token-dark)));
			transition: inherit;
		}
		& .kc{/*Keyword.Constant*/
			color: light-dark(rgb(var(--code-keyword-token-light)),
				rgb(var(--code-keyword-token-dark)));
			transition: inherit;
		}
		& .kd{/*Keyword.Declaration*/
			color: light-dark(rgb(var(--code-keyword-token-light)),
				rgb(var(--code-keyword-token-dark)));
			transition: inherit;
		}
		& .kn{/*Keyword.Namespace*/
			color: light-dark(rgb(var(--code-keyword-token-light)),
				rgb(var(--code-keyword-token-dark)));
			transition: inherit;
		}
		& .kp{/*Keyword.Pseudo*/
			color: light-dark(rgb(var(--code-keyword-token-light)),
				rgb(var(--code-keyword-token-dark)));
			transition: inherit;
		}
		& .kr{/*Keyword.Reserved*/
			color: light-dark(rgb(var(--code-keyword-token-light)),
				rgb(var(--code-keyword-token-dark)));
			transition: inherit;
		}
		& .kt{/*Keyword.Type*/
			color: light-dark(rgb(var(--code-keyword-token-light)),
				rgb(var(--code-keyword-token-dark)));
			transition: inherit;
		}
		& .n{/*Name*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .na{/*Name.Attribute*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .nb{/*Name.Builtin*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .bp{/*Name.Builtin.Pseudo*/
			color: light-dark(rgb(var(--code-keyword-token-light)),
				rgb(var(--code-keyword-token-dark)));
			transition: inherit;
		}
		& .nc{/*Name.Class*/
			font-weight: bold;
			color: light-dark(rgb(var(--code-name-class-token-light)),
				rgb(var(--code-name-class-token-dark)));
			transition: inherit;
		}
		& .no{/*Name.Constant*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .nd{/*Name.Decorator*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .ni{/*Name.Entity*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .ne{/*Name.Exception*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .nf{/*Name.Function*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .py{/*Name.Property*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .nl{/*Name.Label*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .nn{/*Name.Namespace*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .nx{/*Name.Other*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .nt{/*Name.Tag*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .nv{/*Name.Variable*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .vc{/*Name.Variable.Class*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .vg{/*Name.Variable.Global*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .vi{/*Name.Variable.Instance*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .vm{/*Name.Variable.Magic*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .fm{/*Name.Function.Magic*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .fm{/*Name.Function.Magic*/
			color: light-dark(rgb(var(--code-name-token-light)),
				rgb(var(--code-name-token-dark)));
			transition: inherit;
		}
		& .l{/*Literal*/
			color: light-dark(rgb(var(--code-literal-token-light)),
				rgb(var(--code-literal-token-dark)));
			transition: inherit;
		}
		& .ld{/*Literal.Date*/
			color: light-dark(rgb(var(--code-literal-token-light)),
				rgb(var(--code-literal-token-dark)));
			transition: inherit;
		}
		& .s{/*String*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .sa{/*String.Affix*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .sb{/*String.Backtick*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .sc{/*String.Char*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .sd{/*String.Doc*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .s2{/*String.Double*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .se{/*String.Escape*/
			color: light-dark(rgb(var(--code-string-special-token-light)),
				rgb(var(--code-string-special-token-dark)));
			transition: inherit;
		}
		& .sh{/*String.Heredoc*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .si{/*String.Interpol*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .sx{/*String.Other*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .sr{/*String.Regex*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .s1{/*String.Single*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .ss{/*String.Symbol*/
			color: light-dark(rgb(var(--code-string-token-light)),
				rgb(var(--code-string-token-dark)));
			transition: inherit;
		}
		& .m{/*Number*/
			color: light-dark(rgb(var(--code-number-token-light)),
				rgb(var(--code-number-token-dark)));
			transition: inherit;
		}
		& .mf{/*Number.Float*/
			color: light-dark(rgb(var(--code-number-token-light)),
				rgb(var(--code-number-token-dark)));
			transition: inherit;
		}
		& .mh{/*Number.Hex*/
			color: light-dark(rgb(var(--code-number-token-light)),
				rgb(var(--code-number-token-dark)));
			transition: inherit;
		}
		& .mi{/*Number.Integer*/
			color: light-dark(rgb(var(--code-number-token-light)),
				rgb(var(--code-number-token-dark)));
			transition: inherit;
		}
		& .il{/*Number.Integer.Long*/
			color: light-dark(rgb(var(--code-number-token-light)),
				rgb(var(--code-number-token-dark)));
			transition: inherit;
		}
		& .mo{/*Number.Oct*/
			color: light-dark(rgb(var(--code-number-token-light)),
				rgb(var(--code-number-token-dark)));
			transition: inherit;
		}
		& .o{/*Operator*/
			color: light-dark(rgb(var(--code-operator-token-light)),
				rgb(var(--code-operator-token-dark)));
			transition: inherit;
		}
		& .ow{/*Operator.Word*/
			color: light-dark(rgb(var(--code-operator-token-light)),
				rgb(var(--code-operator-token-dark)));
			transition: inherit;
		}
		& .p{/*Punctuation*/
			color: light-dark(rgb(var(--code-punctuation-token-light)),
				rgb(var(--code-punctuation-token-dark)));
			transition: inherit;
		}
		& .c{/*Comment*/
			color: light-dark(rgb(var(--code-comment-token-light)),
				rgb(var(--code-comment-token-dark)));
			transition: inherit;
		}
		& .cm{/*Comment.Multiline*/
			color: light-dark(rgb(var(--code-comment-token-light)),
				rgb(var(--code-comment-token-dark)));
			transition: inherit;
		}
		& .cp{/*Comment.Preproc*/
			color: light-dark(rgb(var(--code-comment-token-light)),
				rgb(var(--code-comment-token-dark)));
			transition: inherit;
		}
		& .c1{/*Comment.Single*/
			color: light-dark(rgb(var(--code-comment-token-light)),
				rgb(var(--code-comment-token-dark)));
			transition: inherit;
		}
		& .cs{/*Comment.Special*/
			color: light-dark(rgb(var(--code-comment-token-light)),
				rgb(var(--code-comment-token-dark)));
			transition: inherit;
		}
		& .g{/*Generic*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .gd{/*Generic.Deleted*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .ge{/*Generic.Emph*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .gr{/*Generic.Error*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .gh{/*Generic.Heading*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .gi{/*Generic.Inserted*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .go{/*Generic.Output*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .gp{/*Generic.Prompt*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .gs{/*Generic.Strong*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .gu{/*Generic.Subheading*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
		& .gt{/*Generic.Traceback*/
			color: light-dark(rgb(var(--code-unhandled-token-light)),
				rgb(var(--code-unhandled-token-dark)));
			transition: inherit;
		}
	}
	& code:nth-child(even){
		background-color: light-dark(
			rgba(var(--background-dark),  0.035),
			rgba(var(--background-light), 0.035));
	}
	& code::before{
		display: inline-block;
		border-right: 1px solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
		width: 5%;
		padding-right: 0.5em;
		margin-right: 0.5em;

		text-align: right;
		content: counter(line)
	}
}

/*Math*/
table.equation{
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 1em;
	margin-bottom: 1em;

	& td{
		font-size: calc(1.25 * var(--font-size-normal-text));
		width: 90%;
		/* border: 1px solid red; */
	}

	& td.equation_number{
		font-size: var(--font-size-normal-text);
		width: 10%;
		/* border: 1px solid green; */
		text-align: right;
	}
}

/*Figures*/
div.figure{
	width: fit-content;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
}

img{
	/* border: 2px solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark))); */
	max-width: 100%;
	height: auto;
}

svg{
	max-width: 100%;
	path{
		transition: stroke var(--color-scheme-transition-duration) ease,
	                fill var(--color-scheme-transition-duration) ease;
	}
	tspan{
		transition: stroke var(--color-scheme-transition-duration) ease,
	                fill var(--color-scheme-transition-duration) ease;
	}
}

/*Tables*/
div.tabular{
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
}

table{
	/*margin-bottom: 0.5em;*/
	/*max-width: 100%;*/
	margin-left: auto;
	margin-right: auto;

	border-collapse: collapse;
	text-align: center;
	/*font-size: var(--font-size-small-text);*/
	/* & tr:nth-child(even){ */
	/* 	background-color: light-dark( */
	/* 		rgba(var(--background-dark),  0.05), */
	/* 		rgba(var(--background-light), 0.05)); */
	/* } */

	& tr.bts{
		border-top: var(--border-width) solid light-dark(rgb(var(--border-light)),rgb(var(--border-dark)));	
	}

	& tr.bbs{
		border-bottom: var(--border-width) solid light-dark(rgb(var(--border-light)),rgb(var(--border-dark)));
	}

	& th{
		/* border: 1px solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark))); */
		padding-right: 0.3em;
		padding-left:  0.3em;
		min-width: 1.6em;
	}

	& td{
		/* border: 1px solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark))); */
		/* width: 100%; */
		/* position: relative; */
		padding-right: 0.3em;
		padding-left:  0.3em;
		min-width: 1.6em;
		/* text-align: center; */
	}

	& td.bls{
		border-left: var(--border-width) solid light-dark(rgb(var(--border-light)),rgb(var(--border-dark)));
	}
	& td.brs{
		border-right: var(--border-width) solid light-dark(rgb(var(--border-light)),rgb(var(--border-dark)));
	}
	& td.bts{
		border-top: var(--border-width) solid light-dark(rgb(var(--border-light)),rgb(var(--border-dark)));
	}
	& td.bbs{
		border-bottom: var(--border-width) solid light-dark(rgb(var(--border-light)),rgb(var(--border-dark)));
	}

	& col.bls{
		border-left: var(--border-width) solid light-dark(rgb(var(--border-light)),rgb(var(--border-dark)));
	}
	& col.brs{
		border-right: var(--border-width) solid light-dark(rgb(var(--border-light)),rgb(var(--border-dark)));
	}

}

/*Footer*/
footer{
	background-color: light-dark(rgb(var(--background-light)), rgb(var(--background-dark)));
	border-top: var(--border-width) solid light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	font-family: var(--font-text-sans-serif);
	font-size: var(--font-size-small-text);
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-top: var(--padding-width);
	padding-bottom: var(--padding-width);
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 2;
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
}

@media only screen and (max-width: 920px){
	footer .footer-short{
		display: inline;
	}
	footer .footer-long{
		display: none;
	}
}

@media only screen and (min-width: 920px){
	footer .footer-long{
		display: inline;
	}
	footer .footer-short{
		display: none;
	}	
}

/*Links*/
[id]{
	position: relative;
	scroll-margin-top: 20vh;
	z-index: 1;
}

/* [id]::before{ */
/* 	position: absolute; */
/* 	top: 0; */
/* 	right: 0; */
/* 	bottom: 0; */
/* 	left: 0; */
/* 	content: ""; */
/* 	background-image: linear-gradient( */
/* 		to right, */
/* 		rgba(0, 0, 0, 0), */
/* 		light-dark(rgba(var(--background-dark), 1), rgba(var(--background-light), 1)), */
/* 		light-dark(rgba(var(--background-dark), 1), rgba(var(--background-light), 1)), */
/* 		light-dark(rgba(var(--background-dark), 1), rgba(var(--background-light), 1)), */
/* 		rgba(0, 0, 0, 0)); */
/* 	z-index: -1; */
/* 	opacity: 0; */
/* } */
/**/
/* [id]:target::before{ */
/* 	animation: linktargethighlight var(--color-scheme-transition-duration) ease-in-out; */
/* } */
/**/
/* @keyframes linktargethighlight{ */
/* 	0%   {opacity: 0;} */
/* 	33%  {opacity: 0.2;} */
/* 	66%  {opacity: 0.2;} */
/* 	100% {opacity: 0;} */
/* } */

/*Text links.*/
a:link.textlink{
	color: light-dark(rgb(var(--text-unvisited-link-light)), rgb(var(--text-unvisited-link-dark)));
	text-decoration: underline;
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
}
a:link.textlink:focus-visible{
	color: light-dark(rgb(var(--hover-mode-light)), rgb(var(--hover-mode-dark)));
	transition: color var(--hover-mode-transition-duration) ease;
}
a:visited.textlink{
	color: light-dark(rgb(var(--text-visited-link-light)), rgb(var(--text-visited-link-dark)));
	text-decoration: underline;
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
}
a:visited.textlink:focus-visible{
	color: light-dark(rgb(var(--hover-mode-light)), rgb(var(--hover-mode-dark)));
	transition: color var(--hover-mode-transition-duration) ease;

}
a:hover.textlink{
	color: light-dark(rgb(var(--hover-mode-light)), rgb(var(--hover-mode-dark)));
	cursor: pointer;
	text-decoration: underline;
	transition: background-color var(--color-scheme-transition-duration) ease;
	transition: color var(--hover-mode-transition-duration) ease;
}
a:active.textlink{
	color: light-dark(rgb(var(--hover-mode-light)), rgb(var(--hover-mode-dark)));
	cursor: pointer;
	text-decoration: underline;
}

/*Icon Links*/
.linkicon{
	color: light-dark(rgb(var(--text-light)), rgb(var(--text-dark)));
	text-decoration: none;
	font-size: inherit;
	/* display: block; */
	/*position: absolute;*/
	user-select: none;
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
}
:visited.linkicon{
	color: light-dark(rgb(var(--text-light)), rgb(var(--text-dark)));
	transition: background-color var(--color-scheme-transition-duration) ease,
	            color var(--color-scheme-transition-duration) ease;
}
:hover.linkicon{
	color: light-dark(rgb(var(--hover-mode-light)), rgb(var(--hover-mode-dark)));
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--color-scheme-transition-duration) ease;
	transition: color var(--hover-mode-transition-duration) ease;
}
:active.linkicon{
	color: light-dark(rgb(var(--hover-mode-light)), rgb(var(--hover-mode-dark)));
	cursor: pointer;
	text-decoration: none;
}
.linkicon:focus-visible{
	color: light-dark(rgb(var(--hover-mode-light)), rgb(var(--hover-mode-dark)));
	transition: color var(--hover-mode-transition-duration) ease;	
}

/*Linkable text*/
.linkable .copylink{
	position: absolute;
	opacity: 0%;
	transition: opacity var(--hover-mode-transition-duration) ease;
}
div.caption-block span.copylink{
	position: absolute;
	display: table-cell;
	vertical-align: middle;
	opacity: 0%;
	transition: opacity var(--hover-mode-transition-duration) ease;
}
.linkable:hover .copylink{
	opacity: 100%;
	transition: opacity var(--hover-mode-transition-duration) ease;
}

.linkable .copylink:focus-visible{
	opacity: 100%;
	transition: opacity var(--hover-mode-transition-duration) ease;

	& .linkicon{
		color: light-dark(rgb(var(--hover-mode-light)), rgb(var(--hover-mode-dark)));
		transition: color var(--hover-mode-transition-duration) ease;
	}
}

.copylink .linkicon{
	font-size: inherit;
	/*font-size: var(--font-size-desktop-h2);/*
	/* vertical-align: text-bottom; */
	position: relative;
}

/*Link Copied Note*/
@keyframes linkCopyNote{
	0% {opacity: 0%;
	}
	33% {opacity: 100%;
	}
	66% {opacity: 100%;
	}
	100% {opacity: 0%;
	}
}

#linkCopyNote{
	background-color: light-dark(rgb(var(--primary-accent-light)), rgb(var(--primary-accent-dark)));
	border-color: light-dark(rgb(var(--border-light)), rgb(var(--border-dark)));
	border-style: solid;
	border-radius: 10px;
	color: rgb(var(--text-color));
	font-size: var(--font-size-h2);
	padding: var(--padding-width);
	display: none;
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translate(-50%, 0);
	height: fit-content;
	width:fit-content;
	z-index: 2;

	animation: linkCopyNote;
	animation-duration: 2.0s;
	animation-timing-function: ease;
}