@font-face {
            font-family: 'anonymous_proregular';
            src: url('../fonts/anonymous_pro-webfont.woff2') format('woff2'),
                 url('../fonts/anonymous_pro-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        ::-moz-selection {
            background: transparent;
        }

        ::selection {
            background: transparent;
        }

        * {*
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }


        body {
            width:100%;
            margin: 0;
            color: #333;
            font-size: 20px;
            font-family: 'anonymous_proregular', monospace;
            transition: all .2s linear;
        }
        body.dark {
            background: #333;
            color: #f0f0f0;
        }
        header {
            width: 100%;
            margin:0 auto;
            padding: 5% 10%;
            box-sizing: border-box;
            display:flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: wrap;
            justify-content:left;
            align-content:flex-start;
            font-family: 'Work Sans', 'anonymous_proregular';
            font-weight: 300;
            position: relative;
        }
        .byline {
            width: 100%;
            padding: 10px;
            text-align: right;
            font-size: 14px;
            color: #888;
            font-weight: 400;
            letter-spacing: 1px;
            text-transform: uppercase;
            box-sizing: border-box;
            font-family: 'Work Sans', 'anonymous_proregular';
        }

        header .box {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: 50%;
            text-align: left;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header .box.title {
            order: 1;
        }
        header .box.switches {
            position: relative;
            text-align: right;
            order: 2;
        }
        .box.switches span {
            position: relative;
            display: inline-block;
        }

        .box.switches span.sort:before {
            content: '';
            background: rgba(127, 127,127, 0.25);
            display: inline-block;
            width:154px;
            height:1px;
            position: absolute;
            top: 61px;
            right: 38px;

        }
        .box.switches span.sort:after {
            content: 'SORT';
            display: inline-block;
            width:154px;
            height:1px;
            text-align: center;
            position: absolute;
            letter-spacing: 3px;
            font-size: 11px;
            color: rgba(127, 127,127, 1);
            top: 83px;
            right: 35px;
        }
        .box.switches span.sort .switch:before {
            content: '';
            border-left: 1px solid rgba(127, 127,127, 0.25);
            display: inline-block;
            width:0;
            height:15px;
            position: absolute;
            top: 40px;
            right: 50%;
        }
        .box.switches span.sort .switch:nth-child(2):before {
            content: '';
            border-left: 1px solid rgba(127, 127,127, 0.25);
            display: inline-block;
            width:0;
            height:30px;
            position: absolute;
            top: 40px;
            right: 50%;
        }

        header .box.paragraph {
            flex-basis: 50%;
            order: 3;
            letter-spacing: 1px;
            font-weight: 400;
            line-height: 1.4;
            color: #888;
            font-size: 15px;
            padding: 20px 0 0;
        }
        header .box.paragraph i {
            padding: 3px 6px;
            background: rgba(250, 202, 222, 0.5);
            color: #333;
            letter-spacing: 2px;
            font-size: 10px;
            font-style: normal;
            position: relative;
            top: -2px;
            border-radius: 2px;
        }
        a {
            color: #7ea5e5;
            border-bottom: 1px solid #7ea5e5;
            text-decoration: none;
        }
        h1 {
            font-family: 'Work Sans', monospace;
            font-size: 34px;
            line-height: 0;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 300;
            white-space: nowrap;
            color: rgba(51, 51, 51, 0.5);
            position: relative;
            top: 3px;
        }
        h1 coffee {
            color: rgba(51, 51, 51, 0.5);
            background: #C0FFEE;
            padding: 10px 14px;
            border-radius: 3px;
        }

        .wrap {
            width: 100%;
            margin:0 auto;
            padding:0;
            display:flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content:center;
            align-content:flex-start;
        }
        .flexer {
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: 15%;
            background: #f8f8f8;
            text-align: center;
            margin: 0;
            padding: 30px;
            overflow: hidden;
            height: 150px;
            line-height: 150px;
            text-transform: uppercase;
            transition: background 200ms linear;
            letter-spacing: 1px;
            border-top: 1px solid transparent;
            border-left: 1px solid transparent;
            position: relative;
        }
        .flexer.off {
          display: none;
        }
        .flexer:after {
            content: 'copied\Ato clipboard';
            position: absolute;
            white-space: pre;
            line-height: 1.4;
            bottom: 20px;
            width: 80%;
            left: 10%;
            display: block;
            font-size: 12px;
            opacity: .65;
            font-family: 'Work Sans', 'anonymous_proregular', monospace;
            padding: 5px 10px;
            border: 1px solid rgba(51, 51, 51, 0.15);
            color: #333;
            border-radius: 2px;
            box-sizing: border-box;
            transition: all .25s linear;
            opacity: 0;
            pointer-events: none;
        }
        .flexer.dark:after {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.15);
        }
        .flexer.copied:after {
            opacity: 1;
        }
        .flexer input {
            display: inline-block;
            position: relative;
            background: transparent;
            border: none;
            outline: none;
            font-family: 'anonymous_proregular', monospace;
            text-align: center;
            height: 150px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 18px;
            color: #333;
            width: 70px;
            pointer-events: none;

        }
        .flexer input.three {
            width: 38px;
        }
        .flexer span {
            position: relative;
            display: inline-block;
        }

        .flexer:hover span:before {
            content:'#';
            position: absolute;
            left:-12px;
            top:-2px;
            font-size: 24px;
            opacity: 1;
        }
        .flexer.light span,
        .flexer.light input {
            color: #333;
        }
        .flexer.dark span,
        .flexer.dark input {
            color: #f0f0f0;
        }
        .switch, .share {
          border: 1px solid #ccc;
          padding: 7px 14px;
          border-radius: 3px;
          text-transform: uppercase;
          letter-spacing: 3px;
          font-size: 13px;
          margin: 6px 6px 0 0;
          cursor: pointer;
          transition: all .25s linear;
          position: relative;
          display: inline-block;
        }
        .share {
          border-color: #5E77EE;
          color: #5E77EE;
          font-weight: 500;
        }
        .switch.bg {
          border-radius: 50%;
          width: 21px;
          height: 21px;
          padding: 0;
          position: relative;
          left: 0;
          top: 7px;
        }

        .switch:hover {
          border-color: #C0FFEE;
        }
        .switch.on {
          border-color: transparent;
          background: #facade;
        }
        .switch.active {
          border-color: transparent;
          background: #C0FFEE;
        }
        .dark .switch {
          border-color: rgba(240, 240, 240, 0.5);
        }
        .dark .switch.on,
        .dark .switch.active {
          color: #333;
        }
        .dark .switch.bg {
          border-color: rgba(240, 240, 240, 0.5);
          color: rgba(240, 240, 240, 0.5);
        }
        .dark h1 {
          color: rgba(255, 255, 255, 0.25);
        }
        .dark h1 coffee {
            background: transparent;
            color: #C0FFEE;
        }


        .txt .flexer {
            background: transparent;
            border-top-color: rgba(127, 127,127, 0.25);
            border-left-color: rgba(127, 127,127, 0.25);
        }
        .dark.txt .flexer {
            background: transparent;
            border-top-color: rgba(240,240,240,.1);
            border-left-color: rgba(240,240,240,.1);
        }



        @media screen and (max-width: 1200px) {
          header .box {
            flex-basis: 100%;
          }
          header .box.switches {
            padding-top: 20px;
            padding-bottom: 50px;
            text-align: left;
            order: 3;
          }
          header .box.paragraph {
            flex-basis: 100%;
            font-size: 13px;
            padding-top: 20px;
            order: 2;
          }
          h1 {
            font-size: 4vw;
            padding-top: 30px;
          }
        }

        @media screen and (max-width: 600px) {
          span.sort {
            padding-bottom: 70px;
          }
          .flexer {
            flex-basis: 100%;
            padding: 0;
          }
          .flexer input {
            width: 100%;
          }
          .flexer input.three {
            width: 100%;
          }
        }


        /* https://simplesharingbuttons.com */
        ul.share-buttons{
          list-style: none;
          padding: 150px 0 0;
          display: none;
          position: fixed;
          top: 0;
          width: 100%;
          height: 100vh;
          width: 100vw;
          left: 0;
          text-align: center;
          background: -webkit-linear-gradient(bottom, transparent, #fff);
          background: -o-linear-gradient(bottom, transparent, #fff);
          background: linear-gradient(to top, transparent, #fff);
        }
        ul.share-buttons.on {
          display: block;
        }
        ul.share-buttons a {
          border: none;
        }
        ul.share-buttons li{
          display: inline;
        }

        ul.share-buttons .sr-only {
          position: absolute;
          clip: rect(1px 1px 1px 1px);
          clip: rect(1px, 1px, 1px, 1px);
          padding: 0;
          border: 0;
          height: 1px;
          width: 1px;
          overflow: hidden;
        }