:root {
  --padding-unit: 1rem;
  --offwhite-1: hsla(0, 0%, 95%, 1);
  --offwhite-2: hsla(0, 0%, 85%, 1);
  --accent: hsl(221, 100%, 50%);
  --accent-on-dark: hsla(211, 100%, 65%, 1); }

* {
  box-sizing: border-box; }

html {
  font-family: 'recursive-subset','Recursive', sans-serif;
  line-height: 1.75;
  background: black;
  font-size: 12px; }
  @media (min-width: 600px) {
    html {
      font-size: 14px;
      line-height: 1.5; } }

body {
  margin: 0; }

.central-column {
  max-width: 1600px;
  margin: 0 auto; }
  @media (max-width: 500px) {
    .central-column {
      margin: 0; } }

@media (max-width: 500px) {
  .hidden--sm {
    display: none !important; } }

#singleFile {
  color: #454545; }
  #singleFile .ccs-row {
    display: grid;
    grid-template-columns: 196px 196px auto;
    column-gap: 1rem; }
    @media (max-width: 500px) {
      #singleFile .ccs-row {
        grid-template-columns: calc(50vw - var(--padding-unit)) calc(50vw - var(--padding-unit));
        column-gap: 0; } }
  #singleFile #controls-result {
    background: white;
    color: black;
    font-size: 16vw;
    font-weight: 800;
    line-height: 1.125;
    border: 0px;
    min-height: 44vh;
    font-weight: 800;
    font-family: 'recursive-subset','Recursive', sans-serif;
    --prop: "PROP" 0;
    --xprn: "XPRN" 0;
    --slnt: "slnt" 0;
    --ital: "ital" 0.5;
    font-variation-settings: "PROP" 0, "XPRN" 0, "slnt" 0, "ital" 0, "wght" 800;
    text-align: left;
    width: 100%;
    padding: 0 calc(var(--padding-unit) * 2 * 0.9);
    padding-right: 0;
    margin: 0;
    border-radius: 0;
    display: grid;
    align-content: center;
    overflow-x: auto;
    max-width: 100vw; }
    @media (max-width: 500px) {
      #singleFile #controls-result {
        padding: calc(var(--padding-unit) * 0.9);
        padding-right: 0; } }
  #singleFile input[type="text"]:focus {
    outline: none; }
  #singleFile input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent; }
  #singleFile input[type="range"]:focus {
    outline: none; }
  #singleFile input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    position: relative;
    top: -0.25rem;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: #bdbdbd;
    border-radius: 0px;
    border: 0.1px solid rgba(0, 0, 0, 0); }
  #singleFile input[type="range"]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    border: 0px solid rgba(0, 0, 0, 0);
    height: 12px;
    width: 12px;
    border-radius: 999px;
    background: #858585;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5.6px; }
  #singleFile input[type="range"]:focus::-webkit-slider-runnable-track {
    background: #cacaca; }
  #singleFile input[type="range"]::-moz-range-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    background: #bdbdbd;
    border-radius: 0px;
    border: 0.1px solid rgba(0, 0, 0, 0); }
  #singleFile input[type="range"]::-moz-range-thumb {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    border: 0px solid rgba(0, 0, 0, 0);
    height: 12px;
    width: 12px;
    border-radius: 999px;
    background: #858585;
    cursor: pointer; }
  #singleFile input[type="range"]::-ms-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent; }
  #singleFile input[type="range"]::-ms-fill-lower {
    background: #b0b0b0;
    border: 0.1px solid rgba(0, 0, 0, 0);
    border-radius: 0px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }
  #singleFile input[type="range"]::-ms-fill-upper {
    background: #bdbdbd;
    border: 0.1px solid rgba(0, 0, 0, 0);
    border-radius: 0px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }
  #singleFile input[type="range"]::-ms-thumb {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    border: 0px solid rgba(0, 0, 0, 0);
    height: 12px;
    width: 12px;
    border-radius: 999px;
    background: #858585;
    cursor: pointer;
    height: 1px; }
  @media (max-width: 500px) {
    #singleFile input[type="range"]::-webkit-slider-thumb {
      height: 20px;
      width: 20px;
      box-sizing: content-box;
      position: relative;
      top: -4px; }
    #singleFile input[type="range"]::-moz-range-thumb {
      height: 20px;
      width: 20px;
      box-sizing: content-box;
      position: relative;
      top: -4px; }
    #singleFile input[type="range"]::-ms-thumb {
      height: 20px;
      width: 20px;
      box-sizing: content-box;
      position: relative;
      top: -4px; } }
  #singleFile input[type="range"]:focus::-ms-fill-lower {
    background: #bdbdbd; }
  #singleFile input[type="range"]:focus::-ms-fill-upper {
    background: #cacaca; }
  #singleFile .controls {
    background-color: var(--offwhite-1);
    width: 100%;
    font-family: "Recursive", monospace;
    font-weight: 450;
    padding: calc(var(--padding-unit) *2);
    display: grid; }
    @media (max-width: 500px) {
      #singleFile .controls {
        padding: var(--padding-unit); } }
    #singleFile .controls .css,
    #singleFile .controls .inputs {
      display: inline-block; }
    #singleFile .controls .inputs {
      width: 100%; }
      @media (max-width: 500px) {
        #singleFile .controls .inputs {
          width: 100%;
          max-width: none;
          top: -0.25rem;
          position: relative; } }
    #singleFile .controls .radio {
      border: 1px solid #bdbdbd;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      display: inline-block;
      cursor: pointer; }
      @media (max-width: 500px) {
        #singleFile .controls .radio {
          width: 20px;
          height: 20px;
          position: relative;
          top: 6px; } }
    #singleFile .controls .radio.active {
      background-color: #bdbdbd; }
    #singleFile .controls ul {
      list-style-type: none;
      padding: 0;
      width: 100%; }
    #singleFile .controls li {
      display: block; }
      @media (max-width: 500px) {
        #singleFile .controls li {
          margin: 1rem 0;
          display: grid;
          grid-template-columns: 45% 55%; } }
    #singleFile .controls .property {
      color: #c2404c; }
    #singleFile .controls .custom-prop {
      color: #1fa87a; }
    #singleFile .controls .value {
      color: #494949; }
    #singleFile .controls .string {
      color: #0050ff; }
    #singleFile .controls span.comment {
      font-variation-settings: "slnt" -12, "ital" 1;
      color: #858585; }
      @media (max-width: 1150px) {
        #singleFile .controls span.comment {
          display: none; } }

.footer {
  background: black;
  color: white;
  padding: var(--padding-unit);
  padding-bottom: 4rem; }
  .footer .central-column {
    display: grid; }
    @media (min-width: 800px) {
      .footer .central-column {
        grid-template-columns: 1fr 1fr; } }
  @media (min-width: 800px) {
    .footer {
      padding: calc(var(--padding-unit) *2); }
      .footer .description {
        grid-column: 2/3; } }
  .footer h1, .footer h4 {
    font-size: 1rem;
    margin: 1rem 0; }
  .footer h1, .footer h1 a {
    font-variation-settings: "XPRN" 0, "wght" 800, "slnt" 0, "ital" 0; }
  .footer h4 {
    font-variation-settings: "XPRN" 1, "wght" 800, "slnt" 0, "ital" 0; }
  .footer .credits {
    max-width: 40ch; }
    .footer .credits a {
      color: white; }
  .footer .description {
    color: var(--offwhite-2); }
  .footer .credits h1, .footer .description h4 {
    margin-top: 0; }
  .footer a {
    color: var(--accent-on-dark);
    font-variation-settings: "XPRN" 0, "wght" 450, "slnt" 0, "ital" 0;
    transition: 0.25s; }
    .footer a:hover {
      font-variation-settings: "XPRN" 1, "wght" 800, "slnt" -15, "ital" 0; }
  .footer p {
    max-width: 60ch; }

@font-face {
  font-family: "Recursive";
  font-weight: 300 900;
  src: url("../fonts/recursive-prop_xprn_weight_slnt_ital--2019_08_26.woff2"); }
@font-face {
  font-family: "recursive-subset";
  font-weight: 300 900;
  src: url("../fonts/recursive-prop_xprn_weight_slnt_ital--2019_08_26--subset-0020_007F.woff2"); }