/*!
 * shale.css
 * https://github.com/logonoff/shalecss
 */
/*
** Variables
*/
:root {
  /* Font Sizes (1.25 scale) */
  --scale: 1.25;
  --font-7: calc(var(--font-6) * var(--scale));
  --font-6: calc(var(--font-5) * var(--scale));
  --font-5: calc(var(--font-4) * var(--scale));
  --font-4: calc(var(--font-3) * var(--scale));
  --font-3: calc(var(--font-2) * var(--scale));
  --font-2: calc(var(--font-1) * var(--scale));
  --font-1: calc(var(--font-0) * var(--scale));
  --font-0: 1rem;
  --font--1: calc(var(--font-0) / var(--scale));
  --font--2: calc(var(--font--1) / var(--scale));
  --font--3: calc(var(--font--2) / var(--scale));
  /* Dynamic accent colour */
  --a-r: 157;
  --a-g: 198;
  --a-b: 218;
  --accent: var(--a-r), var(--a-g), var(--a-b);
}

/*
 * Buttons
 */
a {
  color: var(--link-colour);
  text-decoration: none;
}
a [data-iconame$=newtab] {
  font-size: 0.75em;
  padding-left: 0.25em;
}
a:hover {
  text-decoration: underline;
}
a.button {
  background: var(--button);
  border: 1px solid var(--button-border);
  color: var(--text);
  transition: background 0.3s ease, border-color 0.3s ease;
  box-shadow: inset 0 0 0 1px var(--button-inset-border);
  border-radius: 3px;
  color: var(--text);
  display: inline-block;
  font-size: var(--font--1);
  line-height: 1.75em;
  min-height: 1.75em;
  padding: 0.5rem 0.65rem;
  text-align: center;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
}
a.button:hover {
  background: var(--button-hover);
  border-color: var(--button-border-hover);
  box-shadow: inset 0 0 0 1px var(--button-inset-border-hover);
}
a.button:active {
  background: var(--button-active);
  border-color: var(--button-border-active);
  box-shadow: inset 0 0 0 1px var(--button-inset-border-active);
}
a.button:focus-visible, a.button.current {
  background: var(--button-active);
  border-color: var(--button-border-active);
  box-shadow: inset 0 0 0 1px var(--button-inset-border-active);
}
a.button:disabled {
  background: var(--button-disabled);
}

/*
 * Checkboxes and Radio
 */
input[type=text] {
  background: linear-gradient(#F9F9F9, white);
  border: 0;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 1px #DADADA, 0 0 0 2px #B5B5B5;
  color: var(--text);
  font-family: inherit;
  image-rendering: pixelated;
  padding: 0.5em;
  transition: 0.3s box-shadow ease;
}
input[type=text]:hover {
  box-shadow: 0 0 0 1px #CECECE, 0 0 0 2px white;
}
input[type=text]:focus {
  box-shadow: 0 0 0 1px rgb(calc(var(--a-r) + 55), calc(var(--a-g) + 44), calc(var(--a-b) + 26)), 0 0 0 2px rgb(calc(var(--a-r) + 27), calc(var(--a-g) + 22), calc(var(--a-b) + 37));
  outline: 1px solid white;
}
input[type=checkbox], input[type=radio] {
  opacity: 0;
  position: absolute;
}
input[type=checkbox]:focus + label .sc-input, input[type=radio]:focus + label .sc-input {
  background: var(--button-hover);
  border-color: var(--button-border-hover);
  box-shadow: inset 0 0 0 1px var(--button-inset-border-hover);
}
input[type=checkbox] + label, input[type=radio] + label {
  user-select: none;
}
input[type=checkbox] + label .sc-input, input[type=radio] + label .sc-input {
  background: var(--button);
  border: 1px solid var(--button-border);
  box-shadow: inset 0 0 0 1px var(--button-inset-border);
  color: var(--text);
  display: inline-block;
  height: 0.8em;
  transition: background 0.3s ease, border-color 0.3s ease;
  user-select: none;
  width: 0.8em;
}
input[type=checkbox] + label .sc-input::before, input[type=radio] + label .sc-input::before {
  content: "";
  display: block;
  margin: auto;
  position: relative;
  transition: background 0.3s ease;
}
input[type=checkbox]:hover + label .sc-input, input[type=radio]:hover + label .sc-input {
  background: var(--button-hover);
  border-color: var(--button-border-hover);
  box-shadow: inset 0 0 0 1px var(--button-inset-border-hover);
}
input[type=checkbox] + label .sc-input {
  border-radius: 0.25rem;
}
input[type=checkbox] + label .sc-input::before {
  bottom: 0.05em;
  clip-path: polygon(50% 70%, 70% 16%, 80% 16%, 50% 100%, 40% 100%, 30% 50%, 40% 50%);
  height: 0.8em;
  width: 0.8em;
}
input[type=checkbox]:checked + label .sc-input::before {
  background: rgb(var(--input-fill));
}
input[type=checkbox]:indeterminate + label .sc-input::before {
  background: rgb(var(--input-fill));
  border-radius: 30%;
  clip-path: initial;
  height: 0.5em;
  top: 0.15em;
  width: 0.5em;
}
input[type=radio] + label .sc-input {
  border-radius: 100%;
}
input[type=radio] + label .sc-input::before {
  border-radius: 100%;
  height: 0.4em;
  top: 0.2em;
  width: 0.4em;
}
input[type=radio]:checked + label .sc-input::before {
  background: rgb(var(--input-fill));
}

/* Caption Buttons */
.caption-menu .caption-button {
  align-items: center;
  background: none;
  color: white;
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  opacity: 0.75;
  padding: 0 0.3em;
  text-decoration: none;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  transition: opacity 0.125s ease;
  vertical-align: middle;
}
.caption-menu .caption-button .icon {
  filter: invert(1) drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
.caption-menu .caption-button:hover, .caption-menu .caption-button:focus-visible {
  opacity: 1;
  text-decoration: none;
}
.caption-menu .caption-button:focus-visible {
  text-shadow: initial;
}
.caption-menu .caption-button:focus-visible .icon {
  filter: invert(1);
}
.caption-menu .caption-button:active {
  opacity: 0.3;
}

/*
 * Footer
 */
body {
  min-height: calc(100vh - 14rem);
}

footer {
  background: #FCFCFC linear-gradient(#FCFCFC, #E6E6E6);
  border-top: 1px solid #9B9B9B;
  box-shadow: 0 -4px 25px 0 rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-size: var(--font-0);
  line-height: 1.5;
  margin: 1em 0 0;
  padding: 1em 0 0.5em;
  width: 100%;
}
footer .footer-flex {
  align-content: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
footer .footer-flex .flex-item {
  margin: 0 3em;
  width: 12.5rem;
}
footer .footer-flex a {
  display: block;
  transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
footer a {
  color: inherit;
  min-width: 8em;
  opacity: 0.8;
  transition: opacity 0.125s ease;
}
footer a:focus-visible {
  background-color: white;
  color: black;
  opacity: 1;
  padding: 0 2px;
}
footer a:hover {
  opacity: 1;
}
footer a:active {
  opacity: 0.3;
}
footer h3 {
  display: inline-block;
  height: 1.5em;
  margin: 0;
  pointer-events: none;
  width: 6em;
}
footer .logo-group {
  margin: 0 !important;
}
footer .logo-group a {
  background: url("img/logo.svg") no-repeat center;
  background-size: 100% 100%;
  height: 3em;
  width: 3em;
}
footer .footer-text {
  display: flex;
  flex-wrap: wrap;
}
footer .footer-text p {
  margin-bottom: 0;
  padding: 0 1em;
}

/*
 * Menu
 */
/* Caption Buttons */
.a11y-menu, .caption-menu {
  float: right;
  line-height: 3rem;
  padding-right: 1rem;
  pointer-events: auto;
  position: relative;
}

/* Required for _mobile */
.mobile-logo {
  display: none;
}

/*
** Anchor link offset
** https://stackoverflow.com/a/24298427
*/
*[id]::before {
  content: " ";
  display: block;
  height: 4rem;
  margin-top: -4rem;
  visibility: hidden;
}

/* Header + Menu Bar */
.header {
  background: #575757 linear-gradient(#575757 0%, #454545 100%);
  border-bottom: 1px solid #9B9B9B;
  box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.75);
  color: white;
  display: block;
  fill: white;
  position: sticky;
  top: -3rem;
  transition: transform 0.3s ease;
  user-select: none;
  width: 100%;
  z-index: 41;
}
.header.scroll-up {
  transform: translateY(-3em);
}
.header .burger-button {
  display: block;
  float: left;
  line-height: 3rem;
  opacity: 0;
  pointer-events: none;
}
.header .title {
  font-size: var(--font-1);
  height: 3rem;
  line-height: 3rem;
  opacity: 0.7;
  text-align: center;
}
.header .title .title-text {
  display: inline-block;
  margin: 0;
  text-shadow: 1px 0 10px rgba(0, 0, 0, 0.5);
}
.header nav {
  background: transparent;
  bottom: 0.225em;
  display: inline-block;
  height: 3rem;
  line-height: 3.25rem;
  position: relative;
  text-align: center;
  width: inherit;
  z-index: 42;
}
.header nav .button {
  background: transparent;
  border-radius: initial;
  border: initial;
  box-shadow: initial;
  color: inherit;
  display: inline-block;
  line-height: 3rem;
  opacity: 0.7;
  padding: 0 5%;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.75);
  transition: box-shadow 0.125s ease;
  /*
  !! For old Edge and Firefox, combining :focus-visible and :hover disables styling for both.
  !! Therefore, the same style is duplicated, as shown in the next block.
  */
}
.header nav .button:hover, .header nav .button.current {
  box-shadow: inset 0 -0.25rem 0 0 rgb(var(--accent)), inset 0 -3.25rem 1rem -3rem rgba(var(--accent), 0.69);
  opacity: 1;
}
.header nav .button:focus-visible {
  box-shadow: inset 0 -0.25rem 0 0 rgb(var(--accent)), inset 0 -3.25rem 1rem -3rem rgba(var(--accent), 0.69);
  opacity: 1;
}
.header nav .button:active {
  box-shadow: inset 0 -0.25em 0 0 rgb(calc(var(--a-r) - 26), calc(var(--a-g) - 32), calc(var(--a-b) - 36));
}
.header nav .button:disabled {
  box-shadow: inherit;
  opacity: 0.6;
  text-shadow: none;
}

/*
** Command Bar
*/
.command-bar {
  background: linear-gradient(rgb(var(--card-1)), rgb(var(--card-2)));
  border-top: 1px #9B9B9B solid;
  padding: 0.5em;
}

/*
 * Alert, Info, Warning
 * icons coloured using https://codepen.io/sosuke/pen/Pjoqqp
 */
.note {
  border: 1px solid transparent;
  border-radius: 0.2rem;
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.9rem;
}
.note .note-title::before {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: " ";
  display: inline-block;
  height: 1em;
  margin-right: 0.3em;
  width: 1em;
}
.note.info {
  background: var(--note-info-base);
  border-color: var(--note-info-dark);
  color: var(--note-info-dark);
}
.note.info .note-title::before {
  background-image: url("icons.svg#icon-info");
  filter: invert(15%) sepia(6%) saturate(7037%) hue-rotate(156deg) brightness(95%) contrast(95%);
}
.note.alert {
  background: var(--note-alert-base);
  border-color: var(--note-alert-dark);
  color: var(--note-alert-dark);
}
.note.alert .note-title::before {
  background-image: url("icons.svg#icon-warning");
  filter: invert(8%) sepia(48%) saturate(3094%) hue-rotate(340deg) brightness(98%) contrast(104%);
}
.note.warn {
  background: var(--note-warn-base);
  border-color: var(--note-warn-dark);
  color: var(--note-warn-dark);
}
.note.warn .note-title::before {
  background-image: url("icons.svg#icon-danger");
  filter: invert(19%) sepia(85%) saturate(611%) hue-rotate(28deg) brightness(97%) contrast(93%);
}
.note.tip {
  background: var(--note-tip-base);
  border-color: var(--note-tip-dark);
  color: var(--note-tip-dark);
}
.note.tip .note-title::before {
  background-image: url("icons.svg#icon-lightbulb");
  filter: invert(11%) sepia(37%) saturate(7188%) hue-rotate(107deg) brightness(91%) contrast(93%);
}

.icon {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: "";
  display: inline-block;
  height: 1em;
  margin-right: 0.3em;
  width: 1em;
}
.icon.icon-a-lowercase {
  background-image: url("icons.svg#icon-a-lowercase");
}
.icon.icon-a-uppercase {
  background-image: url("icons.svg#icon-a-uppercase");
}
.icon.icon-accessibility {
  background-image: url("icons.svg#icon-accessibility");
}
.icon.icon-blocked {
  background-image: url("icons.svg#icon-blocked");
}
.icon.icon-brightness-contrast {
  background-image: url("icons.svg#icon-brightness-contrast");
}
.icon.icon-bubbles {
  background-image: url("icons.svg#icon-bubbles");
}
.icon.icon-contrast {
  background-image: url("icons.svg#icon-contrast");
}
.icon.icon-danger {
  background-image: url("icons.svg#icon-danger");
}
.icon.icon-discord {
  background-image: url("icons.svg#icon-discord");
}
.icon.icon-download {
  background-image: url("icons.svg#icon-download");
}
.icon.icon-earth {
  background-image: url("icons.svg#icon-earth");
}
.icon.icon-embed {
  background-image: url("icons.svg#icon-embed");
}
.icon.icon-enlarge {
  background-image: url("icons.svg#icon-enlarge");
}
.icon.icon-github {
  background-image: url("icons.svg#icon-github");
}
.icon.icon-hashtag {
  background-image: url("icons.svg#icon-hashtag");
}
.icon.icon-info {
  background-image: url("icons.svg#icon-info");
}
.icon.icon-lightbulb {
  background-image: url("icons.svg#icon-lightbulb");
}
.icon.icon-link {
  background-image: url("icons.svg#icon-link");
}
.icon.icon-minus-circle {
  background-image: url("icons.svg#icon-minus-circle");
}
.icon.icon-minus {
  background-image: url("icons.svg#icon-minus");
}
.icon.icon-moon-fill {
  background-image: url("icons.svg#icon-moon-fill");
}
.icon.icon-moon-stroke {
  background-image: url("icons.svg#icon-moon-stroke");
}
.icon.icon-newtab {
  background-image: url("icons.svg#icon-newtab");
}
.icon.icon-notification {
  background-image: url("icons.svg#icon-notification");
}
.icon.icon-plus-circle {
  background-image: url("icons.svg#icon-plus-circl");
}
.icon.icon-plus {
  background-image: url("icons.svg#icon-plus");
}
.icon.icon-power {
  background-image: url("icons.svg#icon-power");
}
.icon.icon-quotes-left {
  background-image: url("icons.svg#icon-quotes-left");
}
.icon.icon-quotes-right {
  background-image: url("icons.svg#icon-quotes-right");
}
.icon.icon-reddit {
  background-image: url("icons.svg#icon-reddit");
}
.icon.icon-rss {
  background-image: url("icons.svg#icon-rss");
}
.icon.icon-search {
  background-image: url("icons.svg#icon-search");
}
.icon.icon-shrink {
  background-image: url("icons.svg#icon-shrink");
}
.icon.icon-stackoverflow {
  background-image: url("icons.svg#icon-stackoverflow");
}
.icon.icon-star-empty {
  background-image: url("icons.svg#icon-star-empt");
}
.icon.icon-sun {
  background-image: url("icons.svg#icon-sun");
}
.icon.icon-upload {
  background-image: url("icons.svg#icon-upload");
}
.icon.icon-warning {
  background-image: url("icons.svg#icon-warning");
}
.icon.icon-windows {
  background-image: url("icons.svg#icon-windows");
}
.icon.icon-windows8 {
  background-image: url("icons.svg#icon-windows8");
}
.icon.icon-youtube {
  background-image: url("icons.svg#icon-youtube");
}

/*
 * Scrollbars
 * based off https://stackoverflow.com/a/52895808
 */
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar {
  box-shadow: -5px 0 5px 0 rgba(0, 0, 0, 0.18);
  width: 17px;
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-thumb {
  background: var(--button);
  border: 1px solid var(--button-border);
  color: var(--text);
  transition: background 0.3s ease, border-color 0.3s ease;
  box-shadow: inset 0 0 0 1px var(--button-inset-border);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-thumb:hover {
  background: var(--button-hover);
  border-color: var(--button-border-hover);
  box-shadow: inset 0 0 0 1px var(--button-inset-border-hover);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-thumb:active {
  background: var(--button-active);
  border-color: var(--button-border-active);
  box-shadow: inset 0 0 0 1px var(--button-inset-border-active);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-thumb:focus-visible, html:not(.no-custom-scrollbar) ::-webkit-scrollbar-thumb.current {
  background: var(--button-active);
  border-color: var(--button-border-active);
  box-shadow: inset 0 0 0 1px var(--button-inset-border-active);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-thumb:disabled {
  background: var(--button-disabled);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-corner);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button {
  height: 17px;
  width: 17px;
  border: 1px solid var(--button-border);
  box-shadow: inset 0 0 0 1px var(--button-inset-border);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:hover {
  border: 1px solid var(--button-border-hover);
  box-shadow: inset 0 0 0 1px var(--button-inset-border-hover);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:active {
  border: 1px solid var(--button-border-active);
  box-shadow: inset 0 0 0 1px var(--button-inset-border-active);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:vertical:start:decrement {
  background: linear-gradient(134deg, var(--scrollbar-button) 40%, transparent 40%), linear-gradient(233deg, var(--scrollbar-button) 40%, transparent 40%), linear-gradient(0deg, var(--scrollbar-button) 40%, transparent 40%) var(--scrollbar-arrow);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:vertical:start:decrement:hover {
  background: linear-gradient(134deg, var(--scrollbar-hover-1) 40%, transparent 40%), linear-gradient(233deg, var(--scrollbar-hover-1) 40%, transparent 40%), linear-gradient(0deg, var(--scrollbar-hover) 40%, transparent 40%) var(--scrollbar-arrow);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:vertical:start:decrement:active {
  background: linear-gradient(134deg, rgb(var(--scrollbar-active-1)) 40%, transparent 40%), linear-gradient(233deg, rgb(var(--scrollbar-active-1)) 40%, transparent 40%), linear-gradient(0deg, rgb(var(--scrollbar-active)) 40%, transparent 40%) var(--scrollbar-arrow);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:vertical:end:increment {
  background: linear-gradient(315deg, var(--scrollbar-button) 40%, transparent 40%), linear-gradient(45deg, var(--scrollbar-button) 40%, transparent 40%), linear-gradient(180deg, var(--scrollbar-button) 40%, transparent 40%) var(--scrollbar-arrow);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:vertical:end:increment:active {
  background: linear-gradient(315deg, rgb(var(--scrollbar-active)) 40%, transparent 40%), linear-gradient(45deg, rgb(var(--scrollbar-active)) 40%, transparent 40%), linear-gradient(180deg, rgb(var(--scrollbar-active-1)) 40%, transparent 40%) var(--scrollbar-arrow);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:horizontal:start:decrement {
  background: linear-gradient(45deg, var(--scrollbar-button) 40%, transparent 40%), linear-gradient(145deg, var(--scrollbar-button) 40%, transparent 40%), linear-gradient(270deg, var(--scrollbar-button) 40%, transparent 40%) var(--scrollbar-arrow);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:horizontal:start:decrement:active {
  background: linear-gradient(45deg, rgb(var(--scrollbar-active)) 40%, transparent 40%), linear-gradient(145deg, rgb(var(--scrollbar-active)) 40%, transparent 40%), linear-gradient(270deg, rgb(var(--scrollbar-active-1)) 40%, transparent 40%) var(--scrollbar-arrow);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:horizontal:end:increment {
  background: linear-gradient(225deg, var(--scrollbar-button) 40%, transparent 40%), linear-gradient(315deg, var(--scrollbar-button) 40%, transparent 40%), linear-gradient(90deg, var(--scrollbar-button) 40%, transparent 40%) var(--scrollbar-arrow);
}
html:not(.no-custom-scrollbar) ::-webkit-scrollbar-button:horizontal:end:increment:active {
  background: inear-gradient(255deg, rgb(var(--scrollbar-active-1)) 40%, transparent 40%), linear-gradient(315deg, rgb(var(--scrollbar-active)) 40%, transparent 40%), linear-gradient(90deg, rgb(var(--scrollbar-active)) 40%, transparent 40%) var(--scrollbar-arrow);
}

/*
** HTML and body styling
*/
html {
  background: var(--background);
  color: var(--text);
  font-family: "Ubuntu", "Segoe UI", sans-serif;
  font-size: var(--font-0);
  line-height: 1.5rem;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  padding: 0;
}

.one-box {
  align-content: center;
  margin: 3em auto;
  max-width: 75em;
  min-height: 100%;
}

/*
** General
*/
.transition {
  transition: all 0.3s ease !important;
}

.byline {
  font-style: italic;
}

.invisible {
  display: none;
  opacity: 0;
  visibility: hidden;
}

*:disabled {
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.resize {
  height: 25em;
}

.icon {
  display: inline-block;
  height: 1em;
  width: 1em;
}

.card {
  background: linear-gradient(rgb(var(--card-1)), rgb(var(--card-2)));
  border-radius: 0.2em;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32);
  padding: 1em;
}

/*
** Typography
*/
/* Headers */
h1, h2, h3, h4, h5 {
  font-weight: 500;
  /* margin: 2.75rem 0 1rem; */
}

h1 {
  font-size: var(--font-3);
}

h2 {
  font-size: var(--font-2);
}

h3 {
  font-size: var(--font-1);
}

/* Code */
pre, code, .hll, .code {
  background-color: #EEE;
}

.code, code {
  border-radius: 0.2em;
  color: #171700;
  font-family: "Consolas", "Lucida Console", "Monaco", monospace;
  margin: -0.2em 0;
  padding: 0.2em;
  white-space: pre-wrap;
}

pre {
  border-radius: 0.2rem;
  padding: 0.25rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bigger-text {
  --font-0: 1.25rem;
}

/*
 * Accessibility
 */
/* Tab Skip */
.skip-to-content {
  height: 1px;
  left: -25565vw;
  overflow: hidden;
  position: absolute;
  top: 1em;
  width: 1px;
  z-index: -1337;
}
.skip-to-content:focus-visible, .skip-to-content:active {
  background: #575757;
  border: 3px solid white;
  border-radius: 15px;
  color: white;
  font-size: 1rem;
  height: auto;
  left: calc(50vw - 6rem);
  margin: 1rem 0.5rem;
  overflow: auto;
  padding: 0.5rem 1rem;
  text-align: center;
  text-shadow: 1px 0 10px rgba(0, 0, 0, 0.5);
  width: auto;
  z-index: 6969;
}

.skip-target {
  float: right;
  height: 1px;
  overflow: hidden;
  width: 1px;
}

/* screen reader only text */
.vox-only {
  height: 1px;
  left: -420691337px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

/* :focus styling + remove it when mouse is used */
a:not(.button):not(.ignore-jerry-mouse):focus {
  background-color: var(--link-focus-bg);
}

.jerry-mouse:focus {
  outline: none;
}
.jerry-mouse a:not(.button):not(.ignore-jerry-mouse):focus {
  background-color: transparent;
}

/*
 * Hamburger Menu (initial)
 */
/* Burger Button */
.burger-button {
  border-radius: 1em;
  cursor: pointer;
  display: inline-block;
  left: 1.5rem;
  position: relative;
  top: 0.6em;
  z-index: 9999;
}
.burger-button:hover .bar1, .burger-button:hover .bar2, .burger-button:hover .bar3 {
  background-color: white;
}

.bar1, .bar2, .bar3 {
  background-color: darkgrey;
  border-radius: 1em;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.75));
  height: 0.125rem;
  margin: 0.313rem 0;
  transition: 0.3s;
  width: 1.25em;
}

/*
 * Mobile + Printer stuff
 */
/* Printer adjustments */
@media print {
  .header, nav, .header-space, .side, .button, footer {
    display: none;
  }
  a {
    color: black;
  }
}
/* Mobile Adjustments */
@media screen and (max-width: 76rem) {
  .grid-body {
    grid-template-areas: "left content content content content content";
    margin: 1em;
  }
  .grid-body .toc {
    display: none;
    visibility: hidden;
  }
  .one-box {
    margin: 3em 1em;
  }
}
@media all and (max-width: 50.75rem) {
  .grid-body {
    display: block;
  }
  .index .hero {
    margin: 3em 0;
  }
  .index .hero .left-half, .index .hero .right-half {
    width: calc(100vw - 2rem);
  }
  .index .hero div, .index .features div, .index .slide div {
    display: inline-block;
    margin-bottom: 1.5em;
  }
  .index .hero img, .index .features img, .index .slide img {
    max-height: initial;
    max-width: calc(100vw - 6em);
  }
  .index .slide {
    margin: auto auto 1em;
  }
  .index .slide .left-half, .index .slide .right-half {
    order: 0;
    text-align: left;
    width: initial;
  }
  .index .slide .right-half img {
    position: static;
  }
  footer .logo-group {
    padding-bottom: 1em;
    width: 100% !important;
  }
}
@media screen and (max-width: 37.5rem) {
  footer .footer-flex .flex-item {
    line-height: 1.5em;
    margin: 0 1em;
    padding-bottom: 1em;
    width: 100%;
  }
  footer .footer-flex .flex-item.logo-group a {
    background-position: -2em;
  }
  footer .footer-flex .flex-item a {
    margin: 0.1em;
    padding: 0.3em;
  }
  .no-scroll-mobile-only {
    /*overflow-y: scroll;
    position: fixed;*/
    overflow: hidden;
  }
  .header-space {
    height: 3rem;
  }
  .marketplace.one-box {
    margin: 3em 0 0 0;
  }
  .marketplace-flex {
    display: block;
    text-align: center;
  }
  .marketplace-flex a {
    margin: 0;
  }
  .marketplace-flex div {
    margin: 0 0 2em;
  }
  .footer-flex {
    align-content: center;
    margin: 0 1em;
  }
  .footer-flex div {
    align-self: center;
  }
  .footer-text {
    padding: 0 1em;
  }
  .header {
    height: 3rem;
    /* Burger Menu */
  }
  .header .burger-button {
    cursor: pointer;
    opacity: 1;
    pointer-events: visible;
  }
  .header nav {
    visibility: hidden;
  }
  .header .menu-bar {
    display: block;
    height: 0;
    padding: 0;
  }
  .header .command-bar {
    border-bottom: 1px solid #9B9B9B;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.75);
  }
  .header.slide-up .menu-bar, .header.slide-up .caption-menu, .header.slide-down .menu-bar, .header.slide-down .caption-menu {
    transition: height 0.3s ease, background 0.25s ease, visibility 0.3s linear, opacity 0.3s linear;
  }
  .header.slide-up .menu-bar {
    height: 0;
    padding: 0;
    visibility: hidden;
  }
  .header.slide-up .menu-bar .button {
    box-shadow: unset;
    opacity: 0;
    width: 0;
  }
  .header.slide-down {
    background: #454545;
  }
  .header.slide-down .bar1 {
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    transform: rotate(-45deg) translate(-0.375rem, 0.25rem);
  }
  .header.slide-down .bar2 {
    opacity: 0;
  }
  .header.slide-down .bar3 {
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    transform: rotate(45deg) translate(-0.375rem, -0.25rem);
  }
  .header.slide-down .menu-bar {
    background: #454545;
    height: 100vh;
    visibility: visible;
  }
  .header.slide-down .menu-bar .button {
    box-shadow: initial;
    opacity: 1;
    padding: 0 1em 0 1em;
    text-align: left;
    width: calc(100% - 3em);
  }
  .header.slide-down .menu-bar .button.current {
    opacity: 0.7;
  }
  .header.slide-down .caption-menu {
    opacity: 0.5;
  }
  .module-page .cover .card {
    display: block;
    height: auto;
    min-height: 10rem;
  }
  .module-page .cover .card span {
    display: block;
    margin: 1em;
  }
}
@media screen and (min-width: 37.5rem) {
  html {
    overflow-y: scroll;
  }
}
/*
** Variables
** (light theme)
*/
:root {
  /* General */
  --background: linear-gradient(#CCC, #BEBEBE);
  --text: black;
  --link-colour: #00729E;
  --link-focus-bg: white;
  --input-fill: calc(var(--a-r) - 144), calc(var(--a-g) - 136), calc(var(--a-b) - 136);
  /* Cards */
  --card-1: 238, 238, 238;
  --card-2: 218, 218, 218;
  /* Notes */
  --note-info-base: linear-gradient(#D2ECF9, #B2CCD9);
  --note-info-dark: #093044;
  --note-alert-base: linear-gradient(#F9D2D2, #D9B2B2);
  --note-alert-dark: #440909;
  --note-warn-base: linear-gradient(#F9F6D2, #D9D6B2);
  --note-warn-dark: #404409;
  --note-tip-base: linear-gradient(#D2F9D2, #B2D9B2);
  --note-tip-dark: #094409;
  /* Button */
  --button: #EEE linear-gradient(#E0E0E0, #CCC);
  --button-hover: #F2F2F2 linear-gradient(#F2F2F2, #E9E9E9);
  --button-active: rgb(var(--accent)) linear-gradient(rgb(calc(var(--a-r) + 20), calc(var(--a-g) + 20), calc(var(--a-b) + 20)), rgb(var(--accent)));
  --button-disabled: #CCC linear-gradient(#CCC, #AAA);
  --button-border: #B5B5B5;
  --button-border-hover: #CECECE;
  --button-border-active: rgb(calc(var(--a-r) - 26), calc(var(--a-g) - 32), calc(var(--a-b) - 36));
  --button-inset-border: #E3E3E3;
  --button-inset-border-hover: #FDFDFD;
  --button-inset-border-active: rgb(var(--accent));
  /* Scrollbar */
  --scrollbar-corner: #F0F0F0;
  --scrollbar-track-bg: #F5F5F5 linear-gradient(#DFDFDF, #CDCDCD);
  --scrollbar-button: #DADADA;
  --scrollbar-hover: #F2F2F2;
  --scrollbar-hover-1: #E9E9E9;
  --scrollbar-active: calc(var(--a-r) + 10), calc(var(--a-g) + 10), calc(var(--a-b) + 10);
  --scrollbar-active-1: calc(var(--a-r) + 25), calc(var(--a-g) + 25), calc(var(--a-b) + 25);
  --scrollbar-arrow: #333;
}

/*
** Next-generation Contrast theme
*/
.contrast {
  --link-focus-bg: #444;
  /* General */
  --background: linear-gradient(#333, #252525);
  --text: white;
  --link-colour: #4CB9E2;
  --link-focus-bg: white;
  --input-fill: calc(var(--a-r) + 11), calc(var(--a-g) + 4), calc(var(--a-b) + 5);
  /* Cards */
  --card-1: 85, 85, 85;
  --card-2: 65, 65, 65;
  --note-info-base: linear-gradient(#093044, #082A3B);
  --note-info-dark: #D2ECF9;
  --note-alert-base: linear-gradient(#440909, #3B0808);
  --note-alert-dark: #F9D2D2;
  --note-warn-base: linear-gradient(#404409, #373B08);
  --note-warn-dark: #F7F9D2;
  --note-tip-base: linear-gradient(#094409, #083B08);
  --note-tip-dark: #D2F9D2;
  /* Button */
  --button: #333 linear-gradient(#474747, #333);
  --button-hover: #595959 linear-gradient(#595959, #505050);
  --button-active: rgb(var(--accent)) linear-gradient(rgb(calc(var(--a-r) - 58), calc(var(--a-g) - 69), calc(var(--a-b) - 86)), rgb(calc(var(--a-r) - 74), calc(var(--a-g) - 89), calc(var(--a-b) - 106)));
  --button-disabled: #2D2D2D;
  --button-border: #1C1C1C;
  --button-border-hover: #353535;
  --button-border-active: rgb(calc(var(--a-r) - 83), calc(var(--a-g) - 99), calc(var(--a-b) - 132));
  --button-inset-border: #555;
  --button-inset-border-hover: #666;
  --button-inset-border-active: rgb(calc(var(--a-r) - 43), calc(var(--a-g) - 59), calc(var(--a-b) - 92));
  /* Scrollbar */
  --scrollbar-track-bg: #343434 linear-gradient(#464646, #343434);
  --scrollbar-button: #555;
  --scrollbar-hover: #515151;
  --scrollbar-hover-1: #535353;
  --scrollbar-active: calc(var(--a-r) - 73), calc(var(--a-g) - 88), calc(var(--a-b) - 105);
  --scrollbar-active-1: calc(var(--a-r) - 71), calc(var(--a-g) - 86), calc(var(--a-b) - 103);
  --scrollbar-arrow: #CCC;
  --scrollbar-corner: #454545;
  scrollbar-color: #4D4D4D #171717;
  scrollbar-color: dark;
}
.contrast .js-contrast {
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}
.contrast .note .note-title::before {
  filter: invert(1);
}
.contrast p:not(.title-text), .contrast li {
  opacity: 0.8;
}
.contrast .command-bar {
  background: linear-gradient(#646464, #4E4E4E);
}
.contrast .icon {
  fill: var(--text);
}
.contrast .code, .contrast code, .contrast pre {
  background: #191919;
  color: var(--text);
}
.contrast input[type=text] {
  background: linear-gradient(#606060, #555) !important;
  box-shadow: 0 0 0 1px #555, 0 0 0 2px #414141 !important;
}
.contrast input[type=text]:hover {
  box-shadow: 0 0 0 1px #626262, 0 0 0 2px #353535 !important;
}
.contrast input[type=text]:focus {
  box-shadow: 0 0 0 1px rgb(calc(var(--a-r) - 66), calc(var(--a-g) - 78), calc(var(--a-b) - 97)), 0 0 0 2px rgb(calc(var(--a-r) - 83), calc(var(--a-g) - 99), calc(var(--a-b) - 117)) !important;
  outline: 1px solid #414141 !important;
}
.contrast footer {
  background: linear-gradient(#646464, #4E4E4E);
}
.contrast footer a {
  color: var(--text);
}
.contrast footer .logo-group {
  filter: invert(1);
}
.contrast footer .logo-group a {
  filter: initial;
}

/*
** Dark Theme
*/
.dark {
  --link-focus-bg: #444;
  /* General */
  --background: linear-gradient(#333, #252525);
  --text: white;
  --link-colour: #4CB9E2;
  --link-focus-bg: white;
  --input-fill: calc(var(--a-r) + 11), calc(var(--a-g) + 4), calc(var(--a-b) + 5);
  /* Cards */
  --card-1: 85, 85, 85;
  --card-2: 65, 65, 65;
  --note-info-base: linear-gradient(#093044, #082A3B);
  --note-info-dark: #D2ECF9;
  --note-alert-base: linear-gradient(#440909, #3B0808);
  --note-alert-dark: #F9D2D2;
  --note-warn-base: linear-gradient(#404409, #373B08);
  --note-warn-dark: #F7F9D2;
  --note-tip-base: linear-gradient(#094409, #083B08);
  --note-tip-dark: #D2F9D2;
  /* Button */
  --button: #333 linear-gradient(#474747, #333);
  --button-hover: #595959 linear-gradient(#595959, #505050);
  --button-active: rgb(var(--accent)) linear-gradient(rgb(calc(var(--a-r) - 58), calc(var(--a-g) - 69), calc(var(--a-b) - 86)), rgb(calc(var(--a-r) - 74), calc(var(--a-g) - 89), calc(var(--a-b) - 106)));
  --button-disabled: #2D2D2D;
  --button-border: #1C1C1C;
  --button-border-hover: #353535;
  --button-border-active: rgb(calc(var(--a-r) - 83), calc(var(--a-g) - 99), calc(var(--a-b) - 132));
  --button-inset-border: #555;
  --button-inset-border-hover: #666;
  --button-inset-border-active: rgb(calc(var(--a-r) - 43), calc(var(--a-g) - 59), calc(var(--a-b) - 92));
  /* Scrollbar */
  --scrollbar-track-bg: #343434 linear-gradient(#464646, #343434);
  --scrollbar-button: #555;
  --scrollbar-hover: #515151;
  --scrollbar-hover-1: #535353;
  --scrollbar-active: calc(var(--a-r) - 73), calc(var(--a-g) - 88), calc(var(--a-b) - 105);
  --scrollbar-active-1: calc(var(--a-r) - 71), calc(var(--a-g) - 86), calc(var(--a-b) - 103);
  --scrollbar-arrow: #CCC;
  --scrollbar-corner: #454545;
  scrollbar-color: #4D4D4D #171717;
  scrollbar-color: dark;
}
.dark .note.info .note-title::before {
  filter: invert(90%) sepia(5%) saturate(1221%) hue-rotate(174deg) brightness(102%) contrast(95%);
}
.dark .note.alert .note-title::before {
  filter: invert(90%) sepia(2%) saturate(3585%) hue-rotate(314deg) brightness(95%) contrast(105%);
}
.dark .note.warn .note-title::before {
  filter: invert(95%) sepia(2%) saturate(2228%) hue-rotate(17deg) brightness(100%) contrast(103%);
}
.dark .note.tip .note-title::before {
  filter: invert(93%) sepia(8%) saturate(894%) hue-rotate(64deg) brightness(103%) contrast(95%);
}
.dark .js-contrast {
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}
.dark p:not(.title-text), .dark li {
  opacity: 0.8;
}
.dark .command-bar {
  background: linear-gradient(#646464, #4E4E4E);
}
.dark .icon {
  fill: var(--text);
}
.dark .code, .dark code, .dark pre {
  background: #191919;
  color: var(--text);
}
.dark input[type=text] {
  background: linear-gradient(#606060, #555) !important;
  box-shadow: 0 0 0 1px #555, 0 0 0 2px #414141 !important;
}
.dark input[type=text]:hover {
  box-shadow: 0 0 0 1px #626262, 0 0 0 2px #353535 !important;
}
.dark input[type=text]:focus {
  box-shadow: 0 0 0 1px rgb(calc(var(--a-r) - 66), calc(var(--a-g) - 78), calc(var(--a-b) - 97)), 0 0 0 2px rgb(calc(var(--a-r) - 83), calc(var(--a-g) - 99), calc(var(--a-b) - 117)) !important;
  outline: 1px solid #414141 !important;
}
.dark footer {
  background: linear-gradient(#646464, #4E4E4E);
}
.dark footer a {
  color: var(--text);
}
.dark footer .logo-group {
  filter: invert(1);
}
.dark footer .logo-group a {
  filter: initial;
}

/*# sourceMappingURL=shale.css.map */