:root:not([data-theme=dark]), [data-theme=light] {
    --color: hsl(205deg, 20%, 22%);
}

nav, nav ul {
    display:flex
}

nav {
    justify-content:space-between
}

nav ol, nav ul {
    align-items: center;
    margin-bottom: 0;
    padding: 0;
    list-style:none
}

nav ol:first-of-type, nav ul:first-of-type {
    margin-left:calc(var(--nav-element-spacing-horizontal) * -1)
}

nav ol:last-of-type, nav ul:last-of-type {
    margin-right:calc(var(--nav-element-spacing-horizontal) * -1)
}

nav li {
    display: inline-block;
    margin: 0;
    padding:var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal)
}

nav li > * {
    --spacing:0
}

nav :where(a, [role=link]) {
    display: inline-block;
    margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
    border-radius: var(--border-radius);
    text-decoration:none
}

nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
    text-decoration:none
}

nav[aria-label=breadcrumb] {
    align-items: center;
    justify-content:start
}

nav[aria-label=breadcrumb] ul li:not(:first-child) {
    -webkit-margin-start: var(--nav-link-spacing-horizontal);
    margin-inline-start:var(--nav-link-spacing-horizontal)
}

nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
    position: absolute;
    width: calc(var(--nav-link-spacing-horizontal) * 2);
    -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
    margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
    content: "/";
    color: var(--muted-color);
    text-align:center
}

nav[aria-label=breadcrumb] a[aria-current] {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
    pointer-events:none
}

nav [role=button] {
    margin-right: inherit;
    margin-left: inherit;
    padding:var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal)
}

:root:not([data-theme=dark]), [data-theme=light] {
    --invalid-color: #c62828;
    --valid-color: #388e3c;
    --nav-background-color: rgba(255, 255, 255, 0.7);
    --nav-border-color: rgba(115, 130, 140, 0.2);
    --nav-logo-color: #fff;
    --article-code-background-color:#f9fafb
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
        --invalid-color: rgba(183, 28, 28, 0.5);
        --valid-color: rgba(46, 125, 50, 0.5);
        --nav-background-color: rgba(16, 24, 30, 0.8);
        --nav-border-color: rgba(115, 130, 140, 0.2);
        --nav-logo-color: #0e1419;
        --article-code-background-color:var(--code-background-color)
    }
}

[data-theme=dark] {
    --invalid-color: rgba(183, 28, 28, 0.5);
    --valid-color: rgba(46, 125, 50, 0.5);
    --nav-background-color: rgba(16, 24, 30, 0.8);
    --nav-border-color: rgba(115, 130, 140, 0.2);
    --nav-logo-color: #0e1419;
    --article-code-background-color:var(--code-background-color)
}

html {
    scroll-behavior:smooth
}

.switcher {
    position: fixed;
    right: calc(var(--spacing)/ 2 + var(--scrollbar-width,0px));
    bottom: var(--spacing);
    width: auto;
    margin-bottom: 0;
    padding: .75rem;
    border-radius: 2rem;
    box-shadow: var(--card-box-shadow);
    line-height: 1;
    text-align: right
}

.switcher::after {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: .15rem solid currentColor;
    border-radius: 50%;
    background: linear-gradient(to right,currentColor 0,currentColor 50%,transparent 50%);
    content: "";
    vertical-align: bottom;
    transition: transform var(--transition)
}

.switcher i {
    display: inline-block;
    max-width: 0;
    padding: 0;
    overflow: hidden;
    font-style: normal;
    font-size: .875rem;
    white-space: nowrap
}

.switcher:focus,.switcher:hover {
    max-width: 100%;
    transition: background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition)
}

.switcher:hover::after {
    transform: rotate(180deg)
}

.switcher:hover i {
    max-width: 100%;
    padding: 0 calc(var(--spacing)/ 2) 0 calc(var(--spacing)/ 4);
    transition: max-width var(--transition),padding var(--transition)
}

.switcher:focus {
    box-shadow: var(--card-box-shadow),0 0 0 .2rem var(--secondary-focus)
}

@media (min-width: 576px) {
    .switcher {
        right:calc(var(--spacing) + var(--scrollbar-width,0px))
    }
}

:root:not([data-theme=dark]),[data-theme=light] {
    --demo-background: linear-gradient( 180deg, #fff 0%, rgba(188, 235, 251, 0.25) 33%, rgba(188, 235, 251, 0.25) 66%, #fff 100% )
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
        --demo-background:linear-gradient(180deg, #11191f 0%, rgba(10, 53, 67, 0.5) 33%, rgba(10, 53, 67, 0.5) 66%, #11191f 100%)
    }
}

[data-theme=dark] {
    --demo-background: linear-gradient(180deg, #11191f 0%, rgba(10, 53, 67, 0.5) 33%, rgba(10, 53, 67, 0.5) 66%, #11191f 100%)
}

body {
    width: 100%;
    margin:0;
    min-height: 100vh;
    display:flex;
    flex-direction:column;
}

footer, header, main > section {
    --block-spacing-vertical: 3rem;
    --demo-height: calc(4.5rem + 352px);
    width: 100%;
    margin: 0;
    padding:var(--block-spacing-vertical) 0;
}

@media (min-width: 576px) {
    footer, header, main > section {
        --block-spacing-vertical: 4rem;
        --demo-height:calc(6rem + 392px)
    }
}

@media (min-width: 768px) {
    footer, header, main > section {
        --block-spacing-vertical: 5rem;
        --demo-height:calc(7.5rem + 440px)
    }
}

@media (min-width: 992px) {
    footer, header, main > section {
        --block-spacing-vertical: 6rem;
        --demo-height:calc(9rem + 488px)
    }
}

@media (min-width: 1200px) {
    footer, header, main > section {
        --block-spacing-vertical: 7rem;
        --demo-height:calc(10.5rem + 540px)
    }
}

header {
    padding-bottom: 0;
}

body > nav {
    --nav-link-spacing-vertical: 1rem;
    box-shadow: 0 1px 0 var(--nav-border-color);
}

body > nav a {
    border-radius:0
}

body > nav a svg {
    vertical-align: text-bottom;
    height:1rem
}

body > nav ul:first-of-type {
    margin-left:calc(var(--spacing) * -1)
}

body > nav ul:first-of-type li {
    padding:0
}

body > nav ul:first-of-type li:first-of-type a {
    display: block;
    margin: 0;
    padding: 0;
    background: var(--h1-color);
    color:var(--nav-logo-color)
}

body > nav ul:first-of-type li:first-of-type a svg {
    display: block;
    width: 3.5rem;
    height:3.5rem
}

body > nav ul:first-of-type li:nth-of-type(2) {
    margin-left: calc(var(--spacing) * 1.5);
    color: var(--h1-color);
    font-weight:200
}

body > nav ul:first-of-type li:nth-of-type(2) strong {
    font-weight:400
}

@media (min-width: 992px) {
    body > nav ul:first-of-type li:nth-of-type(2) {
        display:inline
    }
}

body > footer ul, body > footer ul li {
    margin-bottom: 0;
    padding: 0;
    color: var(--muted-color);
    list-style:none
}

body > footer li {
    display:inline-block
}

body > footer li:not(:first-child)::before {
    margin: 0 .25rem;
    content: "·"
}

body > footer ul:first-of-type {
    margin-bottom:calc(var(--spacing) * .5)
}

body > footer ul:first-of-type a {
    text-decoration:none
}

@media (max-width: 767px) {
    body > footer ul:last-of-type li {
        display:list-item
    }

    body > footer ul:last-of-type li::before {
        display: none
    }
}

details summary:not([role]) {
    color: var(--muted-color);
}

details textarea {
  font-size: 0.875em;
}

.article-container  {
  max-width: 800px !important;
  padding-top: 0;
}

.article-container header {
    border: 0;
    padding: 0;
    margin: 0 0 var(--typography-spacing-vertical) 0;
    background: none;
}

.article-container h1,
.article-container h2 {
  line-height: 1.2;
  --font-size: 1.75rem;
  --typography-spacing-vertical: 2.625rem
}

.article-container article {
  margin-top: 0;
  margin-bottom: 10px;
  padding: var(--block-spacing-vertical) var(--block-spacing-vertical);
}

.article-container article p,
.article-container article ul,
.article-container article table {
  font-size: .875rem;
}

.article-container article img {
  margin-bottom: 20px;
  max-width: 100%;
}

main {
  flex:1;
}

.extra-info {
  padding: var(--block-spacing-horizontal) var(--block-spacing-horizontal);
  font-size: .75rem;
  text-align: center;
}

.errors,
.errors pre {
  color: #e53935;
}

a.logo, a.logo:hover, a.logo:focus, a.logo:active {
  color: var(--h1-color);
}

a.scrape-it {
  margin-right: 10px;
  min-width: 8rem;
}

select.select-route {
  display: inline-block;
  text-align-last: center;
  width: 8rem;
}

article.links ol li {
  font-size: .75rem;
}