@charset "UTF-8";
:root {
  --vf-GRAD: 0;
  --header-offset: 0;
  --background: #f32;
  --color: #f0f0f0;
  --accent: #171616;
  --extra: #f0d44a;
  --line: .15rem;
  --line-thin: .1rem;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  width: 100%;
  height: 100%;
}

input, select, button, textarea, label {
  margin: 0;
  border: 0;
  background: none;
  border-radius: 0;
  display: inline-block;
}

/* Remove the stupid outer glow in Webkit */
input:focus {
  outline: 0;
}

button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
}

[contenteditable]:focus {
  outline: 0px solid transparent;
}

.red_black_white {
  --background: #f32;
  --color: #171616;
  --accent: #f0f0f0;
  --extra: #f0d44a;
  --ko: #f0f0f0;
  --bonus: #39adc9;
  --color-muted: rgb(139, 36.5, 28);
  --accent-muted: rgb(247.5, 145.5, 137);
  --extra-muted: rgb(247.5, 131.5, 54);
  --vf-GRAD: -0.3;
}

.red_white_black {
  --background: #f32;
  --color: #f0f0f0;
  --accent: #171616;
  --extra: #f0d44a;
  --ko: #39adc9;
  --bonus: #aaff78;
  --color-muted: rgb(247.5, 145.5, 137);
  --accent-muted: rgb(139, 36.5, 28);
  --extra-muted: rgb(247.5, 131.5, 54);
  --vf-GRAD: 0.5;
}

.white_red_black {
  --background: #f0f0f0;
  --color: #f32;
  --accent: #171616;
  --extra: #39adc9;
  --ko: #171616;
  --bonus: #60ad39;
  --color-muted: rgb(244.5, 183.3, 178.2);
  --accent-muted: rgb(174.9, 174.6, 174.6);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 1;
}

.white_black_red {
  --background: #f0f0f0;
  --color: #171616;
  --accent: #f32;
  --extra: #39adc9;
  --ko: #f32;
  --bonus: #60ad39;
  --color-muted: rgb(174.9, 174.6, 174.6);
  --accent-muted: rgb(244.5, 183.3, 178.2);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 0.5;
}

.black_red_white {
  --background: #171616;
  --color: #f32;
  --accent: #f0f0f0;
  --extra: #ff8784;
  --ko: #000;
  --bonus: #39adc9;
  --color-muted: rgb(173.8, 40.85, 29.8);
  --accent-muted: rgb(164.05, 163.7, 163.7);
  --extra-muted: rgb(139, 78.5, 77);
  --vf-GRAD: -0.5;
}

.black_white_red {
  --background: #171616;
  --color: #f0f0f0;
  --accent: #f32;
  --extra: #f0d44a;
  --ko: #f32;
  --bonus: #39adc9;
  --color-muted: rgb(164.05, 163.7, 163.7);
  --accent-muted: rgb(173.8, 40.85, 29.8);
  --extra-muted: rgb(131.5, 117, 48);
  --vf-GRAD: -1;
}

.blue_black_white {
  --background: #39adc9;
  --color: #171616;
  --accent: #f0f0f0;
  --extra: #f0d44a;
  --ko: #f0f0f0;
  --bonus: #f32;
  --color-muted: rgb(40, 97.5, 111.5);
  --accent-muted: rgb(148.5, 206.5, 220.5);
  --extra-muted: rgb(148.5, 192.5, 137.5);
  --vf-GRAD: -0.3;
}

.blue_white_black {
  --background: #39adc9;
  --color: #f0f0f0;
  --accent: #6f50a0;
  --extra: #f0d44a;
  --ko: #6f50a0;
  --bonus: #f32;
  --color-muted: rgb(148.5, 206.5, 220.5);
  --accent-muted: rgb(84, 126.5, 180.5);
  --extra-muted: rgb(148.5, 192.5, 137.5);
  --vf-GRAD: 0.5;
}

.white_blue_black {
  --background: #f0f0f0;
  --color: #39adc9;
  --accent: #6f50a0;
  --extra: #f32;
  --ko: #171616;
  --bonus: #60ad39;
  --color-muted: rgb(185.1, 219.9, 228.3);
  --accent-muted: rgb(201.3, 192, 216);
  --extra-muted: rgb(244.5, 183.3, 178.2);
  --vf-GRAD: 1;
}

.white_black_blue {
  --background: #f0f0f0;
  --color: #171616;
  --accent: #39adc9;
  --extra: #f32;
  --ko: #39adc9;
  --bonus: #aaff78;
  --color-muted: rgb(174.9, 174.6, 174.6);
  --accent-muted: rgb(185.1, 219.9, 228.3);
  --extra-muted: rgb(244.5, 183.3, 178.2);
  --vf-GRAD: 0.5;
}

.black_blue_white {
  --background: #171616;
  --color: #39adc9;
  --accent: #f0f0f0;
  --extra: #ff8784;
  --ko: #000;
  --bonus: #f32;
  --color-muted: rgb(45.1, 120.15, 138.35);
  --accent-muted: rgb(164.05, 163.7, 163.7);
  --extra-muted: rgb(139, 78.5, 77);
  --vf-GRAD: -0.5;
}

.black_white_blue {
  --background: #171616;
  --color: #f0f0f0;
  --accent: #39adc9;
  --extra: #f0d44a;
  --ko: #39adc9;
  --bonus: #f32;
  --color-muted: rgb(164.05, 163.7, 163.7);
  --accent-muted: rgb(45.1, 120.15, 138.35);
  --extra-muted: rgb(131.5, 117, 48);
  --vf-GRAD: -1;
}

.green_black_white {
  --background: #60ad39;
  --color: #f0d44a;
  --accent: #171616;
  --extra: #f0f0f0;
  --ko: #f32;
  --bonus: #6f50a0;
  --color-muted: rgb(168, 192.5, 65.5);
  --accent-muted: rgb(59.5, 97.5, 39.5);
  --extra-muted: rgb(168, 206.5, 148.5);
  --vf-GRAD: 0.5;
}

.green_white_black {
  --background: #60ad39;
  --color: #aaff78;
  --accent: #171616;
  --extra: #f0d44a;
  --ko: #171616;
  --bonus: #6f50a0;
  --color-muted: rgb(133, 214, 88.5);
  --accent-muted: rgb(59.5, 97.5, 39.5);
  --extra-muted: rgb(168, 192.5, 65.5);
  --vf-GRAD: 0.7;
}

.white_green_black {
  --background: #f0f0f0;
  --color: #60ad39;
  --accent: #39adc9;
  --extra: #39adc9;
  --ko: #fff;
  --bonus: #6f50a0;
  --color-muted: rgb(196.8, 219.9, 185.1);
  --accent-muted: rgb(185.1, 219.9, 228.3);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 1;
}

.white_black_green {
  --background: #f0f0f0;
  --color: #171616;
  --accent: #60ad39;
  --extra: #39adc9;
  --ko: #aaff78;
  --bonus: #6f50a0;
  --color-muted: rgb(174.9, 174.6, 174.6);
  --accent-muted: rgb(196.8, 219.9, 185.1);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 0.5;
}

.black_green_white {
  --background: #171616;
  --color: #60ad39;
  --accent: #f0d44a;
  --extra: #f0f0f0;
  --ko: #000;
  --bonus: #6f50a0;
  --color-muted: rgb(70.45, 120.15, 44.75);
  --accent-muted: rgb(164.05, 145.5, 55.8);
  --extra-muted: rgb(131.5, 131, 131);
  --vf-GRAD: -0.5;
}

.black_white_green {
  --background: #171616;
  --color: #f0d44a;
  --accent: #60ad39;
  --extra: #aaff78;
  --ko: #60ad39;
  --bonus: #6f50a0;
  --color-muted: rgb(164.05, 145.5, 55.8);
  --accent-muted: rgb(70.45, 120.15, 44.75);
  --extra-muted: rgb(96.5, 138.5, 71);
  --vf-GRAD: -0.5;
}

.purple_black_white {
  --background: #6f50a0;
  --color: #f32;
  --accent: #f0f0f0;
  --extra: #f0d44a;
  --ko: #39adc9;
  --bonus: #aaff78;
  --color-muted: rgb(183, 65.5, 97);
  --accent-muted: rgb(175.5, 160, 200);
  --extra-muted: rgb(175.5, 146, 117);
  --vf-GRAD: 0.5;
}

.purple_white_black {
  --background: #6f50a0;
  --color: #f0f0f0;
  --accent: #ff8784;
  --extra: #f0d44a;
  --ko: #f32;
  --bonus: #60ad39;
  --color-muted: rgb(175.5, 160, 200);
  --accent-muted: rgb(183, 107.5, 146);
  --extra-muted: rgb(175.5, 146, 117);
  --vf-GRAD: 0.5;
}

.white_purple_black {
  --background: #f0f0f0;
  --color: #6f50a0;
  --accent: #171616;
  --extra: #39adc9;
  --ko: #ff8784;
  --bonus: #60ad39;
  --color-muted: rgb(201.3, 192, 216);
  --accent-muted: rgb(174.9, 174.6, 174.6);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 1;
}

.white_black_purple {
  --background: #f0f0f0;
  --color: #171616;
  --accent: #6f50a0;
  --extra: #f32;
  --ko: #ff8784;
  --bonus: #60ad39;
  --color-muted: rgb(174.9, 174.6, 174.6);
  --accent-muted: rgb(201.3, 192, 216);
  --extra-muted: rgb(244.5, 183.3, 178.2);
  --vf-GRAD: 0.5;
}

.black_purple_white {
  --background: #171616;
  --color: #6f50a0;
  --accent: #39adc9;
  --extra: #f0d44a;
  --ko: #000;
  --bonus: #f32;
  --color-muted: rgb(80.2, 59.7, 111.7);
  --accent-muted: rgb(45.1, 120.15, 138.35);
  --extra-muted: rgb(131.5, 117, 48);
  --vf-GRAD: -1;
}

.black_white_purple {
  --background: #171616;
  --color: #f0f0f0;
  --accent: #6f50a0;
  --extra: #ff8784;
  --ko: #6f50a0;
  --bonus: #f32;
  --color-muted: rgb(164.05, 163.7, 163.7);
  --accent-muted: rgb(80.2, 59.7, 111.7);
  --extra-muted: rgb(139, 78.5, 77);
  --vf-GRAD: -1;
}

.yellow_black_white {
  --background: #f0d44a;
  --color: #171616;
  --accent: #f32;
  --extra: #6f50a0;
  --ko: #ff8784;
  --bonus: #6f50a0;
  --color-muted: rgb(131.5, 117, 48);
  --accent-muted: rgb(247.5, 131.5, 54);
  --extra-muted: rgb(175.5, 146, 117);
  --vf-GRAD: -0.3;
}

.yellow_white_black {
  --background: #f0d44a;
  --color: #60ad39;
  --accent: #171616;
  --extra: #6f50a0;
  --ko: rgb(66.4, 65.6, 65.6);
  --bonus: #f32;
  --color-muted: rgb(168, 192.5, 65.5);
  --accent-muted: rgb(131.5, 117, 48);
  --extra-muted: rgb(175.5, 146, 117);
  --vf-GRAD: 0.8;
}

.white_yellow_black {
  --background: #f0f0f0;
  --color: rgb(214.2, 185.6, 91.2);
  --accent: rgb(66.4, 65.6, 65.6);
  --extra: #39adc9;
  --ko: #6f50a0;
  --bonus: #f32;
  --color-muted: rgb(232.26, 223.68, 195.36);
  --accent-muted: rgb(187.92, 187.68, 187.68);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 1;
}

.white_black_yellow {
  --background: #f0f0f0;
  --color: #171616;
  --accent: rgb(214.2, 185.6, 91.2);
  --extra: #60ad39;
  --ko: #f0d44a;
  --bonus: #f32;
  --color-muted: rgb(174.9, 174.6, 174.6);
  --accent-muted: rgb(232.26, 223.68, 195.36);
  --extra-muted: rgb(196.8, 219.9, 185.1);
  --vf-GRAD: 0.5;
}

.black_yellow_white {
  --background: #171616;
  --color: #f0d44a;
  --accent: #f0f0f0;
  --extra: #ff8784;
  --ko: #f32;
  --bonus: #6f50a0;
  --color-muted: rgb(164.05, 145.5, 55.8);
  --accent-muted: rgb(164.05, 163.7, 163.7);
  --extra-muted: rgb(139, 78.5, 77);
  --vf-GRAD: -0.5;
}

.black_white_yellow {
  --background: #171616;
  --color: #f0f0f0;
  --accent: #f0d44a;
  --extra: #aaff78;
  --ko: #60ad39;
  --bonus: #f32;
  --color-muted: rgb(164.05, 163.7, 163.7);
  --accent-muted: rgb(164.05, 145.5, 55.8);
  --extra-muted: rgb(96.5, 138.5, 71);
  --vf-GRAD: -1;
}

.grey_black_white {
  --background: rgb(168.39, 168.06, 168.06);
  --color: #6f50a0;
  --accent: #f0d44a;
  --extra: #f0f0f0;
  --ko: #aaff78;
  --bonus: #f32;
  --color-muted: rgb(139.695, 124.03, 164.03);
  --accent-muted: rgb(204.195, 190.03, 121.03);
  --extra-muted: rgb(204.195, 204.03, 204.03);
  --vf-GRAD: 0.7;
}

.grey_white_black {
  --background: rgb(168.39, 168.06, 168.06);
  --color: #6f50a0;
  --accent: rgb(66.4, 65.6, 65.6);
  --extra: #f0d44a;
  --ko: #39adc9;
  --bonus: #f32;
  --color-muted: rgb(139.695, 124.03, 164.03);
  --accent-muted: rgb(117.395, 116.83, 116.83);
  --extra-muted: rgb(204.195, 190.03, 121.03);
  --vf-GRAD: 0.7;
}

.white_grey_black {
  --background: #f0f0f0;
  --color: rgb(66.4, 65.6, 65.6);
  --accent: #ff8784;
  --extra: #39adc9;
  --ko: #ff8784;
  --bonus: #f32;
  --color-muted: rgb(187.92, 187.68, 187.68);
  --accent-muted: rgb(244.5, 208.5, 207.6);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 1;
}

.white_black_grey {
  --background: #f0f0f0;
  --color: #171616;
  --accent: rgb(66.4, 65.6, 65.6);
  --extra: #f32;
  --ko: #fff;
  --bonus: #6f50a0;
  --color-muted: rgb(174.9, 174.6, 174.6);
  --accent-muted: rgb(187.92, 187.68, 187.68);
  --extra-muted: rgb(244.5, 183.3, 178.2);
  --vf-GRAD: 0.5;
}

.black_grey_white {
  --background: #171616;
  --color: rgb(168.39, 168.06, 168.06);
  --accent: #ff8784;
  --extra: #f0d44a;
  --ko: #6f50a0;
  --bonus: #f32;
  --color-muted: rgb(117.5035, 116.939, 116.939);
  --accent-muted: rgb(173.8, 95.45, 93.5);
  --extra-muted: rgb(131.5, 117, 48);
  --vf-GRAD: -0.5;
}

.black_white_grey {
  --background: #171616;
  --color: #f0f0f0;
  --accent: rgb(168.39, 168.06, 168.06);
  --extra: #ff8784;
  --ko: rgb(66.4, 65.6, 65.6);
  --bonus: #f32;
  --color-muted: rgb(164.05, 163.7, 163.7);
  --accent-muted: rgb(117.5035, 116.939, 116.939);
  --extra-muted: rgb(139, 78.5, 77);
  --vf-GRAD: -1;
}

.steel_black_white {
  --background: #44525d;
  --color: #39adc9;
  --accent: #f0f0f0;
  --extra: #f0d44a;
  --ko: #6f50a0;
  --bonus: #f32;
  --color-muted: rgb(62.5, 127.5, 147);
  --accent-muted: rgb(154, 161, 166.5);
  --extra-muted: rgb(154, 147, 83.5);
  --vf-GRAD: 0.7;
}

.steel_white_black {
  --background: #44525d;
  --color: #ff8784;
  --accent: #f32;
  --extra: #f0d44a;
  --ko: #39adc9;
  --bonus: #aaff78;
  --color-muted: rgb(161.5, 108.5, 112.5);
  --accent-muted: rgb(161.5, 66.5, 63.5);
  --extra-muted: rgb(154, 147, 83.5);
  --vf-GRAD: 0.7;
}

.white_steel_black {
  --background: #f0f0f0;
  --color: #44525d;
  --accent: #171616;
  --extra: #39adc9;
  --ko: #39adc9;
  --bonus: #f32;
  --color-muted: rgb(188.4, 192.6, 195.9);
  --accent-muted: rgb(174.9, 174.6, 174.6);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 1;
}

.white_black_steel {
  --background: #f0f0f0;
  --color: #44525d;
  --accent: #f32;
  --extra: #6f50a0;
  --ko: #fff;
  --bonus: #60ad39;
  --color-muted: rgb(188.4, 192.6, 195.9);
  --accent-muted: rgb(244.5, 183.3, 178.2);
  --extra-muted: rgb(201.3, 192, 216);
  --vf-GRAD: 0.5;
}

.black_steel_white {
  --background: #171616;
  --color: #ff8784;
  --accent: #f0d44a;
  --extra: #aaff78;
  --ko: #6f50a0;
  --bonus: #f32;
  --color-muted: rgb(173.8, 95.45, 93.5);
  --accent-muted: rgb(164.05, 145.5, 55.8);
  --extra-muted: rgb(96.5, 138.5, 71);
  --vf-GRAD: -1;
}

.black_white_steel {
  --background: #171616;
  --color: #f0f0f0;
  --accent: #BAB391;
  --extra: #f0d44a;
  --ko: #44525d;
  --bonus: #f32;
  --color-muted: rgb(164.05, 163.7, 163.7);
  --accent-muted: rgb(128.95, 124.05, 101.95);
  --extra-muted: rgb(131.5, 117, 48);
  --vf-GRAD: -1;
}

.tan_black_white {
  --background: #BAB391;
  --color: #171616;
  --accent: #44525d;
  --extra: #f0d44a;
  --ko: #ff8784;
  --bonus: #f32;
  --color-muted: rgb(104.5, 100.5, 83.5);
  --accent-muted: rgb(127, 130.5, 119);
  --extra-muted: rgb(213, 195.5, 109.5);
  --vf-GRAD: -0.3;
}

.tan_white_black {
  --background: #BAB391;
  --color: #f0f0f0;
  --accent: #44525d;
  --extra: #6f50a0;
  --ko: rgb(66.4, 65.6, 65.6);
  --bonus: #f32;
  --color-muted: rgb(213, 209.5, 192.5);
  --accent-muted: rgb(127, 130.5, 119);
  --extra-muted: rgb(148.5, 129.5, 152.5);
  --vf-GRAD: 0.5;
}

.white_tan_black {
  --background: #f0f0f0;
  --color: rgb(140.36, 135.04, 110.56);
  --accent: #171616;
  --extra: #39adc9;
  --ko: #f0d44a;
  --bonus: #f32;
  --color-muted: rgb(210.108, 208.512, 201.168);
  --accent-muted: rgb(174.9, 174.6, 174.6);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 1;
}

.white_black_tan {
  --background: #f0f0f0;
  --color: #171616;
  --accent: rgb(140.36, 135.04, 110.56);
  --extra: #39adc9;
  --ko: #BAB391;
  --bonus: #f32;
  --color-muted: rgb(174.9, 174.6, 174.6);
  --accent-muted: rgb(210.108, 208.512, 201.168);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 0.5;
}

.black_tan_white {
  --background: #171616;
  --color: #BAB391;
  --accent: #f0f0f0;
  --extra: #f0d44a;
  --ko: #000;
  --bonus: #f32;
  --color-muted: rgb(128.95, 124.05, 101.95);
  --accent-muted: rgb(164.05, 163.7, 163.7);
  --extra-muted: rgb(131.5, 117, 48);
  --vf-GRAD: -0.8;
}

.black_white_tan {
  --background: #171616;
  --color: #f0f0f0;
  --accent: #BAB391;
  --extra: #f32;
  --ko: rgb(140.36, 135.04, 110.56);
  --bonus: #60ad39;
  --color-muted: rgb(164.05, 163.7, 163.7);
  --accent-muted: rgb(128.95, 124.05, 101.95);
  --extra-muted: rgb(139, 36.5, 28);
  --vf-GRAD: -1;
}

.pink_black_white {
  --background: #ff8784;
  --color: #171616;
  --accent: #6f50a0;
  --extra: #f0d44a;
  --ko: #f32;
  --bonus: #60ad39;
  --color-muted: rgb(139, 78.5, 77);
  --accent-muted: rgb(183, 107.5, 146);
  --extra-muted: rgb(247.5, 173.5, 103);
  --vf-GRAD: -0.3;
}

.pink_white_black {
  --background: #ff8784;
  --color: #f0f0f0;
  --accent: #6f50a0;
  --extra: #f32;
  --ko: #44525d;
  --bonus: #60ad39;
  --color-muted: rgb(247.5, 187.5, 186);
  --accent-muted: rgb(183, 107.5, 146);
  --extra-muted: #ff5d53;
  --vf-GRAD: 0.5;
}

.white_pink_black {
  --background: #f0f0f0;
  --color: #ff8784;
  --accent: #f32;
  --extra: #39adc9;
  --ko: #6f50a0;
  --bonus: #60ad39;
  --color-muted: rgb(244.5, 208.5, 207.6);
  --accent-muted: rgb(244.5, 183.3, 178.2);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 1;
}

.white_black_pink {
  --background: #f0f0f0;
  --color: #171616;
  --accent: #ff8784;
  --extra: #f32;
  --ko: #ff8784;
  --bonus: #60ad39;
  --color-muted: rgb(174.9, 174.6, 174.6);
  --accent-muted: rgb(244.5, 208.5, 207.6);
  --extra-muted: rgb(244.5, 183.3, 178.2);
  --vf-GRAD: 0.5;
}

.black_pink_white {
  --background: #171616;
  --color: #ff8784;
  --accent: #f32;
  --extra: #f0d44a;
  --ko: #E12D1E;
  --bonus: #60ad39;
  --color-muted: rgb(173.8, 95.45, 93.5);
  --accent-muted: rgb(173.8, 40.85, 29.8);
  --extra-muted: rgb(131.5, 117, 48);
  --vf-GRAD: -0.5;
}

.black_pink_white {
  --background: #171616;
  --color: #ff8784;
  --accent: #E52816;
  --extra: #f0d44a;
  --ko: #E52816;
  --bonus: #60ad39;
  --color-muted: rgb(173.8, 95.45, 93.5);
  --accent-muted: rgb(156.9, 33.7, 22);
  --extra-muted: rgb(131.5, 117, 48);
  --vf-GRAD: -0.5;
}

.black_white_pink {
  --background: #171616;
  --color: #f0f0f0;
  --accent: #ff8784;
  --extra: #f0d44a;
  --ko: #f32;
  --bonus: #60ad39;
  --color-muted: rgb(164.05, 163.7, 163.7);
  --accent-muted: rgb(173.8, 95.45, 93.5);
  --extra-muted: rgb(131.5, 117, 48);
  --vf-GRAD: -1;
}

.alert_black_white {
  --background: #aaff78;
  --color: #171616;
  --accent: #6f50a0;
  --extra: #f32;
  --ko: #f0f0f0;
  --bonus: #60ad39;
  --color-muted: rgb(96.5, 138.5, 71);
  --accent-muted: rgb(140.5, 167.5, 140);
  --extra-muted: rgb(212.5, 153, 77);
  --vf-GRAD: -0.3;
}

.alert_white_black {
  --background: #aaff78;
  --color: #44525d;
  --accent: #f32;
  --extra: #6f50a0;
  --ko: #f0f0f0;
  --bonus: #60ad39;
  --color-muted: rgb(119, 168.5, 106.5);
  --accent-muted: rgb(212.5, 153, 77);
  --extra-muted: rgb(140.5, 167.5, 140);
  --vf-GRAD: 0;
}

.white_alert_black {
  --background: #f0f0f0;
  --color: #60ad39;
  --accent: #6f50a0;
  --extra: #39adc9;
  --ko: #aaff78;
  --bonus: #f32;
  --color-muted: rgb(196.8, 219.9, 185.1);
  --accent-muted: rgb(201.3, 192, 216);
  --extra-muted: rgb(185.1, 219.9, 228.3);
  --vf-GRAD: 1;
}

.white_black_alert {
  --background: #f0f0f0;
  --color: #60ad39;
  --accent: #6f50a0;
  --extra: #f32;
  --ko: #171616;
  --bonus: #60ad39;
  --color-muted: rgb(196.8, 219.9, 185.1);
  --accent-muted: rgb(201.3, 192, 216);
  --extra-muted: rgb(244.5, 183.3, 178.2);
  --vf-GRAD: 0.5;
}

.black_alert_white {
  --background: #171616;
  --color: #aaff78;
  --accent: #f0d44a;
  --extra: #f0f0f0;
  --ko: #000;
  --bonus: #f32;
  --color-muted: rgb(118.55, 173.45, 85.7);
  --accent-muted: rgb(164.05, 145.5, 55.8);
  --extra-muted: rgb(131.5, 131, 131);
  --vf-GRAD: -0.5;
}

.black_white_alert {
  --background: #171616;
  --color: #aaff78;
  --accent: #6f50a0;
  --extra: #f0d44a;
  --ko: rgb(66.4, 65.6, 65.6);
  --bonus: #f32;
  --color-muted: rgb(118.55, 173.45, 85.7);
  --accent-muted: rgb(80.2, 59.7, 111.7);
  --extra-muted: rgb(131.5, 117, 48);
  --vf-GRAD: -1;
}

.tan_white_black#languages .language-list label, .tan_white_black#languages .language-detail, .tan_white_black p,
.yellow_white_black#languages .language-list label,
.yellow_white_black#languages .language-detail,
.yellow_white_black p,
.grey_white_black#languages .language-list label,
.grey_white_black#languages .language-detail,
.grey_white_black p,
.grey_black_white#languages .language-list label,
.grey_black_white#languages .language-detail,
.grey_black_white p {
  color: #171616;
}

.purple_black_white#languages .language-list label, .purple_black_white#languages .language-detail, .purple_black_white p,
.green_black_white#languages .language-list label,
.green_black_white#languages .language-detail,
.green_black_white p,
.green_white_black#languages .language-list label,
.green_white_black#languages .language-detail,
.green_white_black p {
  color: #f0f0f0;
}

.white_yellow_black#languages .language-list label, .white_yellow_black#languages .language-detail, .white_yellow_black p {
  color: #60ad39;
}

html {
  /*  62.5% of 16px base font size is 10px  */
  /*  so 1rem == 10px  */
  font-size: 62.5%;
  overflow: scroll;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}

body {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  margin: 0 0 0 0;
  color: var(--color);
  background: var(--background);
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  scroll-padding-top: calc(var(--header-offset) - 10px);
}

main {
  margin-top: var(--header-offset);
  flex: 1;
}

header, section, footer {
  padding: 3vw;
  color: var(--color);
  background: var(--background);
  overflow: hidden;
}

section {
  margin-top: -3px;
  width: 100vw;
  padding-bottom: 10em;
}
@media (max-width: 600px) {
  section {
    padding-bottom: 13vw;
  }
}

section.no-bottom-padding {
  padding-bottom: 3vw;
}

.full {
  height: auto;
  min-height: calc(100vh - 2 * var(--header-offset) + 1px);
}

.half {
  min-height: calc(50vh - var(--header-offset));
  height: auto;
}

#errors {
  background: #aaff78;
  color: #171616;
  width: 100%;
  margin-top: var(--header-offset);
  padding: 3vw;
}

.alert_white_black ~ #errors,
.alert_black_white ~ #errors {
  background: #171616;
  color: #aaff78;
  border-bottom: solid var(--line) #aaff78;
}
.alert_white_black ~ #errors a,
.alert_black_white ~ #errors a {
  color: var(--color);
}
.alert_white_black ~ #errors a:hover,
.alert_black_white ~ #errors a:hover {
  color: var(--background);
}
.alert_white_black ~ #errors button:hover,
.alert_black_white ~ #errors button:hover {
  color: var(--color);
  background: var(--background);
}

.p {
  max-width: 99rem;
}
.p + .p {
  text-indent: 1.6em;
}

.grid-2,
.grid-1_3,
.grid-3_1 {
  display: grid;
  -moz-column-gap: 2vw;
       column-gap: 2vw;
  row-gap: 2vw;
}

.grid-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.grid-2.max {
  max-width: 48em;
}

.grid-1_3 {
  max-width: 69em;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.grid-3_1 {
  max-width: 69em;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.or {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 2em 0;
}
.or hr {
  display: inline-block;
  border: none;
  background: none;
  border-top: solid var(--line-thin) var(--color);
  height: 0;
  flex-grow: 4;
}
.or h4 {
  padding: 0 0.8em;
  position: relative;
  top: 0.25em;
  flex-grow: 0;
  font-size: 0.8em;
}

pre {
  font-size: 0.75em;
  font-family: monospace !important;
  -moz-tab-size: 2em;
    -o-tab-size: 2em;
       tab-size: 2em;
}

pre.code {
  margin: 0.5em 0;
  padding: 0.5em 0.8em;
  background: #000;
  color: #0F0;
}

@font-face {
  font-family: "Euchre";
  src: url("/https/okaytype.com/woffs/Euchre-VF/EuchreVariable-Roman.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 85% 100%;
  font-style: normal;
}
@font-face {
  font-family: "Euchre";
  src: url("/https/okaytype.com/woffs/Euchre-VF/EuchreVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 85% 100%;
  font-style: italic;
}
h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 *, a, a *, p, p *, table, table *, tr, tr *, td, td *, div, div *, section, section *, span, span *, label, label *,
.euchre,
.euchre * {
  font-family: "Euchre";
  font-variation-settings: "GRAD" var(--vf-GRAD);
  --ot-kern: 1;
  --ot-liga: 1;
  --ot-calt: 1;
  --ot-c2sc: 0;
  --ot-smcp: 0;
  --ot-case: 0;
  --ot-lnum: 0;
  --ot-tnum: 0;
  --ot-numr: 0;
  --ot-dnom: 0;
  --ot-frac: 0;
  --ot-subs: 0;
  --ot-sups: 0;
  --ot-ss01: 0;
  --ot-ss02: 0;
  --ot-ss03: 0;
  --ot-ss04: 0;
  --ot-ss05: 0;
  --ot-ss06: 0;
  --ot-ss07: 0;
  font-feature-settings: "kern" var(--ot-kern), "liga" var(--ot-liga), "calt" var(--ot-calt), "c2sc" var(--ot-c2sc), "smcp" var(--ot-smcp), "case" var(--ot-case), "lnum" var(--ot-lnum), "tnum" var(--ot-tnum), "numr" var(--ot-numr), "dnom" var(--ot-dnom), "frac" var(--ot-frac), "subs" var(--ot-subs), "sups" var(--ot-sups), "ss01" var(--ot-ss01), "ss02" var(--ot-ss02), "ss03" var(--ot-ss03), "ss04" var(--ot-ss04), "ss05" var(--ot-ss05), "ss06" var(--ot-ss06), "ss07" var(--ot-ss07);
}

.euchre, .euchre * {
  font-style: normal;
}

.euchre.italic, .euchre.italic * {
  font-style: italic;
}

.euchre.condensed, .euchre.condensed * {
  font-stretch: 85%;
}

.euchre.exthin, .euchre.exthin * {
  font-weight: 100;
  --vf-GRAD: -1;
}

.euchre.thin, .euchre.thin * {
  font-weight: 200;
  --vf-GRAD: -.666;
}

.euchre.light, .euchre.light * {
  font-weight: 300;
  --vf-GRAD: -.333;
}

.euchre.regular, .euchre.regular * {
  font-weight: 400;
  --vf-GRAD: 0;
}

.euchre.medium, .euchre.medium * {
  font-weight: 500;
  --vf-GRAD: .333;
}

.euchre.bold, .euchre.bold * {
  font-weight: 700;
  --vf-GRAD: .666;
}

.euchre.black, .euchre.black * {
  font-weight: 900;
  --vf-GRAD: 1;
}

@font-face {
  font-family: "Okay COLRv0";
  src: url("/https/okaytype.com/woffs/Custom/ok-vf-logo-color.woff2") format("woff2");
  font-weight: 1 900;
  font-style: normal;
}
@font-palette-values --ok-black-on-white {
  font-family: "Okay COLRv0";
  base-palette: 0;
}
@font-palette-values --ok-red-on-white {
  font-family: "Okay COLRv0";
  base-palette: 1;
}
@font-palette-values --ok-black-on-red {
  font-family: "Okay COLRv0";
  base-palette: 2;
}
@font-palette-values --ok-white-on-red {
  font-family: "Okay COLRv0";
  base-palette: 2;
}
@font-palette-values --ok-red-on-black {
  font-family: "Okay COLRv0";
  base-palette: 4;
}
@font-palette-values --ok-white-on-black {
  font-family: "Okay COLRv0";
  base-palette: 5;
}
@font-face {
  font-family: "Okay FLAT";
  src: url("/https/okaytype.com/woffs/Custom/ok-vf-logo-nocircle.woff2") format("woff2");
  font-weight: 1 900;
  font-style: normal;
}
@font-face {
  font-family: "Fallback";
  src: url("/https/okaytype.com/woffs/Custom/AND-Regular.woff2") format("woff2");
  font-style: normal;
}
body {
  font-family: "Euchre", Tahoma, Verdana, sans-serif;
  font-size: clamp(1.3rem, 1.65vw, 2.3rem);
  line-height: 1.55;
  font-weight: 400;
  font-stretch: 100%;
  --vf-GRAD: 0;
  text-align: left;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  -webkit-hyphens: auto;
          hyphens: auto;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

i {
  font-style: italic;
}

b {
  font-weight: 700;
  --vf-GRAD: 1;
}

a {
  color: inherit;
}
a:hover {
  color: var(--accent);
  text-underline-offset: 0.14em;
}

a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

h1, h1 a,
h2, h2 a,
h3, h3 a {
  font-family: "Okay";
  font-style: normal;
  line-height: 1;
  font-variation-settings: "XTND" var(--vf-XTND);
  text-underline-offset: 0.11em;
}

h1, h1 a {
  line-height: 0.87;
  font-size: clamp(6.5rem, 14vw, 20rem);
  font-stretch: 60%;
  --vf-XTND: 20;
  margin-bottom: 3rem;
  -webkit-hyphens: auto;
          hyphens: auto;
  text-underline-offset: 0.04em;
}
h1 .short, h1 a .short {
  --vf-XTND: 0;
}

h2, h2 a {
  line-height: 0.89;
  font-size: clamp(4rem, 6vw, 9rem);
  font-stretch: 60%;
  --vf-XTND: 0;
  margin-bottom: 0.15em;
  max-width: 99rem;
  -webkit-hyphens: auto;
          hyphens: auto;
  text-underline-offset: 0.05em;
}

h3, h3 a {
  font-stretch: 80%;
  --vf-XTND: 40;
  font-size: clamp(2.4rem, 3vw, 4.7rem);
  line-height: 1.2;
  margin: 0.25em 0 0.25em 0;
  font-weight: 666;
  text-underline-offset: 0.1em;
}

h4, h4 a {
  font-weight: 666;
  letter-spacing: 0.03em;
  margin-bottom: 0.1395em;
  --ot-smcp: 1;
}

p + h4 {
  margin-top: 1.9375em;
}

h5 {
  font-weight: 456;
  --ot-smcp: 1;
  letter-spacing: 0.04em;
  display: inline-block;
}

h6 {
  font-size: 0.82em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

p {
  line-height: 1.55;
  max-width: 99rem;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.hyphens {
  -webkit-hyphens: auto;
          hyphens: auto;
}

.pill {
  border-radius: 1.6em;
  position: relative;
  word-wrap: break-word;
  display: inline-block;
  margin: 0.3em 0 0 0;
  padding: 0.12em 0.6em 0 0.6em;
  align-items: flex-start;
  background: var(--accent);
  color: var(--background);
  text-decoration: none;
}

a.pill {
  color: var(--background);
  background: var(--accent);
}
a.pill:hover {
  color: var(--background);
  background: var(--color);
}

p.text {
  max-width: 77rem;
}
p.text + p.text {
  text-indent: 1.6em;
}

@font-face {
  font-family: "UIF";
  src: url("/https/okaytype.com/woffs/Custom/uif.woff2") format("woff2");
}
.uif {
  font-family: "UIF";
  --vf-UUUU: 0;
  --vf-DDDD: 0;
  --vf-LLLL: 0;
  --vf-RRRR: 0;
  font-variation-settings: "UUUU" var(--vf-UUUU), "DDDD" var(--vf-DDDD), "LLLL" var(--vf-LLLL), "RRRR" var(--vf-RRRR);
}

.error {
  margin-top: -0.5em;
  display: inline-block;
  background: #aaff78;
  color: #171616;
  margin: 0.5em 0;
  padding: 0.5em 1em;
  font-weight: 555;
}

input[type=radio],
input[type=checkbox]:not(.toggle) {
  display: inline-grid;
  place-content: center;
  position: relative;
  top: 0.15em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--background);
  border: solid var(--line) var(--color);
  color: var(--background);
  font: inherit;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 0 0.3em 0 0;
  position: relative;
}
input[type=radio]::before,
input[type=checkbox]:not(.toggle)::before {
  content: "";
  width: 1em;
  height: 1em;
  background: var(--color);
  border-radius: 50%;
  transform: scale(0);
  transition: 0.1s transform ease-in-out;
}
input[type=radio]:checked::before,
input[type=checkbox]:not(.toggle):checked::before {
  transform: scale(1);
}
input[type=radio]:disabled ~ label,
input[type=checkbox]:not(.toggle):disabled ~ label {
  opacity: 0.2;
}

input[type=range] {
  cursor: pointer;
  display: inline-block;
  margin: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--color);
  border-radius: 1em;
  width: 100%;
  height: var(--line);
  outline: 0;
}
input[type=range]:disabled {
  opacity: 0.2;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--color);
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  cursor: pointer;
}

label {
  color: inherit;
  display: block;
  cursor: pointer;
}
label.with_check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3em;
}
label.with_check > input[type=checkbox] {
  top: 0.15em;
}

input[type=email],
input[type=number],
input[type=search],
input[type=text],
input[type=tel],
input[type=url],
input[type=password],
textarea {
  display: block;
  box-sizing: border-box;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #f0f0f0;
  color: #171616;
  padding: 0.25em 0.5em;
  margin: 0 0 0.5em 0;
  width: 100%;
}
input[type=email]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=password]::-moz-placeholder, textarea::-moz-placeholder {
  color: rgb(153.2, 152.8, 152.8);
}
input[type=email]::placeholder,
input[type=number]::placeholder,
input[type=search]::placeholder,
input[type=text]::placeholder,
input[type=tel]::placeholder,
input[type=url]::placeholder,
input[type=password]::placeholder,
textarea::placeholder {
  color: rgb(153.2, 152.8, 152.8);
}
input[type=email]:-webkit-autofill, input[type=number]:-webkit-autofill, input[type=search]:-webkit-autofill, input[type=text]:-webkit-autofill, input[type=tel]:-webkit-autofill, input[type=url]:-webkit-autofill, input[type=password]:-webkit-autofill, textarea:-webkit-autofill {
  filter: none; /* needed for firefox! */
  -webkit-box-shadow: inset 0 0 0px 9999px #f0d44a !important;
  -webkit-text-fill-color: #171616 !important;
}
input[type=email]:autofill, input[type=email]::-webkit-autofill,
input[type=number]:autofill,
input[type=number]::-webkit-autofill,
input[type=search]:autofill,
input[type=search]::-webkit-autofill,
input[type=text]:autofill,
input[type=text]::-webkit-autofill,
input[type=tel]:autofill,
input[type=tel]::-webkit-autofill,
input[type=url]:autofill,
input[type=url]::-webkit-autofill,
input[type=password]:autofill,
input[type=password]::-webkit-autofill,
textarea:autofill,
textarea::-webkit-autofill {
  filter: none; /* needed for firefox! */
  -webkit-box-shadow: inset 0 0 0px 9999px #f0d44a !important;
  -webkit-text-fill-color: #171616 !important;
}

input[type=email]:hover,
input[type=number]:hover,
input[type=search]:hover,
input[type=text]:hover,
input[type=tel]:hover,
input[type=url]:hover,
input[type=password]:hover,
textarea:hover,
input[type=email]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=text]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
}
input[type=email]:hover::-moz-placeholder, input[type=number]:hover::-moz-placeholder, input[type=search]:hover::-moz-placeholder, input[type=text]:hover::-moz-placeholder, input[type=tel]:hover::-moz-placeholder, input[type=url]:hover::-moz-placeholder, input[type=password]:hover::-moz-placeholder, textarea:hover::-moz-placeholder, input[type=email]:focus::-moz-placeholder, input[type=number]:focus::-moz-placeholder, input[type=search]:focus::-moz-placeholder, input[type=text]:focus::-moz-placeholder, input[type=tel]:focus::-moz-placeholder, input[type=url]:focus::-moz-placeholder, input[type=password]:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
  color: rgb(188.4, 176, 208);
}
input[type=email]:hover::placeholder,
input[type=number]:hover::placeholder,
input[type=search]:hover::placeholder,
input[type=text]:hover::placeholder,
input[type=tel]:hover::placeholder,
input[type=url]:hover::placeholder,
input[type=password]:hover::placeholder,
textarea:hover::placeholder,
input[type=email]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=search]:focus::placeholder,
input[type=text]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=url]:focus::placeholder,
input[type=password]:focus::placeholder,
textarea:focus::placeholder {
  color: rgb(188.4, 176, 208);
}

textarea:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=text]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus {
  background: rgb(221.7, 233.3, 236.1);
  color: #6f50a0;
}

textarea {
  min-height: 5em;
  width: 100%;
  max-width: inherit;
  line-height: 1.4;
  outline: none;
}

input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
  margin: 0;
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.floating {
  position: relative;
  margin-bottom: 0.6em;
}
.floating label {
  pointer-events: none;
  position: absolute;
  top: 0;
  font-size: 1em;
  margin-left: 0.65em;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateY(1em) scale(1);
  transform-origin: top left !important;
  will-change: transform;
  z-index: 2;
  color: var(--background);
}
.floating input {
  margin: 0;
  padding: 1.65em 0.65em 0.4em 0.65em;
  z-index: 1;
  line-height: 1;
}
.floating input::-moz-placeholder {
  -moz-transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
}
.floating input::placeholder {
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
}
.floating input:required + label:after {
  display: inline;
  content: "*";
  margin-left: 0.1em;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0.25;
}
.floating:hover input:required + label:after {
  opacity: 0.5;
}
.floating.active label {
  transform: translateY(0.375em) scale(0.888);
  font-size: 0.8em;
}
.floating.active input::-moz-placeholder {
  opacity: 1;
}
.floating.active input::placeholder {
  opacity: 1;
}
.floating.active input:required + label:after {
  opacity: 1;
}

.error label, .error .error-message, .error input[type=email], .error input[type=number], .error input[type=search], .error input[type=text], .error input[type=tel], .error input[type=url], .error input[type=password] {
  color: var(--accent);
  border-color: var(--accent);
}
.error label::-moz-placeholder, .error .error-message::-moz-placeholder, .error input[type=email]::-moz-placeholder, .error input[type=number]::-moz-placeholder, .error input[type=search]::-moz-placeholder, .error input[type=text]::-moz-placeholder, .error input[type=tel]::-moz-placeholder, .error input[type=url]::-moz-placeholder, .error input[type=password]::-moz-placeholder {
  color: var(--accent);
}
.error label::placeholder, .error .error-message::placeholder, .error input[type=email]::placeholder, .error input[type=number]::placeholder, .error input[type=search]::placeholder, .error input[type=text]::placeholder, .error input[type=tel]::placeholder, .error input[type=url]::placeholder, .error input[type=password]::placeholder {
  color: var(--accent);
}

.error-message {
  overflow: hidden;
  position: relative;
  max-height: 0;
  transition: all 1s;
  font-size: 0.8em;
  top: -0.2em;
}

.error .error-message {
  max-height: 3em;
}

.alert-message {
  display: none;
}

.problem {
  color: var(--accent);
  padding: 0.2em 0.4em;
  margin: -0.2em -0.4em;
}
.problem .alert-message {
  display: block;
}

select {
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--background);
  background: var(--color);
  background: linear-gradient(-90deg, var(--color) 0%, rgba(0, 0, 0, 0.25) 100%);
  padding: 0.5vw 0.8vw;
  margin: 0.4vw 0;
  border: var(--line) solid var(--color);
  outline: none;
  cursor: pointer;
  font-size: initial;
}

.text_as_select {
  overflow: hidden;
  position: relative;
}
.text_as_select > span {
  white-space: nowrap;
}
.text_as_select > span:after {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  display: inline-block;
  margin-left: 0.35em;
  content: "▼";
  font-family: "UIF", "Euchre";
  font-style: normal;
  font-size: 0.7em;
  --vf-UUUU: 0;
  --vf-DDDD: 1;
  --vf-LLLL: 0;
  --vf-RRRR: 0;
  font-variation-settings: "UUUU" var(--vf-UUUU), "DDDD" var(--vf-DDDD), "LLLL" var(--vf-LLLL), "RRRR" var(--vf-RRRR);
  transition: font-variation-settings 0.07s cubic-bezier(0.19, 1, 0.22, 1);
}
.text_as_select:active > span:after {
  --vf-UUUU: 0;
  --vf-DDDD: 0;
}
.text_as_select > select {
  position: absolute;
  left: 0;
  top: -0.2em;
  width: 100%;
  opacity: 0;
  background: none;
  border: none;
  height: auto;
  padding: 0 0.25em;
  margin: 0 -0.25em;
}
.text_as_select:hover {
  color: var(--accent);
}
.text_as_select .license_add {
  font-size: 0.8em;
  font-style: italic;
  line-height: 0.5;
  font-weight: 350;
  margin-bottom: 0.5rem;
}
.text_as_select .license_add:after {
  content: "";
}

ul {
  list-style: none;
  max-width: 99rem;
}

li {
  margin-left: 2em;
  position: relative;
}

li:before {
  content: "☛";
  display: inline-block;
  position: absolute;
  left: -1.9em;
  font-feature-settings: "ss03" 1, "case" 1;
}

ol {
  list-style-type: upper-roman;
}

ol, ul {
  padding-left: 0;
  margin-top: 0;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin: 0 0 0 2.5rem;
}

table:not(.default) {
  margin: 0.65vw 0;
}
table:not(.default) tr {
  border-top: var(--line-thin) solid var(--color);
}
table:not(.default) th, table:not(.default) td {
  vertical-align: top;
  padding: 1.5rem 3rem 1.5rem 0;
  text-align: left;
}
table:not(.default) th:first-child, table:not(.default) td:first-child {
  padding-left: 0;
}
table:not(.default) th:last-child, table:not(.default) td:last-child {
  padding-right: 1.3vw;
}

button,
.button {
  display: inline-block;
  font-size: 0.9em;
  font-weight: 666;
  line-height: 1;
  padding: 0.7em 1em;
  border-radius: 1.5em;
  color: var(--background);
  background: var(--color);
  margin-right: -0.2em;
  margin-left: -0.2em;
  margin-bottom: 0.5em;
  cursor: pointer;
  text-decoration: none;
}
button:hover,
.button:hover {
  background: var(--accent);
  color: var(--background);
  text-decoration: none;
}
button:disabled, button[disabled],
.button:disabled,
.button[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
button.big,
.button.big {
  padding: 0.4em 0.55em;
  font-size: 3em;
}

.red_on_white input[type=email], .red_on_white input[type=number], .red_on_white input[type=search], .red_on_white input[type=text], .red_on_white input[type=tel], .red_on_white input[type=url], .red_on_white input[type=password], .red_on_white textarea, .black_on_white input[type=email], .black_on_white input[type=number], .black_on_white input[type=search], .black_on_white input[type=text], .black_on_white input[type=tel], .black_on_white input[type=url], .black_on_white input[type=password], .black_on_white textarea,
.white_red_black input[type=email],
.white_red_black input[type=number],
.white_red_black input[type=search],
.white_red_black input[type=text],
.white_red_black input[type=tel],
.white_red_black input[type=url],
.white_red_black input[type=password],
.white_red_black textarea, .white_blue_black input[type=email], .white_blue_black input[type=number], .white_blue_black input[type=search], .white_blue_black input[type=text], .white_blue_black input[type=tel], .white_blue_black input[type=url], .white_blue_black input[type=password], .white_blue_black textarea, .white_green_black input[type=email], .white_green_black input[type=number], .white_green_black input[type=search], .white_green_black input[type=text], .white_green_black input[type=tel], .white_green_black input[type=url], .white_green_black input[type=password], .white_green_black textarea, .white_purple_black input[type=email], .white_purple_black input[type=number], .white_purple_black input[type=search], .white_purple_black input[type=text], .white_purple_black input[type=tel], .white_purple_black input[type=url], .white_purple_black input[type=password], .white_purple_black textarea, .white_yellow_black input[type=email], .white_yellow_black input[type=number], .white_yellow_black input[type=search], .white_yellow_black input[type=text], .white_yellow_black input[type=tel], .white_yellow_black input[type=url], .white_yellow_black input[type=password], .white_yellow_black textarea, .white_grey_black input[type=email], .white_grey_black input[type=number], .white_grey_black input[type=search], .white_grey_black input[type=text], .white_grey_black input[type=tel], .white_grey_black input[type=url], .white_grey_black input[type=password], .white_grey_black textarea, .white_steel_black input[type=email], .white_steel_black input[type=number], .white_steel_black input[type=search], .white_steel_black input[type=text], .white_steel_black input[type=tel], .white_steel_black input[type=url], .white_steel_black input[type=password], .white_steel_black textarea, .white_tan_black input[type=email], .white_tan_black input[type=number], .white_tan_black input[type=search], .white_tan_black input[type=text], .white_tan_black input[type=tel], .white_tan_black input[type=url], .white_tan_black input[type=password], .white_tan_black textarea, .white_pink_black input[type=email], .white_pink_black input[type=number], .white_pink_black input[type=search], .white_pink_black input[type=text], .white_pink_black input[type=tel], .white_pink_black input[type=url], .white_pink_black input[type=password], .white_pink_black textarea, .white_alert_black input[type=email], .white_alert_black input[type=number], .white_alert_black input[type=search], .white_alert_black input[type=text], .white_alert_black input[type=tel], .white_alert_black input[type=url], .white_alert_black input[type=password], .white_alert_black textarea,
.white_black_red input[type=email],
.white_black_red input[type=number],
.white_black_red input[type=search],
.white_black_red input[type=text],
.white_black_red input[type=tel],
.white_black_red input[type=url],
.white_black_red input[type=password],
.white_black_red textarea, .white_black_blue input[type=email], .white_black_blue input[type=number], .white_black_blue input[type=search], .white_black_blue input[type=text], .white_black_blue input[type=tel], .white_black_blue input[type=url], .white_black_blue input[type=password], .white_black_blue textarea, .white_black_green input[type=email], .white_black_green input[type=number], .white_black_green input[type=search], .white_black_green input[type=text], .white_black_green input[type=tel], .white_black_green input[type=url], .white_black_green input[type=password], .white_black_green textarea, .white_black_purple input[type=email], .white_black_purple input[type=number], .white_black_purple input[type=search], .white_black_purple input[type=text], .white_black_purple input[type=tel], .white_black_purple input[type=url], .white_black_purple input[type=password], .white_black_purple textarea, .white_black_yellow input[type=email], .white_black_yellow input[type=number], .white_black_yellow input[type=search], .white_black_yellow input[type=text], .white_black_yellow input[type=tel], .white_black_yellow input[type=url], .white_black_yellow input[type=password], .white_black_yellow textarea, .white_black_grey input[type=email], .white_black_grey input[type=number], .white_black_grey input[type=search], .white_black_grey input[type=text], .white_black_grey input[type=tel], .white_black_grey input[type=url], .white_black_grey input[type=password], .white_black_grey textarea, .white_black_steel input[type=email], .white_black_steel input[type=number], .white_black_steel input[type=search], .white_black_steel input[type=text], .white_black_steel input[type=tel], .white_black_steel input[type=url], .white_black_steel input[type=password], .white_black_steel textarea, .white_black_tan input[type=email], .white_black_tan input[type=number], .white_black_tan input[type=search], .white_black_tan input[type=text], .white_black_tan input[type=tel], .white_black_tan input[type=url], .white_black_tan input[type=password], .white_black_tan textarea, .white_black_pink input[type=email], .white_black_pink input[type=number], .white_black_pink input[type=search], .white_black_pink input[type=text], .white_black_pink input[type=tel], .white_black_pink input[type=url], .white_black_pink input[type=password], .white_black_pink textarea, .white_black_alert_black input[type=email], .white_black_alert_black input[type=number], .white_black_alert_black input[type=search], .white_black_alert_black input[type=text], .white_black_alert_black input[type=tel], .white_black_alert_black input[type=url], .white_black_alert_black input[type=password], .white_black_alert_black textarea {
  background: #fff;
}

input[type=checkbox].toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 2.5em;
  height: 1.25em;
  display: inline-block;
  position: relative;
  top: 0.2em;
  margin-right: 0.4em;
  border-radius: 0.6em;
  outline: none;
  border: none;
  cursor: pointer;
  background: var(--background);
  border: solid var(--line) var(--color);
  color: cyan;
}
input[type=checkbox].toggle:before {
  content: " ";
  display: block;
  position: absolute;
  margin: calc(-0.5 * var(--line));
  width: 1.2em;
  height: 1.2em;
  background: var(--color);
  border-radius: 0.6em;
}
input[type=checkbox].toggle:checked {
  background: var(--accent);
}
input[type=checkbox].toggle:checked:before {
  left: 1.25em;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  position: fixed;
  width: 100vw;
  top: 0;
  padding: 0;
  z-index: 200;
  background: var(--background);
}
header > .left, header > .right {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  position: -webkit-sticky;
  position: sticky;
}
header > .left .popup_section, header > .right .popup_section {
  height: auto;
  position: relative;
}
header > .left .popup_section:not(:first-child), header > .right .popup_section:not(:first-child) {
  margin-left: -3vw;
}
header > .left .popup_section label, header > .right .popup_section label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 3vw 0.1em 3vw;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  height: 4em;
  color: var(--accent);
}
header > .left .popup_section label:hover, header > .right .popup_section label:hover {
  background: var(--accent);
  color: var(--background);
}
header > .left .popup_section label.link, header > .right .popup_section label.link {
  cursor: pointer;
}
header > .left .popup_section label.link:hover, header > .right .popup_section label.link:hover {
  background: none;
  color: var(--color);
}
header > .left .popup_section label.link:hover .underline, header > .right .popup_section label.link:hover .underline {
  text-decoration: underline;
  -webkit-text-decoration-style: wavy;
          text-decoration-style: wavy;
}
header > .left .popup_section label.button, header > .left .popup_section label button, header > .right .popup_section label.button, header > .right .popup_section label button {
  padding: 0.7em 1em;
  height: auto;
  background: var(--accent);
  color: var(--background);
  position: relative;
  top: 0.2em;
}
header > .left .popup_section label.button:hover, header > .left .popup_section label button:hover, header > .right .popup_section label.button:hover, header > .right .popup_section label button:hover {
  background: var(--color);
  color: var(--background);
}
header > .left .popup_section .popup_menu, header > .right .popup_section .popup_menu {
  position: relative;
  max-width: 0;
  max-height: 0;
  visibility: hidden;
}
header > .left .popup_section .popup_menu a, header > .right .popup_section .popup_menu a {
  text-decoration: none;
  white-space: nowrap;
  width: auto;
  padding: 0.5vw 0 0.5vw 3vw;
}
header > .left .popup_section .popup_menu a:not(.current):hover, header > .right .popup_section .popup_menu a:not(.current):hover {
  text-decoration: underline;
}
header > .left .popup_section .popup_menu a.current, header > .right .popup_section .popup_menu a.current {
  color: var(--accent);
}
header > .left .popup_section .popup_menu a.current:before, header > .right .popup_section .popup_menu a.current:before {
  content: "→ ";
  color: var(--color);
}
header > .left .popup_section .popup_menu .collapse_header, header > .right .popup_section .popup_menu .collapse_header {
  width: auto;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  padding: 0.5vw 3vw 0.5vw 3vw;
  margin-top: -0.5vw;
  margin-top: 0.5em;
  cursor: pointer;
}
header > .left .popup_section .popup_menu .collapse_header:hover, header > .right .popup_section .popup_menu .collapse_header:hover {
  color: var(--accent);
}
header > .left .popup_section input, header > .right .popup_section input {
  display: none;
  position: absolute;
}
header > .left .popup_section input:checked ~ .popup_menu, header > .right .popup_section input:checked ~ .popup_menu {
  max-height: 60vh;
  visibility: visible;
  margin-bottom: 0.666vw;
}
header > .left #header_home .on_hover, header > .left #header_theme .on_hover, header > .left #header_try .on_hover, header > .left #header_buy .on_hover, header > .left #sections .on_hover, header > .right #header_home .on_hover, header > .right #header_theme .on_hover, header > .right #header_try .on_hover, header > .right #header_buy .on_hover, header > .right #sections .on_hover {
  display: none;
}
header > .left #header_home:hover .on_hover, header > .left #header_theme:hover .on_hover, header > .left #header_try:hover .on_hover, header > .left #header_buy:hover .on_hover, header > .left #sections:hover .on_hover, header > .right #header_home:hover .on_hover, header > .right #header_theme:hover .on_hover, header > .right #header_try:hover .on_hover, header > .right #header_buy:hover .on_hover, header > .right #sections:hover .on_hover {
  display: inline;
}
header > .left #sections .empty:hover:before, header > .right #sections .empty:hover:before {
  display: inline-block;
  position: relative;
  content: "Sections";
}
header > .left #header_cart .cart_count, header > .right #header_cart .cart_count {
  font-size: 1.3em;
  position: relative;
  top: 0.05em;
}
header > .left #header_cart:hover .cart_count, header > .right #header_cart:hover .cart_count {
  color: var(--accent);
}
header > .left #header_cart.empty, header > .right #header_cart.empty {
  display: none;
}
header > .left #sub_sections, header > .right #sub_sections {
  display: none;
}
header .fontlink {
  white-space: nowrap;
}
header .fontlink a {
  padding-right: 0;
}
header .fontlink a.buyit {
  display: none;
  padding-left: 0.25em !important;
  color: var(--text) !important;
  font-size: 0.82em;
  font-style: italic;
}
header .fontlink:hover .buyit {
  display: inline;
}
header .chunk {
  margin-bottom: 0.8em;
}

#okay_footer_logo {
  display: inline-block;
  height: auto;
  padding: 0;
  margin: 0.2em 0 0 -0.25em;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#okay_footer_logo span {
  margin: 0 auto 0 auto;
  font-family: "Okay FLAT", "Brush Script MT", cursive;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "calt" 1;
  font-size: clamp(1em, 10vw, 5em);
  line-height: 1;
  color: var(--ko);
  white-space: nowrap;
  position: relative;
  transition: font-weight 0.3s;
}
#okay_footer_logo span:after {
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 1em;
  width: 1em;
  background: var(--color);
  border-radius: 100%;
}
#okay_footer_logo a {
  position: absolute;
  font-size: clamp(1em, 10vw, 5em);
  height: 1em;
  width: 1em;
  z-index: 2;
}
#okay_footer_logo a:hover {
  text-decoration: none;
}
#okay_footer_logo a:hover ~ span {
  font-weight: 275;
}
#okay_footer_logo a:active ~ span {
  font-weight: 100;
}

@supports font-tech(color-COLRv1) {
  #okay_footer_logo span {
    font-family: "Okay COLRv0", "Brush Script MT", cursive;
  }
  #okay_footer_logo span:after {
    display: none;
  }
  .white_on_red #okay_footer_logo span {
    font-palette: --ok-black-on-white;
  }
  .black_on_red #okay_footer_logo span {
    font-palette: --ok-white-on-black;
  }
  .red_on_white #okay_footer_logo span {
    font-palette: --ok-black-on-red;
  }
  .black_on_white #okay_footer_logo span {
    font-palette: --ok-red-on-black;
  }
  .red_on_black #okay_footer_logo span {
    font-palette: --ok-white-on-red;
  }
  .white_on_black #okay_footer_logo span {
    font-palette: --ok-red-on-white;
  }
}
@media (max-width: 1000px) {
  footer .columns {
    -moz-column-gap: 1vw;
         column-gap: 1vw;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 600px) {
  footer .columns {
    -moz-column-gap: 1vw;
         column-gap: 1vw;
    grid-template-columns: 0.75fr 1fr 1fr 1fr;
  }
  footer .columns .admin {
    display: none;
  }
}

footer {
  display: block;
  position: relative;
  z-index: 200;
  height: calc(50vh + var(--header-offset));
  padding-bottom: 1em;
  margin-bottom: -1em;
  overflow: visible;
}
footer .columns {
  display: grid;
  -moz-column-gap: 2vw;
       column-gap: 2vw;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  height: 50vh;
}
footer .columns > div {
  height: auto;
}
footer .columns .mute {
  opacity: 0.3;
}
footer .columns .logo {
  height: 100%;
}
footer #legal_footer {
  color: var(--accent);
  margin-top: 2em;
  position: absolute;
  right: 2.5vw;
  bottom: 2em;
}
footer #legal_footer .to_bottom {
  white-space: nowrap;
}
footer a {
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
footer a.active {
  color: var(--color);
}
footer p {
  color: var(--accent);
}
footer a.cycle_colors {
  cursor: pointer;
  margin: 0 0.1em;
}
footer a.cycle_colors:hover {
  text-decoration: none;
}
footer a.depreciated {
  opacity: 0.3;
}

#feedback {
  position: fixed;
  font-size: 0.82em;
  bottom: 0;
  right: 0;
  padding: 0.4em 0.65em;
  z-index: 1234;
  background: #171616;
  color: #f32;
  max-width: 20em;
}
#feedback .more {
  display: none;
}
#feedback:hover .more {
  display: inline;
}
#feedback:hover {
  padding-bottom: 1.5em;
}
#feedback a:hover {
  color: #f0f0f0;
}

@font-face {
  font-family: "Okay";
  src: url("/https/okaytype.com/woffs/Okay-VF/Okay-VF-Roman-1v3.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-stretch: 60% 100%;
}
@font-face {
  font-family: "Okay";
  src: url("/https/okaytype.com/woffs/Okay-VF/Okay-VF-Italic-1v3.woff2") format("woff2");
  font-style: italic;
  font-weight: 900;
  font-stretch: 60% 100%;
}
.okay, .okay * {
  font-family: "Okay";
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  --vf-XTND: 40;
  font-variation-settings: "XTND" var(--vf-XTND);
  --ot-kern: 1;
  --ot-liga: 1;
  --ot-calt: 1;
  --ot-c2sc: 0;
  --ot-case: 0;
  --ot-lnum: 0;
  --ot-numr: 0;
  --ot-dnom: 0;
  --ot-frac: 0;
  --ot-subs: 0;
  --ot-sups: 0;
  --ot-ss01: 0;
  --ot-ss03: 0;
  font-feature-settings: "kern" var(--ot-kern), "liga" var(--ot-liga), "calt" var(--ot-calt), "c2sc" var(--ot-c2sc), "case" var(--ot-case), "lnum" var(--ot-lnum), "numr" var(--ot-numr), "dnom" var(--ot-dnom), "frac" var(--ot-frac), "subs" var(--ot-subs), "sups" var(--ot-sups), "ss01" var(--ot-ss01), "ss03" var(--ot-ss03);
}
.okay.ss02, .okay .ss02, .okay *.ss02, .okay * .ss02 {
  --vf-XTND: 0;
}

.okay.italic, .okay.italic * {
  font-style: italic;
}

.okay.black, .okay.black * {
  font-stretch: 100%;
}

.okay.narrow, .okay.narrow * {
  font-stretch: 80%;
}

.okay.condensed, .okay.condensed * {
  font-stretch: 60%;
}

@font-face {
  font-family: "Alright";
  src: url("/https/okaytype.com/woffs/Alright-VF/Alright-VF-Roman.woff2") format("woff2");
  font-weight: 250 900;
  font-stretch: 60% 100%;
  font-style: normal;
}
@font-face {
  font-family: "Alright";
  src: url("/https/okaytype.com/woffs/Alright-VF/Alright-VF-Italic.woff2") format("woff2");
  font-weight: 250 900;
  font-stretch: 60% 100%;
  font-style: italic;
}
.alright, .alright * {
  font-family: "Alright";
  font-style: normal;
  --ot-kern: 1;
  --ot-liga: 1;
  --ot-calt: 1;
  --ot-c2sc: 0;
  --ot-smcp: 0;
  --ot-case: 0;
  --ot-lnum: 0;
  --ot-tnum: 0;
  --ot-frac: 0;
  --ot-subs: 0;
  --ot-sups: 0;
  --ot-ss01: 0;
  --ot-ss02: 0;
  font-feature-settings: "kern" var(--ot-kern), "liga" var(--ot-liga), "calt" var(--ot-calt), "c2sc" var(--ot-c2sc), "smcp" var(--ot-smcp), "case" var(--ot-case), "lnum" var(--ot-lnum), "tnum" var(--ot-tnum), "frac" var(--ot-frac), "subs" var(--ot-subs), "sups" var(--ot-sups), "ss01" var(--ot-ss01), "ss02" var(--ot-ss02);
}

.alright.italic, .alright.italic * {
  font-style: italic;
}

.alright.normal, .alright.normal * {
  font-stretch: 100%;
}

.alright.narrow, .alright.narrow * {
  font-stretch: 90%;
}

.alright.condensed, .alright.condensed * {
  font-stretch: 75%;
}

.alright.compressed, .alright.compressed * {
  font-stretch: 60%;
}

.alright.exthin, .alright.exthin * {
  font-weight: 250;
}

.alright.thin, .alright.thin * {
  font-weight: 300;
}

.alright.light, .alright.light * {
  font-weight: 350;
}

.alright.regular, .alright.regular * {
  font-weight: 400;
}

.alright.medium, .alright.medium * {
  font-weight: 500;
}

.alright.bold, .alright.bold * {
  font-weight: 700;
}

.alright.black, .alright.black * {
  font-weight: 800;
}

.alright.ultra, .alright.ultra * {
  font-weight: 900;
}

@font-face {
  font-family: "Harriet";
  src: url("/https/okaytype.com/woffs/Harriet-VF/Harriet-VF-2v2-Roman.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
}
@font-face {
  font-family: "Harriet";
  src: url("/https/okaytype.com/woffs/Harriet-VF/Harriet-VF-2v2-Italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
}
.harriet, .harriet * {
  font-family: "Harriet";
  font-variation-settings: "opsz" var(--vf-opsz);
  --ot-kern: 1;
  --ot-liga: 1;
  --ot-dlig: 0;
  --ot-calt: 1;
  --ot-c2sc: 0;
  --ot-smcp: 0;
  --ot-case: 0;
  --ot-lnum: 0;
  --ot-tnum: 0;
  --ot-ordn: 0;
  --ot-numr: 0;
  --ot-dnom: 0;
  --ot-sinf: 0;
  --ot-frac: 0;
  --ot-subs: 0;
  --ot-sups: 0;
  --ot-ss01: 0;
  --ot-ss02: 0;
  --ot-ss03: 0;
  --ot-ss04: 0;
  font-feature-settings: "kern" var(--ot-kern), "liga" var(--ot-liga), "dlig" var(--ot-dlig), "calt" var(--ot-calt), "c2sc" var(--ot-c2sc), "smcp" var(--ot-smcp), "case" var(--ot-case), "lnum" var(--ot-lnum), "tnum" var(--ot-tnum), "ordn" var(--ot-ordn), "numr" var(--ot-numr), "dnom" var(--ot-dnom), "sinf" var(--ot-sinf), "frac" var(--ot-frac), "subs" var(--ot-subs), "sups" var(--ot-sups), "ss01" var(--ot-ss01), "ss02" var(--ot-ss02), "ss03" var(--ot-ss03), "ss04" var(--ot-ss04);
}

.harriet.italic, .harriet.italic * {
  font-style: italic;
}

.harriet.display, .harriet.display * {
  --vf-opsz: 42;
}

.harriet.text, .harriet.text * {
  --vf-opsz: 6;
}

.harriet.black, .harriet.black * {
  font-weight: 800;
}

.harriet.bold, .harriet.bold * {
  font-weight: 700;
}

.harriet.medium, .harriet.medium * {
  font-weight: 600;
}

.harriet.regular, .harriet.regular * {
  font-weight: 400;
}

.harriet.light, .harriet.light * {
  font-weight: 300;
}

.harriet.thin, .harriet.thin * {
  font-weight: 200;
}

@font-face {
  font-family: "Harry Slab Black";
  src: url("/https/okaytype.com/woffs/Harry/HarrySlabv16-Black.otf");
}
@font-face {
  font-family: "Harry Slab Bold";
  src: url("/https/okaytype.com/woffs/Harry/HarrySlabv16-Bold.otf");
}
@font-face {
  font-family: "Harry Slab Medium";
  src: url("/https/okaytype.com/woffs/Harry/HarrySlabv16-Medium.otf");
}
@font-face {
  font-family: "Harry Slab Regular";
  src: url("/https/okaytype.com/woffs/Harry/HarrySlabv16-Regular.otf");
}
@font-face {
  font-family: "Harry Slab Light";
  src: url("/https/okaytype.com/woffs/Harry/HarrySlabv16-Light.otf");
}
@font-face {
  font-family: "Harry Slab Thin";
  src: url("/https/okaytype.com/woffs/Harry/HarrySlabv16-Thin.otf");
}
@font-face {
  font-family: "Harry Slab ExThin";
  src: url("/https/okaytype.com/woffs/Harry/HarrySlabv16-ExThin.otf");
}
.harry-k {
  font-family: "Harry Slab Black";
}

.harry-b {
  font-family: "Harry Slab Bold";
}

.harry-m {
  font-family: "Harry Slab Medium";
}

.harry-r {
  font-family: "Harry Slab Regular";
}

.harry-l {
  font-family: "Harry Slab Light";
}

.harry-t {
  font-family: "Harry Slab Thin";
}

.harry-x {
  font-family: "Harry Slab ExThin";
}

.nowrap {
  white-space: nowrap;
}

.kern {
  --ot-kern: 1;
}

.liga {
  --ot-liga: 1;
}

.no-liga {
  --ot-liga: 0 !important;
}

.dlig {
  --ot-dlig: 1;
}

.calt {
  --ot-calt: 1;
}

.c2sc {
  --ot-c2sc: 1;
}

.smcp {
  --ot-smcp: 1;
}

.case {
  --ot-case: 1;
  text-transform: uppercase;
}

.lnum {
  --ot-lnum: 1;
}

.tnum {
  --ot-tnum: 1;
}

.ordn {
  --ot-ordn: 1;
}

.numr {
  --ot-numr: 1;
}

.dnom {
  --ot-dnom: 1;
}

.sinf {
  --ot-sinf: 1;
}

.frac {
  --ot-frac: 1;
}

.subs {
  --ot-subs: 1;
}

.sups {
  --ot-sups: 1;
}

.ss01 {
  --ot-ss01: 1;
}

.ss02 {
  --ot-ss02: 1;
}

.ss03 {
  --ot-ss03: 1;
}

.ss04 {
  --ot-ss04: 1;
}

.ss05 {
  --ot-ss05: 1;
}

.ss06 {
  --ot-ss06: 1;
}

.ss07 {
  --ot-ss07: 1;
}

.ss08 {
  --ot-ss08: 1;
}

.no-liga {
  --ot-liga: 0 !important;
}

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