a { color: var(--clr-a); }

a:active { color: var(--act-a); }

a.sup {
	color:           var(--info-color);
	font-size:       .83em;
	font-style:      italic;
	font-weight:     600;
	text-decoration: none;
	vertical-align:  super;
}

a.sup::selection {
	background: var(--info-color);
	color:      var(--page-bg);
}

blockquote {
	background:     var(--blkqt-bg);
	border-color:   var(--blkqt-brd);
	border-style:   none none none solid;
	border-width:   3px;
	display:        block;
	margin-top:     0.5em;
	margin-bottom:  0.5em;
	margin-left:    2em;
	margin-right:   1em;
	padding-bottom: 0.3em;
	padding-left:   0.75em;
	padding-right:  0.5em;
	padding-top:    0.3em;
	width:          fit-content;
}

blockquote p {
	color:         var(--blkqt-fg);
	font-family:   var(--blkqt-fnt);
	margin:        0;
	text-shadow: 2px 2px 3px var(--blkqt-sdw);
}

body {
	background-color: var(--page-bg);
	padding:          1.7em;
}

.bottom {
	background-color: var(--bottom-bg);
	border-radius:    4px;
	padding:          0.2em;
	position:         absolute;
	bottom:           8px;
	text-align:       center;
}

.container {
	position:   relative;
	text-align: center;
	color:      white;
}

div.lang-tag {
	background:    var(--bg-lang-tag);
	border-color:  var(--brd-lang-tag);
	border-width:  3em;
	border-radius: 3px 0 0 24px;
	color:         var(--txt-lang-tag);
	padding-right: 0.2em;
	padding-top:   0.3em;
	position:      relative;
	left:          94%;
	text-align:    center;
	width:         7%;
}

em {
	color:       var(--italics-color);
	font-family: 'Nunito Sans Light Italic';
}

em::selection {
	background: var(--italics-color);
	color:      var(--page-bg);
}

grid-container-2 {
	border:                1em;
	border-color:          var(--gc2-border);
	display:               inline-grid;
	grid-template-columns: auto auto;
	padding:               0px;
	width:                 100%;
}

.grid-container-3 {
	border:                1em;
	border-color:          var(--gc3-border);
	display:               inline-grid;
	grid-template-columns: auto auto auto;
	padding:               0px;
	width:                 100%;
}

grid-item {
	position:   relative;
	color:      var(--fg-grid-item);
	padding:    0px;
	text-align: left;
}

.grid-item-text {
	position:    relative;
	color:       var(--txt-grid-item);
	padding-top: -10px;
	text-align:  left;
}

h1 {
	color:       var(--h1-color);
	font-family: 'Argesta Headline';
	font-size:   54px;
	font-weight: 500;
	padding:     0em;
	margin:      0em;
}

h1::selection,h2::selection {
	background: var(--h1-color);
	color:      var(--page-bg);
	padding:    0em;
}

h2 {
	color: var(--h2-color);
	font-family:   'Nunito Sans ExtraLight';
	font-size:     36px;
	font-weight:   400;
	margin-bottom: 0em;
}

h3 {
	color: var(--h3-color);
	font-family: 'Montserrat Semi Bold';
	font-size:   18px;
}

h3::selection {
	background: var(--h3-color);
	color:      var(--page-bg);
}

h4 {
	color:       var(--h4-color);
	font-family: 'Montserrat Semi Bold';
}

h4::selection {
	background: var(--code-color);
	color:      var(--page-bg);
}

hr {
	border: 1px solid var(--hr-color);
}

img {
/*  border: 1px solid var(--img-border-color); */
	border-radius: 8px;
	margin:        1em;
	max-width:     600px;
}

img.small {
	border         1px solid var(--img-border-color);
	border-radius: 8px;
	margin:        1em;
	max-width:     250px;
}

img.large {
	border:        1px solid var(--img-border-color);
	border-radius: 8px;
	margin:        1em;
	max-width:     900px;
	/* min-width: 500px; */
}

img.xl {
	border:        1px solid var(--img-border-color);
	border-radius: 8px;
	margin:        1em;
	max-width:     1700px;
	/* min-width: 500px; */
}

img.logo {
	float:     right;
	max-width: 200px;
}

img::selection, img.large::selection {
	background: var(--gen-select);
	color:      var(--page-bg);
}

li {
	color:       var(--li-color);
	font-family: 'Nunito Sans Light';
}

li::selection {
	background: var(--gen-select);
	color:      var(--page-bg);
}

li code {
	background-color: var(--code-bg-color);
	border-radius:    4px;
	color:            var(--code-color);
	padding-bottom:   0.1em;
	padding-left:     0.2em;
	padding-right:    0.3em;
	padding-top:      0.4em;
}

li code::selection {
	background: var(--code-color);
	color:      var(--code-bg-color);
}

p {
	color:       var(--p-fg);
	font-family: 'Nunito Sans Light';
}

p::selection {
	background: var(--gen-select);
	color:      var(--page-bg);
}

p code {
	background:     var(--code-bg-color);
	border-radius:  4px;
	color:          var(--code-color);
	padding-bottom: 0.1em;
	padding-left:   0.3em;
	padding-right:  0.3em;
	padding-top:    0.1em;
}

p code::selection {
	background: var(--code-color);
	color:      var(--code-bg-color);
}

pre {
	background:    var(--code-bg-color);
	border-radius: 4px;
	color:         var(--pre-fmt-color);
	overflow-x:    auto;
	padding:  0.5em;
	/* padding-right: 1em; */
	width: fit-content;
}

pre code {
	background:  var(--code-bg-color);
	color:       var(--pre-fmt-color);
	white-space: pre;
}

pre code::selection {
	background: var(--pre-fmt-color);
	color:      var(--code-bg-color);
}

strong { font-family: 'Nunito Sans Bold'; }

strong::selection {
	background: var(--italics-color);
	color:      var(--page-bg);
}

table, th, td {
	border:          1px solid var(--table-bdr-clr);
	border-collapse: collapse;
	color:           var(--table-txt-clr);
	text-align: right;
	padding: 0.25em;
}

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted var(--brd-bot-tooltip);
}

.tooltip .tooltipcontent {
	visibility: hidden;

	background-color: var(--bg-tooltip);
	border: 1px solid var(--brd-tooltip);
	border-radius: 0.5em;
	color: var(--txt-tooltip);
	text-align: center;

	position: absolute;
	z-index: 1;
}

.tooltip:hover .tooltipcontent {
	visibility: visible;
	
	top: 100%;
	left: 0%;
}

ul {
	list-style-type: none;
}

/* Scrollbar */

::-webkit-scrollbar {
	height: 5px;
	width:  5px;
}

::-webkit-scrollbar-track {
	background:    var(--bg-scroll-track);
	box-shadow:    inset 0 0 0 var(--sdw-scroll-track);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background:    var(--bg-scroll-thb);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--act-scroll-thb);
}