/* Define standard variables and values for website */

:root {
  color-scheme: light dark;

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

  --iconOrange: hsl(22, 100%, 51%);
  --iconOrangeDark: hsl(22, 100%, 49%);

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

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

  --resultV: hsl(0, 100%, 84%);
  --resultVDark: hsl(0, 100%, 16%);

  --resultW: hsl(49, 100%, 79%);
  --resultWDark: hsl(49, 100%, 21%);

  --resultMC: hsl(198, 53%, 81%);
  --resultMCDark: hsl(198, 53%, 19%);

  --resultP: hsl(90, 67%, 69%);
  --resultPDark: hsl(90, 67%, 31%);

  --resultNA: hsl(240, 100%, 96.7%);
  --resultNADark: hsl(240, 100%, 3.3%);

  --resultH: hsl(0, 0%, 87%);
  --resultHDark: hsl(0, 0%, 3%);

  --link: hsl(195, 100%, 42%);
  --linkDark: hsl(195, 100%, 58%);

  --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%);

  --footerBackground: #eee;
  --footerBackgroundDark: #222;

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

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

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;
}

.icon svg {
  width: 64px;
}

.icon path.border {
  stroke: light-dark(var(--iconBlue), var(--iconBlueDark));
  fill: none;
  stroke-width: 2;
  stroke: light-dark(var(--iconBlue), var(--iconBlueDark));
}

.icon polygon.text {
  stroke-width: 2;
  stroke: light-dark(var(--iconBlue), var(--iconBlueDark));
  fill: light-dark(var(--iconBlue), var(--iconBlueDark));
}

main a,
main 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: 32px;
  border: 1px solid light-dark(var(--iconBlue), var(--iconBlueDark));
}

.brand .version {
  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));
}

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

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

nav.second-level {
  margin: 0;
  margin-bottom: 1em;
}

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[aria-current] {
  text-decoration: none;
}

footer {
  margin-top: 40px;
}

a[href]:hover {
  text-decoration: underline;
}

.bg-light a,
.breadcrumb a,
nav.second-level a,
nav.second-level a:hover,
nav.second-level a:focus,
.navbar-nav .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: light-dark(var(--linkColor), var(--linkColorDark));
  outline-color: light-dark(var(--linkColor), var(--linkColorDark));
}

.breadcrumb a[aria-current],
nav.second-level a[aria-current],
.navbar-nav .nav-link[aria-current],
.navbar-nav .nav-link:hover[aria-current],
.navbar-nav .nav-link:focus {
  color: light-dark(var(--linkCurrentColor), var(--linkCurrentColorDark));
}

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

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

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;
  font-size: 2rem;
}

main 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.25rem;
}

main h4 {
  padding: 0;
  margin: 0;
  margin-top: 0.5em;
  font-size: 1.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;
}

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

.feedback {
  margin: 0;
  padding: 0.25em;
  margin-top: 5em;
  border-top: 2px solid #99b7e5;
}

.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 {
  margin: 0;
}

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

.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 tbody td ul {
  margin: 0;
  padding: 0;
}

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

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

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

main .faq details {
  margin: 0;
  padding: 0;
}

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(--footerBackground), var(--footerBackgroundDark));
  margin-bottom: 0.5em;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

main .faq ul {
  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 .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 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 code.v {
  color: light-dark(var(--textColor), var(--textColorDark));
  background-color: light-dark(var(--resultV), var(--resultVDark));
}

main code.w {
  color: light-dark(var(--textColor), var(--textColorDark));
  background-color: light-dark(var(--resultW), var(--resultWDark));
}

main code.mc {
  color: light-dark(var(--textColor), var(--textColorDark));
  background-color: light-dark(var(--resultMC), var(--resultMCDark));
}

main code.p {
  color: light-dark(var(--textColor), var(--textColorDark));
  background-color: light-dark(var(--resultP), var(--resultPDark));
}

main code.na {
  color: light-dark(var(--textColor), var(--textColorDark));
  background-color: light-dark(var(--resultNA), var(--resultNADark));
}

main code.h {
  color: light-dark(var(--textColor), var(--textColorDark));
  background-color: light-dark(var(--resultH), var(--resultHDark));
}



footer {
  margin: 0;
  background-color: light-dark(var(--footerBackground), var(--footerBackgroundDark));
}