:root {
  --buttons-height: 2em;
  --chrome-focus: #c6c8cc;
  --chrome-hover: #d3d5d9;
  --chrome-omnibar: #ededee;
  --error-text: rgb(255, 0, 0);
  --fade: 0.85s;
  --font-family: Roboto, "Segoe UI", Tahoma, sans-serif;
  --google-grey-900: #202124;
  --google-grey-refresh-700: #5f6368;
  --icon-transition: background-color 500ms linear;
  --icon: #575a5f;
  --sample-box-height: calc(16px * 6);
  --sample-container: 34px;
  --section_-_padding: 0 20px;
  --separator-height: 1px;
  --separator-line: var(--separator-height) solid rgba(0, 0, 0, 0.06);
  --status-size: 0.85em;
  --toggle-size: 0.9rem;
  --toggle-time: 0.3s;

  /* colour palettes vga */
  .vga-black {
    background-color: rgb(0, 0, 0);
  }
  .vga-red {
    background-color: rgb(170, 0, 0);
  }
  .vga-green {
    background-color: rgb(0, 170, 0);
  }
  .vga-brown {
    background-color: rgb(170, 85, 0);
  }
  .vga-blue {
    background-color: rgb(0, 0, 170);
  }
  .vga-magenta {
    background-color: rgb(170, 0, 170);
  }
  .vga-cyan {
    background-color: rgb(0, 170, 170);
  }
  .vga-grey {
    background-color: rgb(170, 170, 170);
  }
  /* colour palettes xterm */
  .xterm-black {
    background-color: rgb(0, 0, 0);
  }
  .xterm-red {
    background-color: rgb(205, 0, 0);
  }
  .xterm-green {
    background-color: rgb(0, 205, 0);
  }
  .xterm-brown {
    background-color: rgb(205, 205, 0);
  }
  .xterm-blue {
    background-color: rgb(0, 0, 205);
  }
  .xterm-magenta {
    background-color: rgb(205, 0, 205);
  }
  .xterm-cyan {
    background-color: rgb(0, 205, 205);
  }
  .xterm-grey {
    background-color: rgb(229, 229, 229);
  }
  /* colour palettes apple iigs */
  .iigs-black {
    background-color: rgb(0, 0, 0);
  }
  .iigs-red {
    background-color: rgb(128, 3, 6);
  }
  .iigs-green {
    background-color: rgb(0, 127, 18);
  }
  .iigs-brown {
    background-color: rgb(128, 127, 22);
  }
  .iigs-blue {
    background-color: rgb(0, 0, 128);
  }
  .iigs-magenta {
    background-color: rgb(170, 0, 170);
  }
  .iigs-cyan {
    background-color: rgb(1, 170, 170);
  }
  .iigs-grey {
    background-color: rgb(127, 127, 127);
  }
  /* colour palettes commodore 64 */
  .c64-black {
    background-color: rgb(0, 0, 0);
  }
  .c64-red {
    background-color: rgb(135, 57, 50);
  }
  .c64-green {
    background-color: rgb(84, 160, 73);
  }
  .c64-brown {
    background-color: rgb(139, 83, 41);
  }
  .c64-blue {
    background-color: rgb(64, 49, 141);
  }
  .c64-magenta {
    background-color: rgb(138, 63, 150);
  }
  .c64-cyan {
    background-color: rgb(102, 182, 189);
  }
  .c64-grey {
    background-color: rgb(120, 120, 120);
  }
  /* colour palettes IBM CGA palette 0 & 1 */
  .cga_0-black {
    background-color: rgb(0, 0, 0);
  }
  .cga_0-green {
    background-color: rgb(85, 255, 85);
  }
  .cga_0-red {
    background-color: rgb(255, 85, 85);
  }
  .cga_0-yellow {
    background-color: rgb(255, 255, 85);
  }
  .cga_1-black {
    background-color: rgb(0, 0, 0);
  }
  .cga_1-green {
    background-color: rgb(170, 0, 170);
  }
  .cga_1-red {
    background-color: rgb(0, 170, 170);
  }
  .cga_1-yellow {
    background-color: rgb(170, 170, 170);
  }
  /* colour palettes monochrome */
  .gray-black {
    background-color: rgb(0, 0, 0);
  }
  .gray-red {
    background-color: rgb(44, 44, 44);
  }
  .gray-green {
    background-color: rgb(147, 147, 147);
  }
  .gray-brown {
    background-color: rgb(191, 191, 191);
  }
  .gray-blue {
    background-color: rgb(26, 26, 26);
  }
  .gray-magenta {
    background-color: rgb(67, 67, 67);
  }
  .gray-cyan {
    background-color: rgb(170, 170, 170);
  }
  .gray-grey {
    background-color: rgb(229, 229, 229);
  }

  /* colour palettes workbench */
  .workbench-black {
    background-color: rgb(0, 0, 0);
  }
  .workbench-red {
    background-color: rgb(102, 34, 0);
  }
  .workbench-green {
    background-color: rgb(85, 221, 85);
  }
  .workbench-brown {
    background-color: rgb(238, 153, 0);
  }
  .workbench-blue {
    background-color: rgb(0, 68, 221);
  }
  .workbench-magenta {
    background-color: rgb(170, 144, 124);
  }
  .workbench-cyan {
    background-color: rgb(238, 85, 0);
  }
  .workbench-grey {
    background-color: rgb(175, 175, 175);
  }

  .theme-msdos-fg {
    color: var(--vgagray);
  }
  .theme-msdos-bg {
    background-color: var(--black);
  }
  .theme-windows-fg {
    color: var(--black);
  }
  .theme-windows-bg {
    background-color: var(--white);
  }
  .theme-amiga-fg {
    color: rgb(247, 247, 247);
  }
  .theme-amiga-bg {
    background-color: rgb(148, 148, 148);
  }
  .theme-appleii-fg {
    color: rgb(41, 41, 41);
  }
  .theme-appleii-bg {
    background-color: rgb(12, 234, 97);
  }
  .theme-atarist-fg {
    color: var(--black);
  }
  .theme-atarist-bg {
    background-color: var(--white);
  }
  .theme-c64-fg {
    color: rgb(108, 94, 181);
  }
  .theme-c64-bg {
    background-color: rgb(53, 40, 121);
  }
  .theme-white-on-black-fg {
    color: var(--white);
  }
  .theme-amber-on-black-fg {
    color: var(--amber);
  }
  .theme-green-on-black-fg {
    color: var(--green);
  }
  .theme-white-on-black-bg,
  .theme-amber-on-black-bg,
  .theme-green-on-black-bg {
    background-color: var(--black);
  }
  .theme-gray-on-white-fg {
    color: var(--vgagray);
  }
  .theme-amber-on-white-fg {
    color: var(--amber);
  }
  .theme-green-on-white-fg {
    color: var(--green);
  }
  .theme-gray-on-white-bg,
  .theme-amber-on-white-bg,
  .theme-green-on-white-bg {
    background-color: var(--white);
  }
  .theme-gray-on-white-shadowed,
  .theme-amber-on-white-shadowed,
  .theme-green--on-white-shadowed {
    text-shadow: 0.063em 0.063em 0 rgba(224, 224, 224, 1);
  }

  /* text pairs table customization */
  #color-text-pairs {
    tr {
      border: 1px solid black;
      td {
        border: 1px solid black;
        text-align: right;
      }
    }
  }
}

/* bulma like classes and overwrites */
.is-rounded {
  border-radius: 0.5em;
}

.is-nowrap {
  white-space: nowrap;
}

.control,
.radio,
input[name="font"] {
  position: initial;
}

body {
  font-family: var(--font-family);
  font-size: 1em;
}

main > section > div.hero-body > div.tabcontent {
  display: inline;
}

main > section > div.hero-body > div#content0 {
  display: inline;
}

main > section > div.hero-body > #error {
  color: var(--error-text);
  display: none;
}

main > section .font-content {
  color: var(--google-grey-refresh-700);
  display: flex;
  flex-flow: row wrap;
  align-items: start;
}

main > section #jumpTo {
  position: sticky;
  top: 1vh;
}

/* example blocks */
#smearBlocksExample {
  font-style: normal;
  font-weight: normal;
  /* offset-x | offset-y | blur-radius | color */
  text-shadow: 1px 0 1px currentColor;
}

#sampleContainer {
  position: sticky;
  top: 1vh;
}

#sampleTerminal {
  /*  anything placed here will override classes
      introduced by `scripts/options.js` */
  border-radius: 10px;
  height: var(--sample-box-height);
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  text-rendering: geometricPrecision;
}
#sampleTerminal > #sampleDOSCtrls {
  display: none;
}

#colorPaletteForm table {
  border: 1px solid black;
}

/* replace checkbox with a toggle switch */
.toggleswitch {
  position: relative;
  width: calc(var(--toggle-size) * 2.25);
}
.toggleswitch > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggleswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: var(--toggle-size);
  padding: 0;
  line-height: var(--toggle-size);
  border: 0;
  border-radius: calc(var(--toggle-size) * 1.5);
  background-color: #9e9e9e;
  transition: all var(--toggle-time) ease-in;
}
.toggleswitch-label:before {
  content: "";
  display: block;
  width: calc(var(--toggle-size) * 1.5);
  margin: calc(var(--toggle-size) / -4);
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--toggle-size) * 1.3);
  border-radius: calc(var(--toggle-size) * 1.5);
  background-color: #757575;
  transition: all var(--toggle-time) ease-in-out;
}
.toggleswitch > input:checked + .toggleswitch-label {
  background-color: #42a5f5;
  transition: all var(--toggle-time) ease-in;
}
.toggleswitch > input:checked + .toggleswitch-label,
.toggleswitch > input:checked + .toggleswitch-label:before {
  border-color: #42a5f5;
  transition: all var(--toggle-time) ease-in;
}
.toggleswitch > input:checked + .toggleswitch-label .toggleswitch-inner {
  margin-left: 0;
}
.toggleswitch > input:checked + .toggleswitch-label:before {
  right: 0;
  background-color: #2196f3;
  transition: all var(--toggle-time) ease-in;
}
.toggleswitch > input:disabled + .toggleswitch-label,
.toggleswitch > input:disabled + .toggleswitch-label:before {
  background-color: #9e9e9e;
  transition: all var(--toggle-time) ease-in;
}

/* svg icons */
.material-icons {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  text-rendering: geometricPrecision;
  /* non-standard, WebKit on macOS only. */
  -webkit-font-smoothing: antialiased;
  /* Firefox and Chrome, but only on Windows and Linux */
  /* Full support in Safari */
  text-rendering: optimizeLegibility;
  /* non-standard, Firefox on macOS only. */
  -moz-osx-font-smoothing: grayscale;
}
