:root{
  --z0:rgb(22, 22, 27);
  --z1:rgb(35, 35, 42);
  --z2:rgb(49, 49, 58);
  --z3:rgb(64, 64, 75);
  --z4:rgb(79, 79, 92);
  --z5:rgb(95, 95, 110);
  --z6:rgb(111, 111, 128);
  --z7:rgb(128, 128, 147);
  --z8:rgb(128, 128, 147);
  --z9:rgb(144, 144, 162);
  --z10:rgb(160, 160, 176);
  --z11:rgb(176, 176, 192);
  --z12:rgb(193, 193, 207);
  --z13:rgb(210, 210, 222);
  --z14:rgb(227, 227, 238);
  --z15:rgb(244, 244, 254);
  --a0:rgb(24, 32, 40);
  --a1:rgb(34, 52, 68);
  --a2:rgb(42, 74, 97);
  --a3:rgb(47, 98, 127);
  --a4:rgb(49, 122, 159);
  --a5:rgb(48, 148, 191);
  --a6:rgb(40, 174, 223);
  --a7:rgb(14, 202, 255);
  --a8:rgb(14, 202, 255);
  --a9:rgb(89, 209, 254);
  --a10:rgb(126, 216, 254);
  --a11:rgb(155, 223, 253);
  --a12:rgb(181, 230, 253);
  --a13:rgb(205, 237, 252);
  --a14:rgb(228, 243, 251);
  --a15:rgb(250, 250, 250);

  --transition-duration: 350ms;
  --serif: Georgia, Times, serif;
  --sans-serif: "Lucida Sans", "Lucida Grande", sans-serif;
}

.inverted {
  --z15:rgb(22, 22, 27);
  --z14:rgb(35, 35, 42);
  --z13:rgb(49, 49, 58);
  --z12:rgb(64, 64, 75);
  --z11:rgb(79, 79, 92);
  --z10:rgb(95, 95, 110);
  --z9:rgb(111, 111, 128);
  --z8:rgb(128, 128, 147);
  --z7:rgb(128, 128, 147);
  --z6:rgb(144, 144, 162);
  --z5:rgb(160, 160, 176);
  --z4:rgb(176, 176, 192);
  --z3:rgb(193, 193, 207);
  --z2:rgb(210, 210, 222);
  --z1:rgb(227, 227, 238);
  --z0:rgb(244, 244, 254);
  --a15:rgb(24, 32, 40);
  --a14:rgb(34, 52, 68);
  --a13:rgb(42, 74, 97);
  --a12:rgb(47, 98, 127);
  --a11:rgb(49, 122, 159);
  --a10:rgb(48, 148, 191);
  --a9:rgb(40, 174, 223);
  --a8:rgb(14, 202, 255);
  --a7:rgb(14, 202, 255);
  --a6:rgb(89, 209, 254);
  --a5:rgb(126, 216, 254);
  --a4:rgb(155, 223, 253);
  --a3:rgb(181, 230, 253);
  --a2:rgb(205, 237, 252);
  --a1:rgb(240, 250, 251);
  --a0:rgb(250, 250, 250);
  --header-height: 72px;
}

html, body {
    overflow: hidden;
    height: 100%;
    width: 100%;
    user-select: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}

body {
  background: var(--z2);
  font: 16px/150% var(--serif);
  color: var(--z15); 
  padding: 0;
  margin: 0;
  touch-action: none;
  -webkit-font-smoothing: antialiased;
  lements a similar property, but with different values: 
}

* {
  box-sizing: border-box;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 -webkit-touch-callout: none;
-webkit-user-select: none; 
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 64px;
}

a, a:link {
  color: var(--z13)
}
a:hover {
  color: var(--z15);
}
a:active { color: white; }

#container {
  
}

.no-transition {
  transition: none !important;
}

.limit {
  top: 40%;
  left: 50%;
  transition: all var(--transition-duration) ease;
  position: absolute;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3ODYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMzQTNBNDUiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM0NDQ0NEUiIG9mZnNldD0iMC4xIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzQ0NDQ0RSIgb2Zmc2V0PSIwLjkiLz48c3RvcCBzdG9wLWNvbG9yPSIjM0EzQTQ1IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNzg2KSIgLz4KPC9zdmc+);
  width: 1px; 
}

#instructions {
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAVdEVYdENyZWF0aW9uIFRpbWUAOS8zMC8xMaVLHJ4AAAC4SURBVCiRjdLBTQNBDIXhbyLuUEI6CIe9QweECggdhApICXRASlg6gLsPWwJ0ECpwLrPSKsyueCfLz/+TPRoiTyKPIrf+ocyUmYrInPR/0aPXlX4OxB9wqmbICK7qQEvXeMJe5O7SvMKAuwb4oSuzd6/mDKwXvEVwI/KwBA61/sHLhf/aum8ET7U+6MobHmvIqHeRvcib1qpfunKE+vS3eJ4EPGCYfpIico9PXRm0FLnGFvc18Bu7M5/kRFxXO9zAAAAAAElFTkSuQmCC) top left no-repeat;
  padding: 0 20px;
  color: var(--a7);
  font-size: 15px;
  position: absolute;
  bottom: -35px;
  margin-left: -140px;
  left: 50%; 
}

#instructions span {
  padding: 0 5px; 
}

.string {
  font-family: var(--sans-serif);
  display: none;
  font-size: 15px;
  line-height: 150%;
  position: absolute;
  left: 50%;
  margin-top: 275px;
  color: var(--z14); 
}

.string strong, .string th {
  color: var(--z15); 
}

.string h1 {
  display: none; 
}

.string table th, .string table td {
  text-align: left;
  padding: 5px 10px 5px 0;
  font-weight: normal; 
}

#boundries {
  position: absolute;
  border-top: solid var(--z4) 1px;
  border-bottom: solid var(--z4) 1px;
  left: 0;
  right: 0;
  top: 40%;
  overflow: hidden;
  transition: height 500ms ease; 
}

#boundries #xheight {
  position: absolute;
  border-top: solid var(--z4) 1px;
  border-bottom: solid var(--z4) 1px;
  left: 0;
  right: 0; 
}

#actions {
  position: absolute;
  bottom: 0;
  right: 64px;
  left: 64px;
}

#actions .pop {
  position: absolute;
  right: 100px;
  line-height: 140%;
  width: 350px;
  bottom: -20px;
  background-color: var(--a7);
  padding: 20px;
  color: var(--z2);
  text-align: left;
  font-size: 14px;
  font-family: var(--sans-serif); 
}
#actions .pop p {
  bottom: -45px;
  font-size: 13px;
  color: var(--z9);
  display: block;
  position: absolute; 
}

#actions .pop p a {
  color: var(--a7); 
}

#actions .pop:after {
  content: "";
  left: -20px;
  top: 40%;
  width: 0;
  height: 0;
  border: solid transparent 10px;
  border-right-color: var(--a7);
  position: absolute;
  display: block; 
}

#popup {
  display: none;
  opacity: 0;
  height: 0;
  width: 0;
  width: 500px;
  height: 160px;
  overflow: hidden;
  transition: transform 500ms ease, opacity 500ms ease;
  transform: scale(1.5, 1.5);
  color: var(--z9);
  font: 15px/140% var(--sans-serif);
  padding: 22px;
  background: black;
  z-index: 10;
  position: absolute;
  top: -200%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px; 
}
  
#poppermalink { display: none; }
#poppermalink p { font-size: 13px; }
#poppermalink a.preview { 
  font-size: 13px;
  line-height: 160%; 
}

#permalink {
  font: 20px/130% var(--serif); 
}

#popup form {
  display: block;
  position: relative; 
}

#popup input[type=text] {
  -webkit-appearance: none;
  width: 300px;
  font-size: 22px;
  padding: 0 10px;
  border-radius: 5px;
  height: 40px;
  box-shadow: inset 0 2px 5px #cccccc;
  line-height: 40px; 
}
  
#popup input[type=submit] {
  font-size: 22px;
  padding: 3px 10px;
  height: 47px;
  line-height: 40px;
  margin-left: 10px;
  border-radius: 5px;
}

#popup a {
  color: var(--a7); 
}
  
#popup a#close {
  position: absolute;
  top: 7px;
  right: 10px;
  display: block;
  font-size: 12px;
}

#popup h1 {
  margin: 0;
  font: bold 26px/140% Arial, sans-serif;
  color: var(--z14); 
}
  
#popup textarea {
  border: solid var(--z2) 1px;
  background: var(--z4);
  height: 180px;
  display: block;
  padding: 10px;
  width: 380px;
  font-family: monospace;
}

#commander {
  opacity: 0;
  margin-top: -100px;
  }

.touch footer {
  display: none; 
}

.touch body {
  -webkit-user-select: none;
  user-select: none; 
}

.no-svg #sorry {
  display: block; 
}

body .hidden {
  display: none;
}

#better {
  display: none;
  position: relative;
  top: 40px;
  font-size: 13px;
  cursor: pointer;
  z-index: 9;
  line-height: 140%;
  color: var(--z9);
}

#better a { color: var(--a7); }


@media (max-width: 760px) {
  .container {
    padding: 0 32px;
  }

  .desk-only {
    display: none;
  }

}

@media (min-width: 760px) {
  .mobile-only {
    display: none;
  }
}