/* Define standard variables and values for website */

:root {
  color-scheme: light dark;

  --iconBlue: hsl(216, 60%, 18%);
  --iconBlueDark: hsl(216, 60%, 82%);

  --iconBackground: hsl(0, 0%, 93%);
  --iconBackgroundDark: hsl(0, 0%, 7%);

  --iconWhite: hsl(0, 0%, 100%);
  --iconWhiteDark: hsl(0, 0%, 0%);

  --linkColor: hsl(216, 60%, 18%);
  --linkColorDark: hsl(216, 60%, 82%);

  --linkColorFocus: hsl(216, 100%, 60%);
  --linkColorFocusDark: hsl(216, 100%, 40%);

  --linkCurrentColor: #000;
  --linkCurrentColorDark: #eee;

  --linkIcon: hsl(195, 100%, 42%);
  --linkIconDark: hsl(195, 100%, 58%);

  --backgroundColor: hsl(0, 0%, 100%);
  --backgroundColorDark: hsl(0, 0%, 0%);

  --textColor:  hsl(0, 0%, 7%);
  --textColorDark:  hsl(0, 0%, 93%);

  --headingColor: hsl(214, 70%, 38%);
  --headingColorDark:  hsl(214, 70%, 62%);

  --imageBorder:  hsl(0, 0%, 87%);
  --imageBorderDark:  hsl(0, 0%, 13%);

  --font-family: arial, verdana, tahoma, "trebuchet MS", sans-serif;

  --asideBorder:  hsl(0, 0%, 87%);
  --asideBorderDark:  hsl(0, 0%, 13%);

  --asideBackgroundH2:  hsl(0, 0%, 87%);
  --asideBackgroundH2Dark:  hsl(0, 0%, 13%);

  --footerColor:  hsl(0, 0%, 7%);
  --footerColorDark:  hsl(0, 0%, 93%);

  --footerBackground:  hsl(0, 0%, 90%);
  --footerBackgroundDark: hsl(0, 0%, 10%);

  --faqBackground:  hsl(195, 100%, 92%);
  --faqBackgroundDark: hsl(195, 100%, 15%);

  --codeColor: hsl(0, 80%, 30%);
  --codeColorDark: hsl(0, 80%, 70%);

}


body {
  margin: 0;
  padding: 0;
  color: light-dark(var(--textColor), var(--textColorDark)) !important;
  background-color: light-dark(var(--backgroundColor), var(--backgroundColorDark)) !important;
  font-family: var(--font-family);
}

header,
header nav {
  background-color: light-dark(var(--backgroundColor), var(--backgroundColorDark)) !important;
}

.icon {
  display: inline-block;
}

header .brand svg {
  width: auto;
  height: 64px;
}

svg .brand text {
  font-size: 17px;
}

svg .brand .aria rect {
  fill: light-dark(hsl(358, 95%, 40%), hsl(358, 95%, 60%));
}

svg .brand .aria text {
  fill: light-dark(#ffffff, #000000);
}

svg .brand .landmark rect {
  fill: light-dark(hsl(216, 60%, 18%), hsl(216, 60%, 82%));
}

svg .brand .landmark text {
  fill: light-dark(#ffffff, #000000);
}

svg .brand .regions rect {
  fill: light-dark(#dddddd, #333333);
}

svg .brand .regions text {
  fill: light-dark(hsl(216, 60%, 18%), hsl(216, 60%, 82%));
}




main a,
main a:visited,
footer a,
footer a:visited {
  color: light-dark(var(--linkColor), var(--linkColorDark));
}

.brand {
  display: block;
  font-style: normal;
  margin: 0.25em;
}

.brand .icon {
  padding: 0;
  margin: 0;
  display: inline-block;
}

.brand .icon img {
  padding: 0;
  margin: 0;
  height: 64px;
  border: 1px solid light-dark(var(--iconBlue), var(--iconBlueDark));
}

.brand .version {
  position: relative;
  top: 5px;
  display: inline-block;
  padding: 0;
  margin: 0;
  color: light-dark(var(--iconBlue), var(--iconBlueDark));
}

.tagline {
  padding: 0.25em;
  padding-left: 1em;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-size: 2em;
  color: light-dark(var(--iconWhite), var(--iconWhiteDark));
  background: light-dark(var(--iconBlue), var(--iconBlueDark));
}

.tagline .reference {
  font-size: 12pt;
  font-weight: normal;
  font-style: italic;
}

blockquote {
  margin: 1em 15%;
  text-align: center;
}

nav ol.breadcrumb {
  padding-left: 0;
}

nav.second-level {
  padding: 0;
  margin: 0;
}

nav.second-level + h1 {
  margin-top: 0;
}


nav.second-level a {
  display: inline-block;
  padding: 0.125em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin: 0.5em;
  margin-left: 0;
  margin-right: 0;
  font-size: 110%;
}

nav.second-level a:first-child {
  padding-left: 0.125em;
}

nav.second-level a[aria-current] {
  text-decoration: none;
}

a[href] {
  display: inline-block;
}

a[href]:hover,
a[href]:focus {
  text-decoration: underline !important;
}

a[href]:not([role]):focus {
  outline: 3px solid light-dark(var(--linkColorFocus), var(--linkColorFocusDark)) !important;
}

.breadcrumb a[href],
main  a[href],
footer  a[href] {
  outline-offset: 3px;
}

main .second-level a[href] {
  outline-offset: -3px;
}

.dropdown-menu hr.dropdown-divider {
  border-color: light-dark(var(--linkColor), var(--linkColorDark));
}

.bg-light a,
.breadcrumb a,
nav.second-level a,
.navbar-nav .nav-link,
.navbar-nav .nav-link.show,
.dropdown-menu .dropdown-item {
  color: light-dark(var(--linkColor), var(--linkColorDark));
}

.dropdown-menu {
  background-color: light-dark(var(--backgroundColor), var(--backgroundColorDark)) !important;
  border-color: light-dark(var(--linkColor), var(--linkColorDark)) !important;
}

.breadcrumb a[aria-current],
nav.second-level a[aria-current],
.nav-link[aria-current],
.nav-link:hover[aria-current],
.nav-link:focus-visible,
.dropdown-item:hover[aria-current],
.dropdown-item:focus-visible {
  color: light-dark(var(--linkColor), var(--linkColorDark));
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  outline: 3px solid light-dark(var(--linkColorFocus), var(--linkColorFocusDark)) !important;
  background-color: light-dark(var(--backgroundColor), var(--backgroundColorDark)) !important;
}

.nav-link:hover,
.nav-link:focus-visible,
.dropdown-item:hover,
.dropdown-item:focus-visible {
  box-shadow: 0 0 0 0.15rem light-dark(var(--linkColorFocus), var(--linkColorFocusDark));
}

.tab-pane {
  margin-top: 1em;
}

div.language-html {
  font-family: monospace courier;
  padding: 0.5em;
  color: light-dark(#24292E, #cad0d5);
  display: flex;
}

code {
  color: light-dark(var(--codeColor), var(--codeColorDark)) !important;
}

div.language-html pre > code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
  overflow-y: scroll;
}

div.language-html .highlight {
  margin-bottom: 16px;
  overflow-y: scroll;
}

div.language-html .highlight pre {
  margin-bottom: 0;
  word-break: normal;
  overflow-y: scroll;
}

div.language-html .highlight pre,
div.language-html pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: light-dark(#f6f8fa, #0a0804);
  border-radius: 3px;
  overflow-y: scroll;
}

div.language-html pre code,
div.language-html pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

div.language-html pre .nt {
  color: light-dark(darkgreen, lightgreen);
}

div.language-html pre .kd,
div.language-html pre .nx {
  color: light-dark(#953800, #ff985a);
}

div.language-html pre .na {
  color: light-dark(#005cc5, #63acff);
}

div.language-html pre .c1 {
  color: light-dark(#005cc5, #63acff);
}

div.language-html pre .k {
  color: light-dark(#d73a49, #c22736);
}

figure.image {
  margin: 0;
  margin-top: 1em;
  margin-bottom: 3em;
  max-width: 98%;
}

figure.image img {
  border: 2px solid light-dark(var(--imageBorder), var(--imageBorderDark));
  width: 100%;
}

figure.image figcaption {
  margin: 0;
  padding: 0.25em;
  font-weight: bold;
  font-size: 110%;
  background-color: light-dark(var(--imageBorder), var(--imageBorderDark));
  width: 100%;
  text-align: center;
}

main h1 {
  padding: 0;
  margin: 0;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-size: 2rem;
}

main h2,
aside h2 {
  padding: 0;
  margin: 0;
  margin-top: 1em;
  font-size: 1.5rem;
}

main .feature h2 {
  margin-top: 0.25em;
}

main h3 {
  padding: 0;
  margin: 0;
  margin-top: 0.5em;
  font-size: 1.1rem;
}

main h4 {
  padding: 0;
  margin: 0;
  margin-top: 0.5em;
  font-size: 1rem;
}

main .feature div.type {
  margin: 0;
  padding: 0;
  margin-top: 0.5em;
}

main .feature ul.type {
  margin: 0;
  padding: 0;
}

main .feature ul.type li {
  margin: 0;
  padding: 0;
  list-style: none;
}

main .feature ul.type li .extension {
  font-weight: bold;
}

aside {
  margin:0;
  padding:0 !important;
  margin-top: 2em;
  border-width: 2px;
  border-style: solid;
  border-color:  light-dark(var(--asideBorder), var(--asideBorderDark));
  border-radius: 5px;
}

aside.first {
  margin-top: 6em;
}

aside h2 {
  margin: 0;
  padding: 0.25em;
  background-color: light-dark(var(--asideBackgroundH2), var(--asideBackgroundH2Dark));
}

aside .content {
  margin: 0;
  padding: 0.5em;
}

aside .button {
  margin: 0;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  padding: 0.5em;
  text-align: center;
}

aside .button button {
  width: 10em;
}

aside h3 {
  margin: 0;
  padding: 0;
  margin-top: 1em;
  font-size: 100%;
  font-weight: bold;
}

aside .counts {
  margin: 0;
  padding: 0.25em;
  list-style: none;
}


aside .resources  {
  margin: 0;
  padding: 0.5em;
  padding-left: 1em;
  list-style: none;
}


aside .resources li {
  margin-bottom: 0.5em;
}


div.params {
  margin: 0.5em 0;
  padding: 0.5em;
}

.feedback {
  margin-bottom: 1em;
}

.bg-light code {
  color: light-dark(darkred, lightred);
}

.bg-light span.nt {
  color: light-dark(darkgreen, lightgreen);
}

p.happy {
  font-family: fantasy, cursive;
  font-size: 1.5em;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0.05em;
}

main ul.shortcuts {
  margin: 0;
  padding: 0;
  list-style: none;
}

main ul.shortcuts li {
  margin: 0;
  padding: 0;
}

main li span.shortcut {
  display: inline-block;
  width: 1.5em;
  font-weight: bold;
}

main .feature {
  margin: 0;
  padding: 0;
  margin-top: 2em;
  border-top: 2px solid light-dark(var(--headingColor), var(--headingColorDark));
}

main h1,
main h2,
main h3 {
  color: light-dark(var(--headingColor), var(--headingColorDark));
}

main h2 {
  margin-top: 0;
}

main .feature ul,
main .feature ol {
  margin: 0;
  padding: 0;
  padding-left: 1em;
}

main .feature ul li,
main .feature ol li {
  margin: 0;
  padding: 0;
  padding-bottom: 0.5em;
}

main .feature ul ol li,
main .feature ol ol li {
  margin: 0;
  padding: 0;
  padding-bottom: 0.125em;
}

aside {
  border: ;
}

.hidden-small {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.hidden-offscreen {
  position: absolute;
  top: -30em;
  left: -300em;
}

.no {
  text-transform: lowercase;
  font-style: italic;
  font-weight: bold;
  font-size: 90%;
}

table.table tbody th a[href] {
  font-weight: normal;
}

table.table th,
table.table td {
  color: light-dark(var(--textColor), var(--textColorDark));
  background-color: light-dark(var(--backgroundColor), var(--backgroundColorDark));
}

table.table tbody td ul,
table.table tbody td ol {
  margin: 0;
  padding: 0;
}

table.table tbody td li {
  margin: 0;
  padding: 0;
  margin-left: 1.75em;
}

main dt {
  font-size: 120%;
  margin: 0;
  padding: 0;
  margin-top: 1em;
  line-height: 1.2em;
}

main dd {
  font-size: 110%;
  margin: 0;
  margin-bottom: 1em;
  padding: 0;
  margin-left: 0.5em;
  line-height: 1.2em;
}

main dd em {
  font-style: italics;
  font-weight: bold;
}

main details.screenshot {
  margin: 0;
  padding: 0;
  margin-left: 1em;
  margin-bottom: 2em;
  color: light-dark(var(--linkColor), var(--linkColorDark));
}

main details.screenshot summary {
  font-size: 110%;
  width: 14em;
}

main details.screenshot summary:hover,
main details.screenshot:focus-visible,
main details.screenshot summary:focus-visible {
  box-shadow: none;
  outline: light-dark(var(--linkColorFocus), var(--linkColorFocusDark)) 2px solid;
  outline-offset: 2px;
}

main details.screenshot summary:hover path.camera,
main details.screenshot:focus-visible path.camera,
main details.screenshot summary:focus-visible path.camera {
  fill: light-dark(var(--linkColorFocus), var(--linkColorFocusDark));
}

main details.screenshot:hover::marker,
main details.screenshot summary:hover::marker,
main details.screenshot:focus-visible::marker,
main details.screenshot summary:focus-visible::marker {
  color: light-dark(var(--linkColorFocus), var(--linkColorFocusDark));
}


main details.screenshot .show {
  display: inline;
}

main details.screenshot .hide {
  display: none;
}

main details.screenshot[open] .show {
  display: none;
}

main details.screenshot[open] .hide {
  display: inline;
}

main .faq details summary {
  margin: 0;
  padding: 0.25em;
  font-size: 110%;
  font-weight: bold;
}

main .faq details .content {
  margin: 0.25em;
  padding: 0.5em;
  padding-left: 1em;
  background-color: light-dark(var(--faqBackground), var(--faqBackgroundDark));
  margin-bottom: 0.5em;
  border-color: light-dark(var(--faqBackground), var(--faqBackgroundDark));
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

main .faq ul,
main .faq ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

main .faq details .content li {
  margin: 0;
  padding: 0;
  margin-top: 0.125em;
  margin-bottom: 0.5em;
}

main .code {
  margin-top: 0.5em;
  padding: 0.5em;
  background-color: light-dark(#eee, #333);
  border-color: light-dark(#ddd, #444);
  border-width: 2px;
  border-style: solid;
  border-radius: 5px;
}

main .code code em {
  color: light-dark(var(--textColor), var(--textColorDark));
  opacity: 0.9;
}

main .table > :not(caption) > * > * {
  color: light-dark(var(--textColor), var(--textColorDark));
  background-color: light-dark(var(--textBackground), var(--textBackGroundDark));
}

main .table-striped > tbody > tr:nth-child(odd) > * {
  color: light-dark(var(--textColor), var(--textColorDark));
  background-color: light-dark(#eee, #333);
}

main .faq .content h2 {
  margin-top: 2em;
  font-size: 110%;
}

main .note {
  font-weight: bold;
}

main .recommendation {
  font-style: italic;
}

main section h2 {
  margin-top: 2em;
  border-bottom: 1px solid light-dark(var(--textColor), var(--textColorDark));
  margin-bottom: 0.125em;
}

main code.result {
  padding: 1px 0.125em ;
  display: inline-block;
  width: 3em;
  text-align: center;
}

main [role="tabpanel"] > p,
main [role="tabpanel"] > ul {
  margin-top: 0.5em;
}

section[aria-labelledby] p {
  padding-bottom: 0;
  margin-bottom: 0;
}

main [role="tabpanel"] > h3 + p {
  margin-top: 0;
}

main [role="tablist"] [role="tab"].nav-link.active:focus,
main [role="tablist"] [role="tab"].nav-link.active:focus-visible, {
  border: none;
}

main [role="tablist"].nav-tabs .nav-item:has([aria-selected="true"]),
main [role="tablist"].nav-tabs .nav-link[aria-selected="true"] {
  color: light-dark(var(--textColor), var(--textColorDark));
  background-color: light-dark(var(--backgroundColor), var(--backgroundColorDark));
  border-bottom-color: light-dark(var(--backgroundColor), var(--backgroundColorDark));
}



footer  {
  margin: 0;
  margin-top: 2em;
  color: light-dark(var(--footerColor), var(--footerColorDark));
  background-color: light-dark(var(--footerBackground), var(--footerBackgroundDark));
}