.nojs .sample-line { display: none }
*{box-sizing: border-box ; max-width: 100vw;}
a{text-decoration:none}
body{
  margin:0;
  padding:0;
  overflow-x: hidden;
  overflow-y:scroll;;
  height: 100vh;
  top:0;
  right:0;
  bottom:0;
  left:0;
  position:absolute;
  font-family: Overpass,sans-serif;
  max-width: 100vw; }

body:before{
  content:"";

  display:block;
  position: fixed;
  left:0;
  right:0;
  width: 100%;}

.empty{

  z-index:4;
  display:block;
  position: fixed;
  left:0;
  right:0;
  width: 100%;
  height:.35em;
  z-index:1;
  top: 10em;
  background-image:
  linear-gradient(rgba(0,0,0,0.1), transparent);

}
article, section{max-width: 100% }
.empty:after{
  z-index:-1;
  content:"";
  position:fixed;
  height: 6em;
  background-color:#396;
  top:0;
  left:0;
  right:0;}

#about:checked ~ .empty:after{height:3em}
body:before{
  content:"";
  z-index:2;
  width: 100%;
  background-color: #4a7;
  top:0em;
  height: 3rem;}
/*buttons*/

.about-button{left:0; }

article input:checked + label{color:#000; box-shadow: 0 .1em }

.about-button,
.proportional-button,
.monospace-button{
  position:fixed;
  top:0;
  width: 33.3333333%;
  height: 3rem;
}


.proportional-button{
  left:33.33333%;
}

.monospace-button{

  left:66.6666666%;
  font-family: overpass-mono, monospace;
  font-style:normal}

#type-sample{
  font-family: overpass, sans-serif;
  border-radius: 0;
  position:fixed;
  top: 6rem;
  max-width: 100%;
  appearance:none;
  font-size:2rem;
  outline:0;
  margin: 0 auto;
  transition: width .3s cubic-bezier(.4,.4,.2,1), left .3s cubic-bezier(.4,.4,.2,1);
  display:block;
  height:4rem;
  line-height:4rem;
  left: 0;
  width: 100%;
  letter-spacing:0;
  z-index:5;
  text-align:center;
  border: none;
  background-color: #fff;


  }

h1{
  color:#23292c;
  margin-top:0;
  line-height:1.2em;
  font-size: 10vw;
  font-weight: 900;
  text-align:center;
  margin:0;
  padding:0;}

.sample{
  text-align:center;
  padding-bottom: 4rem}

   ::-webkit-input-placeholder {
      color: #aaa;
   }
   :-moz-placeholder { /* Firefox 18- */
      color: #aaa;
   }
   ::-moz-placeholder {  /* Firefox 19+ */
      color: #aaa;
   }
   :-ms-input-placeholder {
      color: #aaa;
   }




[for="variant-200"],
[for="variant-300"],
[for="variant-400"],
[for="variant-500"],
[for="variant-600"],
[for="variant-700"],
[for="variant-800"],
[for="variant-900"],
[for=variant-italic]{
  letter-spacing: -.05em;
  width: 10%;
  position:fixed;
  top: 3rem;
  height: 3rem;}

[for=variant-italic]{
  left:80%;
  width: 20% !important}

#variant-style-mono:checked ~ #type-sample{
  background-color:#22262c;
  color: white;
  font-family: overpass-mono, monospace;
  font-style:normal !important; }

#variant-style-mono:checked ~ [for="variant-300"]{left:0; width: 25%;}
#variant-style-mono:checked ~ [for="variant-400"]{left:25%; width: 25%;}
#variant-style-mono:checked ~ [for="variant-500"]{left:50%; width: 25%;}
#variant-style-mono:checked ~ [for="variant-600"]{left:75%; width: 25%;}

[for="variant-200"]{left: 0%}
[for="variant-300"]{left:10%}
[for="variant-400"]{left:20%}
[for="variant-500"]{left:30%}
[for="variant-600"]{left:40%}
[for="variant-700"]{left:50%}
[for="variant-800"]{left:60%}
[for="variant-900"]{left:70%}


#variant-style-mono:checked ~ [for=variant-200],
#variant-style-mono:checked ~ [for=variant-200],
#variant-style-mono:checked ~ [for=variant-700],
#variant-style-mono:checked ~ [for=variant-800],
#variant-style-mono:checked ~ [for=variant-900],
#variant-style-mono:checked ~ [for=variant-italic]
{display:none}


.about {
  text-align:center;
  margin: 0 auto;
}
article{
  display:none;
  padding-top: 12em;
}
/* hiding  monospace samples on standard select */



#variant-style-mono:checked  ~ .monospace-sample{
  display:block;}

/* hiding  standard samples on monospace select */

#variant-style-proportional:checked ~ .standard-sample{
    display:block}
#about:checked ~ #type-sample,
#about:checked ~ [for="variant-200"],
#about:checked ~ [for="variant-300"],
#about:checked ~ [for="variant-400"],
#about:checked ~ [for="variant-500"],
#about:checked ~ [for="variant-600"],
#about:checked ~ [for="variant-700"],
#about:checked ~ [for="variant-800"],
#about:checked ~ [for="variant-900"],
#about:checked ~ [for=variant-italic]{display:none}

#about:checked ~ .empty{top:3em; }

#about:checked ~ article.about{
  display:block;
  padding-top: 5rem;
}
.monospace-sample{
  font-family: overpass-mono, monospace;
  font-style: normal !important;
  background-color:#444a54;
  color: white}

article .big-sample{
  font-size: 9vw;
  line-height:1.3em;
  width: 100%;
  overflow:hidden;
  max-width: 100%
  text-align:center;
  margin:0;}

h2{ width: 100%;
  color:#333;
  margin: 0;
  font-size: 4em;
  display:inline-block;
  line-height:1em;}

h2 span{
  font-style:normal;
}
h2 span, h2 i{
  min-width: 40%;
  text-align:center;
  display:inline-block;}

h2:before {
  content: attr(class);
  color:#ccc;
  display: block;
  font-size: .7rem;
  font-style: normal;
  font-weight: 400;
  vertical-align: bottom;
  margin-bottom:-2em;
  text-transform: uppercase;
}

body > label{  z-index:4; line-height:2em; }
label {
  user-select: none;
  transition: all .3s ease;}


input[type="radio"],
input[type="checkbox"] {
  display: none;
}

input + label {
  cursor: pointer;
  display: block;
  padding: .5em 0;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color:#aaa;

  overflow:hidden;
}
body > input + label:before{
  content:"";
  background-color:transparent;
  position:absolute;
  display:block;
  top: 50%;
  z-index:-1;
  margin: 0 auto;
  left: 50%;
  margin-top: -3em;
  margin-left: -3em;
  border-radius: 50%;
  height: 6em;
  width: 6em;
  transform: scale(.01)}

body > input:checked + label:before{
  animation: flash .5s linear forwards;
}

input:checked + [for="variant-200"]:before,
input:checked + [for="variant-300"]:before,
input:checked + [for="variant-400"]:before,
input:checked + [for="variant-500"]:before,
input:checked + [for="variant-600"]:before,
input:checked + [for="variant-800"]:before,
input:checked + [for="variant-700"]:before,
input:checked + [for=variant-italic]:before,
input:checked + [for="variant-900"]:before{
  animation: mini-flash .5s linear forwards;

}

@keyframes flash{
  0%{transform: scale(.1)}
 60%{background-color:rgba(0,0,0,0.2);;  }
100%{transform: scale(8)}
}

@keyframes mini-flash{selectionselection
    0%{transform: scale(.1)}
   60%{background-color:rgba(0,0,0,0.2);  transform: scale(1)}
  100%{transform: scale(3)}
}
a{color:#37c}

body > input + label {
  background-color:#396;
  color: #eee;
  font-weight: 600;}
body > input:checked + label {
  color:#fff;
  background-color:#1c7c4c;

}

#variant-200:checked ~  article ,
#variant-200:checked ~  input {
  font-weight: 200}

#variant-300:checked ~  article ,
#variant-300:checked ~  input {
  font-weight: 300}


#variant-400:checked ~  article ,
#variant-400:checked ~  input {
  font-weight: 400}


#variant-500:checked ~  article ,
#variant-500:checked ~  input {
  font-weight: 500}


#variant-600:checked ~  article  ,
#variant-600:checked ~  input {
  font-weight: 600}


#variant-700:checked ~  article ,
#variant-700:checked ~  input {
  font-weight: 700}


#variant-800:checked ~  article  ,
#variant-800:checked ~  input {
  font-weight: 800}


#variant-900:checked ~  article  ,
#variant-900:checked ~  input{
  font-weight: 900}

.onion-skin {margin-top: -4rem;}
.onion-skin text{transition: all .5s ease}

  #variant-200:checked ~  article .onion-skin text:nth-child(1),
  #variant-300:checked ~  article .onion-skin text:nth-child(2),
  #variant-400:checked ~  article .onion-skin text:nth-child(3),
  #variant-500:checked ~  article .onion-skin text:nth-child(4),
  #variant-600:checked ~  article .onion-skin text:nth-child(5),
  #variant-700:checked ~  article .onion-skin text:nth-child(6),
  #variant-800:checked ~  article .onion-skin text:nth-child(7),
  #variant-900:checked ~  article .onion-skin text:nth-child(8)
  { fill:currentcolor; }


  #variant-italic:checked + label,
  #variant-italic:checked + article .onion-skin text,
  #variant-italic:checked ~  article  ,
  #variant-italic:checked ~  input {
    font-style: italic
  }

#variant-italic + label {
  letter-spacing:.05em;
  width: 7em;

}

.sponsor {
  text-align:center;
  margin: 0 auto;
  padding-bottom: 4em;
}

.sponsor svg{
  width: 304px;
  display:block;
  margin: 0 auto;
}

footer{
  background-color:#23292c;
  color: #aaa;
  padding-top:5rem;
  padding-bottom:3rem;
  text-align:center;
}

footer h4{
  font-weight: 400;
  margin-bottom:2em;
  text-transform: uppercase;
  letter-spacing:.1em;}

.sample-4{
  background-color:#12161c;
  padding: 2rem 0}

.sample-3{
  background-image: url(overpass.jpg);
  background-position: 50% 50% ;
  background-repeat: no-repeat;
  background-size: cover;
}

.cdn label{
  display:inline-block;
  width : 100% ;
  height: 2em;
  line-height: 2em;
  padding:0;
  margin:0 ;}



.cdn input{
  display:inline-block;
  color: currentcolor;
  cursor: text;
  left: 10%;
  width: 80%;
  padding: .5em;
  background-color: transparent;
  font-size: 1em;
  line-height: 2em;
  height: 2em;
  font-family: overpass-mono, menlo, dejavu mono, monospace;
  font-style: normal;
  appearance: none;
  border:none;
  text-align:center;
  padding: 0 .15em}


.waterfall p{white-space: nowrap; margin: .2rem;; line-height:1.23em; overflow:hidden; }
.waterfall p:nth-child(2){font-size: 10rem}
.waterfall p:nth-child(3){font-size: 6rem}
.waterfall p:nth-child(4){font-size: 4rem}
.waterfall p:nth-child(5){font-size: 2rem}
.waterfall p:nth-child(6){font-size: 1rem}
.waterfall p:nth-child(7){font-size: .75rem}
.waterfall p:nth-child(8){font-size: .5rem}
.waterfall p:nth-child(9){font-size: .25rem}

}
.cdn-sponsor path{fill: currentcolor;}

.thin       { font-weight: 200  !important}
.extralight { font-weight: 300  !important }
.light      { font-weight: 400  !important}
.regular    { font-weight: 500  !important}
.semibold   { font-weight: 600  !important}
.bold       { font-weight: 700  !important}
.extrabold  { font-weight: 800  !important}
.heavy      { font-weight: 900  !important}

.award{
  position:relative;
  width: 30%;
  font-size: 2em;
  opacity:1;
}
.award {margin-bottom:4em;}
.award .resource{font-size: .5em; display:block; margin:0;  position:absolute; bottom:-3em; color:#456 ; z-index:9; cursor:pointer;  width: 80%; left:10%; height:3em; line-height:3em;transparent; color:#eee; box-shadow: inset 0 0 0 .1em #456;}

.award a:hover ~ .resource{box-shadow: inset 0 0 0 .1em #fff;}

.award .resource:hover{background-color:#fff; color:black; box-shadow: none;}
.award svg{
  width: 50%;
  height: 2rem;
  color: white;
}
.award svg path{fill:white;}

.award:after,
.award:before {
  content: "";
  margin-bottom:-.5em;
  display: inline-block;
  width: 1em;
  height: 2em;
  background-position: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 50'%3E%3Cpath fill='%234a6' d='M16.2 2c-2.2 2-5 5-2 7.8C16 8.8 17 5 16 2zm.8 6c4 0 5.6-2 7-5-3.2 0-6.4 1-7 5zm-6.3 8c3-3 2-6 .6-9-1.7 3-3 6-.6 9zM22 8c-3 0-8.2 1.8-7 4.3 1.6 1 5-1.3 7-4.3zM8 14c-.5 3-.6 5.8 2.6 7.2 1-3.2-.3-5.2-2.6-7.2zm4 5c3.7 0 5-3 6-6-3 1-6 2-6 6zm-6.4 1c.5 3 2.2 6.7 4.7 5.6C11 23 8.5 21 5.5 20zM16 18c-2.7 2-5.5 4.7-4 7.5 2-.7 4-3.5 4-7.5zm-5 13c0-4-3-5-6-6 1 3 2.4 6 6 6zm4.6-7c-2.6 2-5 4-3.3 7 2.5.2 3.5-4 3.3-7zm-9.2 7c1.4 3 4.2 5.5 6.7 4.5 0-3.3-3-4.5-6.3-4.5zm8.3 5c3.5-1 3-5 2-8-2 3-4.5 4.7-2 8zm-5.4 1c2 2 6.3 5 8 3-.2-3.2-4.8-4-8-3zm9.4-5c-1 3-2.7 6.5 1 8.3 1.6-1.5.7-5.3-1-8.3zM13 42c2.6 2 7.3 3.5 8 1.2-1.5-2.2-5-2.2-8-1.2zm13 2c1-4-2-5-5-7 .6 4 1.5 7 5 7zm-8.4 2c2.8 2 7.6 3.5 8.6.4-2-2.5-5.7-2.4-8.6-.4z' /%3E%3C/svg%3E");
}




a[href="#"]{
  position:fixed;
  bottom:1em;
  right:1em;
  display:block;
  background-color:rgba(0,0,0,0.5);
  width: 2em;
  color: white;
  width: 2em;
  height:2em;
  border-radius: 50%;
  text-transform: uppercase;
  font-weight: 900;
  z-index:1;
  font-size: 2rem;
  line-height: 2em;
}


.award:after {
  transform: scaleX(-1);
}


.award {
  filter: grayscale(1) brightness(.8);
  display: inline-block;
  line-height: 3em;
  white-space: nowrap;

}
.award:after, .award:before {
  fill: currentcolor;
  display: inline-block;
  width: 1.5em;
  transition: all 0.3s cubic-bezier(0.3, 0.7, 0.1, 1.5);
}

.award:hover {
  filter: none;
  opacity: 1;
}
.award:hover:before {
  transform: scale(1.1) rotate(-12deg) translate(0.25em, 0);
}
.award:hover:after {
  transform: rotate(12deg) scale(1.1) scaleX(-1) translate(0.22em, 0) !important;
}

a, label{-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
::-moz-selection { color:white; background: #4a7; }
::selection { color:white; background: #4a7 ;  }


.button{
  display:inline-block;
  width: 20em;
  max-width: 100%;
  padding: 1em 2em;
  font-weight: 500;
  border-radius: .3em;
  background-color: #4a7;
  color:#fff;}

.repo{background-color:#567}
article section{display:none; padding-top: 3rem}
#carousel-3:checked ~ .variants{display:block}

#carousel-1:checked ~ .waterfall{display:block}

#mono-carousel-2:checked ~ .syntax,
#mono-carousel-1:checked ~ .glyphs,
#carousel-2:checked ~ .glyphs{display:block}

section{min-height:100vh}



#mono-carousel-3:checked ~ .display{display:block; padding-bottom:3rem;}
article{text-align:center;}
article > label{
  margin-top: 1em;
  display:inline-block;
  width: 30%;
  position:relative;
  overflow: hidden;}

article, section, .glyph-chart, .glyph-chart div{user-select:none}

.glyph-chart div{
  display: inline-block;
  height:1.5em;
  width: 1.5em;
  text-align:center;
  box-shadow:0 0 0 0.01em rgba(0,0,0,0.1);}

.glyph-chart div{
  cursor: default;
  font-size: 3em;
  transition: transform .15s cubic-bezier(.2,.4,.2,1.2) .12s;}

.glyph-chart div:hover{
  transform:scale(4);
  z-index:5;
  background-color:white;
  color:black;
  box-shadow: 0 .05em .2em rgba(0,0,0,0.4);
}


.board {
  max-width: 120em;
  margin: 0 auto;}

.board .headline {
  white-space: nowrap;}

.board .headline > span {
  position: relative;
  font-family: overpass-mono, sans-serif;
  text-transform: uppercase;
  font-style:normal;
  z-index: 2;
  text-shadow: 0 .075em #222;
  box-shadow: inset 0 0 0 0.025em rgba(0, 0, 0, 0.4), 0 0 0 0.012em rgba(150, 150, 150, 0.25);
  transform-origin: 2%;
  letter-spacing: 0em;
  display: inline-block;
  vertical-align: top;
  margin: .1em -.015em;
  line-height: 1.75em;
  height: 1.75em;
  font-size: 3vw;

  background: #42464c linear-gradient(to bottom, rgba(22, 22, 22, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%);
  text-indent: -.1em;
  text-align: center;
  width: 1em;
  color: #eee;
}
.board .headline > span:first-child {
  border-radius: .13em 0 0 .13em;
}
.board .headline > span:last-child {
  border-radius: 0 .13em .13em 0;
}
.board .headline {
  perspective-origin: 50% 50%;
  text-align: center;
  margin: .2em .5em;
  display: inline-block;
}
.board .headline:hover span {
  background-color: #111;
  color: #fff;
}
.board .headline span:after {
  transform-origin: 0% 0%;
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: calc(50% - 1px);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}
.board .headline.inactive span:after {
  transform-origin: 0% 0%;
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: calc(50% - 1px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}
.board .headline span:before {
  transform-origin: 100% 100%;
  content: '';
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 50%;
  z-index: 2;
}

@media (max-width: 60em) {
  .board .headline span {
    font-size: 4vw;
  }
}



.peoplepowered {
  margin:  0;
  padding: 0;
  font-family: overpass-mono,sans-serif;
  text-transform: uppercase;
  margin-bottom:2rem;
  position: relative;
  color: #aaa;
  font-size: 8vw;

}

.peoplepowered {
  perspective: 900px;
  perspective-origin: 50% 50%;
  text-align: center;
}

.peoplepowered span {
  z-index: 9;
  font-family: overpass-mono, monospace;
  box-shadow: 0 0.12em 0.5em rgba(0, 0, 0, 0.5);
  animation: peekaboo 10s ease-out 0s infinite;
  transition: all .5s ease;
  transform-origin: 2%;
  letter-spacing: 0em;
  display: inline-block;
  vertical-align: top;
  margin: .1em .025em;
  line-height: 1.5em;
  height: 1.5em;
  background: #c00 linear-gradient(to bottom, rgba(200, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%);
  text-align: center;
  width: .8em;
  color: #fff;
}


@keyframes peekaboo {
  4% {
    transform: 0;
    background-color: #c00;
  }
  8% {
    transform: rotatey(-30deg) rotatex(1.2deg);
    background-color: #f00;
  }
  14% {
    transform: rotate(0deg);
    background-color: #c00;
  }
  94% {
    transform: rotate(0deg);
  }
}
.peoplepowered span:nth-child(1n) {
  animation-delay: 0.32062s;
}

.peoplepowered span:nth-child(2n) {
  animation-delay: 0.64125s;
}

.peoplepowered span:nth-child(3n) {
  animation-delay: 0.96187s;
}

.peoplepowered span:nth-child(4n) {
  animation-delay: 1.28249s;
}

.peoplepowered span:nth-child(5n) {
  animation-delay: 1.60312s;
}

.peoplepowered span:nth-child(1n) {
  transform: rotate(0deg) rotatey(8deg);
}

.peoplepowered span:nth-child(2n) {
  transform: rotate(0deg) rotatey(9deg);
}

.peoplepowered span:nth-child(3n) {
  transform: rotate(0deg) rotatey(6deg);
}

.peoplepowered span:nth-child(4n) {
  transform: rotate(0deg) rotatey(4deg);
}

.peoplepowered span:nth-child(5n) {
  transform: rotate(0deg) rotatey(6deg);
}

.peoplepowered span:nth-child(6n) {
  transform: rotate(0deg) rotatey(10deg);
}

.peoplepowered span:nth-child(7n) {
  transform: rotate(0deg) rotatey(6deg);
}

.peoplepowered span:nth-child(8n) {
  transform: rotate(0deg) rotatey(5deg);
}

.peoplepowered span:nth-child(9n) {
  transform: rotate(0deg) rotatey(7deg);
}

.peoplepowered span:nth-child(10n) {
  transform: rotate(0deg) rotatey(9deg);
}

.peoplepowered span:nth-child(11n) {
  transform: rotate(0deg) rotatey(3deg);
}

.peoplepowered span:nth-child(12n) {
  transform: rotate(0deg) rotatey(10deg);
}

.peoplepowered span:nth-child(13n) {
  transform: rotate(0deg) rotatey(3deg);
}

.peoplepowered span:nth-child(14n) {
  transform: rotate(0deg) rotatey(1deg);
}

.peoplepowered span:nth-child(15n) {
  transform: rotate(0deg) rotatey(3deg);
}

/* hands*/
.peoplepowered span:before, .peoplepowered span:after {
  content: "";
  transform: scale(0.75);
  position: absolute;
  top: 50%;
  left: -.025em;
  display: block;
  z-index: 99;
  box-shadow: 0 0.05em 0.05em 0.01em rgba(0, 0, 0, 0.1);
  width: .059em;
  height: .09em;
  background-color: #edc;
  border-radius: 35% 50% 50% 35%;
}

.peoplepowered span:after {
  right: -.025em;
  left: auto;
  border-radius: 50% 35% 35% 50%;
}

.peoplepowered span:nth-child(1n):after, .peoplepowered span:nth-child(1n):before {
  top: auto;
  bottom: 9.32062% !important;
}

.peoplepowered span:nth-child(2n):after, .peoplepowered span:nth-child(2n):before {
  top: auto;
  bottom: 18.64125% !important;
}

.peoplepowered span:nth-child(3n):after, .peoplepowered span:nth-child(3n):before {
  top: auto;
  bottom: 27.96187% !important;
}

.peoplepowered span:nth-child(4n):after, .peoplepowered span:nth-child(4n):before {
  top: auto;
  bottom: 37.28249% !important;
}

.peoplepowered span:nth-child(5n):after, .peoplepowered span:nth-child(5n):before {
  top: auto;
  bottom: 46.60312% !important;
}


.onion-skin text {
  font-family: overpass;
  text-align: center;
  font-size: 80px;
  fill: none;
  stroke: currentcolor;
  stroke-width: .2px;
  opacity: .5;
}
.onion-skin text:nth-child(1) {
  font-weight: 200;
}
.onion-skin text:nth-child(2) {
  font-weight: 300;
}
.onion-skin text:nth-child(3) {
  font-weight: 400;
}
.onion-skin text:nth-child(4) {
  font-weight: 500;
}
.onion-skin text:nth-child(5) {
  font-weight: 600;
}
.onion-skin text:nth-child(6) {
  font-weight: 700;
}
.onion-skin text:nth-child(7) {
  font-weight: 800;
}
.onion-skin text:nth-child(8) {
  font-weight: 900;
}


.monospace-sample input:checked + label{color: white;}
.monospace-sample .glyphs div{color:#a3a6a9}
.monospace-sample .glyphs div:hover{color:#222}


.sample-2 {
  margin:0;margin-top:2rem;
  perspective: 60vw;
  font-family: Overpass, sans-serif;
  text-align: center;
  color: #234;
  background-color: #eee;
  font-size: 9vw;
  padding: 0.5em 0 1em 0;
  overflow: hidden;/B
}

.sample-2 .letter span:nth-child(1n) {
  animation-delay: 1.06667s;
}

.sample-2 .letter span:nth-child(2n) {
  animation-delay: 1.13333s;
}

.sample-2 .letter span:nth-child(3n) {
  animation-delay: 1.2s;
}

.sample-2 .letter span:nth-child(4n) {
  animation-delay: 1.26667s;
}

.sample-2 .letter span:nth-child(5n) {
  animation-delay: 1.33333s;
}

3.sample-2 .letter span:nth-child(6n) {
  animation-delay: 1.4s;
}

.sample-2 .letter span:nth-child(7n) {
  animation-delay: 1.46667s;
}

.sample-2 .letter span:nth-child(8n) {
  animation-delay: 1.53333s;
}

.sample-2 .letter span:nth-child(9n) {
  animation-delay: 1.6s;
}

.sample-2 .letter span:nth-child(10n) {
  animation-delay: 1.66667s;
}

.sample-2 .letter span:nth-child(11n) {
  animation-delay: 1.73333s;
}

.sample-2 .letter span:nth-child(12n) {
  animation-delay: 1.8s;
}

.sample-2 .letter {
  margin: .26em 0;
  line-height: 1em;
  padding: 0;
}

@keyframes effect {
  15% {
    transform: translate(0, 0.75em) rotateX(75deg) scale(0.9) rotate(1deg);
    color: #eee;
    text-shadow: 0 -0.025em rgba(0, 0, 0, 0.2);
  }
  40% {
    transform: none;
    text-shadow: 0 1.25em 0 transparent;
    transform: none;
    color: currentcolor;
  }
}
.sample-2 .letter span {
  min-width: .3em;
  transform-origin: 50% 100%;
  display: inline-block;
  animation: effect 6s cubic-bezier(1, 0, 0, 1.1) infinite;
  text-shadow: 0 1.5em 0 rgba(0, 0, 0, 0.015);
}


.sample-3 {
  background-color:#545a64;
  perspective: 60vw;
  font-size: 6vw;
  text-align: center;
  padding: 4rem 0;
  font-family: Overpass, sans-serif;
  color: #aaa;
}
.sample-3 h3 {
  padding: 0.25em 0;
  margin:0;
}

.sample-3 .letter span:nth-child(1n) {
  animation-delay: 1.2s;
}

.sample-3 .letter span:nth-child(2n) {
  animation-delay: 1.4s;
}

.sample-3 .letter span:nth-child(3n) {
  animation-delay: 1.6s;
}

.sample-3 .letter span:nth-child(4n) {
  animation-delay: 1.8s;
}

.sample-3 .letter span:nth-child(5n) {
  animation-delay: 2s;
}

.sample-3 .letter span:nth-child(6n) {
  animation-delay: 2.2s;
}

.sample-3 .letter span:nth-child(7n) {
  animation-delay: 2.4s;
}

.sample-3 .letter span:nth-child(8n) {
  animation-delay: 2.6s;
}

.sample-3 .letter span:nth-child(9n) {
  animation-delay: 2.8s;
}

.sample-3 .letter span:nth-child(10n) {
  animation-delay: 3s;
}

.sample-3 .letter span:nth-child(11n) {
  animation-delay: 3.2s;
}

.sample-3 .letter span:nth-child(12n) {
  animation-delay: 3.4s;
}

.sample-3 .letter span:nth-child(13n) {
  animation-delay: 3.6s;
}

.sample-3 .letter span:nth-child(14n) {
  animation-delay: 3.8s;
}

.sample-3 .letter span:nth-child(15n) {
  animation-delay: 4s;
}

.sample-3 .letter span:nth-child(16n) {
  animation-delay: 4.2s;
}

.sample-3 .letter span:nth-child(17n) {
  animation-delay: 4.4s;
}

.sample-3 .letter span:nth-child(18n) {
  animation-delay: 4.6s;
}

.sample-3 .letter span:nth-child(19n) {
  animation-delay: 4.8s;
}

.sample-3 .letter span:nth-child(20n) {
  animation-delay: 5s;
}

.sample-3 .letter span {
  animation: fadeit 4s linear infinite;
  margin: .1em 0;
  line-height: 1em;
  padding: 0;
}

@keyframes fadeit {
  12% {
    font-weight: 200;
    color: #ccc;
  }
  24% {
    font-weight: 300;
  }
  36% {
    font-weight: 400;
  }
  48% {
    font-weight: 500;
  }
  60% {
    font-weight: 600;
  }
  72% {
    font-weight: 700;
  }
  84% {
    font-weight: 800;
  }
  96% {
    font-weight: 900;
    color: #fff;
  }
}


@media (min-width: 70em){
  .sample-2{font-size: 5vw}
  .sample-3{font-size:3vw}
}


@media (max-width: 50em) {
  .onion-skin{display:none !important}
  .award{width: 45% !important}
  .award:after, .award:before{display:none !important}
  .award svg{ height:1.3em !important; width: 80% !important;}
}
@media (max-width: 40em) {
  .cdn{display:none !important;}
  label span{display:none}
}



textarea{font-family: overpass-mono, monospace; fontsize: 4em;}