@font-face {
  src: url('../fonts/EmojiOneColor-UI.woff2') format('woff2'),
    url('../fonts/EmojiOneColor-UI.woff') format('woff');
  font-family: 'EmojiOne Color UI';
}

@font-face {
  src: url('../fonts/EmojiOneColor.woff2') format('woff2'),
    url('../fonts/EmojiOneColor.woff') format('woff');
  font-family: 'EmojiOne Color';
}

@font-face {
  src: url('../fonts/TrajanColor-Concept.woff2') format('woff2'),
    url('../fonts/TrajanColor-Concept.woff') format('woff');
  font-family: 'Trajan Color Concept';
}

@font-face {
  src: url('../fonts/Source_Sans/SourceSansPro-Regular.otf.woff2'),
    url('../fonts/Source_Sans/SourceSansPro-Regular.otf.woff');
  font-family: 'Source Sans Pro';
  font-weight: 400;
  font-style: normal;
}

@font-face {
  src: url('../fonts/Source_Sans/SourceSansPro-Bold.otf.woff2'),
    url('../fonts/Source_Sans/SourceSansPro-Bold.otf.woff');
  font-family: 'Source Sans Pro';
  font-weight: 700;
  font-style: normal;
}

@font-face {
  src: url('../fonts/Source_Serif/SourceSerifPro-Regular.otf.woff2'),
    url('../fonts/Source_Serif/SourceSerifPro-Regular.otf.woff');
  font-family: 'Source Serif Pro';
  font-weight: 400;
  font-style: normal;
}

@font-face {
  src: url('../fonts/Source_Serif/SourceSerifPro-Bold.otf.woff2'),
    url('../fonts/Source_Serif/SourceSerifPro-Bold.otf.woff');
  font-family: 'Source Serif Pro';
  font-weight: 700;
  font-style: normal;
}


* {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;
  color: inherit;
  text-decoration: none;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-kerning: normal;
  -moz-font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

html:before {
  /* BREAKPOINT INDICATOR */
  content: 'XXS';
  font-family: Verdana, sans-serif;
  font-size: 9px;
  color: rgba(128, 128, 128, 0.5);
  position: fixed;
  top: 0px;
  left: 0px;
  display: none;
}

html.debug:before {
  display: block;
}

html.debug * {
  outline: 1px dashed rgba(255, 0, 0, 0.5);
}

*+* {
  margin-top: 1em;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Source Sans Pro', 'EmojiOne Color UI', Arial, Verdana, sans-serif;
  font-weight: 400;
  font-size: 1.125em;
  line-height: 1.2;
  margin: 0 auto;
}

a {
  text-decoration: underline;
}

nav a,
#tabs a,
a.button {
  text-decoration: none;
}

a:hover {
  position: relative;
  top: 1px;
  left: -1px;
}

a:active {
  position: relative;
  top: 2px;
  left: -2px;
}

section>* {
  max-width: 38rem;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

section {
  margin: 0;
  padding: 6% 4% 8%;
}

header {
  margin: 0;
}

header,
nav,
footer {
  color: #FFF;
  background-color: #000;
  text-align: center;
}

nav,
footer {
  margin: 0;
  padding: 4% 4% 5%;
}

nav ul,
footer>div {
  max-width: 38rem;
  margin-right: auto;
  margin-left: auto;
}

footer>div {
  text-align: left;
}

nav ul {
  text-align: justify;
}

nav li {
  display: inline-block;
  text-align: center;
  margin-top: 0;
}

nav ul:after {
  font-size: 0;
  line-height: 0;
  height: 0;
  content: "";
  width: 100%;
  display: inline-block
}

nav .emoji {
  display: block;
  font-size: 1.5em;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
}

h1 {
  text-transform: uppercase;
  font-size: 1.75em;
  margin-top: 0;
  margin-bottom: 1em;
  line-height: 1;
  white-space: nowrap;
}

h1 .emoji {
  display: inline-block;
  font-size: 1.5em;
  margin-top: 0;
  margin-bottom: -.5em;
  padding-top: .15em;
  vertical-align: top;
}

h2 {
  font-size: 1.5em;
}

#cover h2 {
  font-size: 1.25em;
  font-weight: 400;
  margin-top: 0;
}

h3 {
  font-size: 1.25em;
}

h4 {
  font-size: 1.125em;
}

p {
  text-align: left;
}

p,
#cover h2 {
  font-family: 'Source Serif Pro', 'EmojiOne Color UI', Georgia, Times, serif;
}

ul+ul {
  margin-top: 3em;
}

li+li {
  margin-top: .5em;
}

figcation,
footer {
  font-size: .75em;
}

wbr,
br {
  margin: 0;
}

strong {
  font-weight: 700;
}

cite,
em {
  font-style: italic;
}

mark {
  background-color: rgba(0, 0, 0, 0.15);
}

footer .logo {
  display: inline-block;
  vertical-align: top;
  margin-right: .5em;
}

footer #legal {
  display: inline-block;
  margin-top: -.1em;
  max-width: calc(100% - 3em);
}

footer p {
  font-family: 'Source Sans Pro', 'EmojiOne Color UI', Arial, Verdana, sans-serif;
  line-height: 1.3;
}

footer span {
  white-space: nowrap;
  margin: 0;
  line-height: 1;
}

footer:after {
  content: "";
  display: table;
  clear: both;
}



/*
#warning:before {
content:"";
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(0,0,0,0.8);
position: fixed;
z-index: 1;
}
#warning div {
color: #000;
position: fixed;
top: 50%;
left: 50%;
width: 90%;
transform: translate(-50%, -50%);
padding: .75em 1em 1em;
z-index: 2;
max-width: 38em;
}
#warning:target,
html.chromacheck-svg #warning {
display: none;
}
*/


#warning {
  display: block;
  color: #000;
  width: 100%;
  z-index: 1;
  padding: 5%;
  animation-duration: 3s;
  background-color: #FF0;
  background-image: repeating-linear-gradient(-45deg, #FF0, #FF0 1em, #000 1em, #000 2em);
}

#warning p {
  font-family: 'Source Sans Pro', 'EmojiOne Color UI', Arial, Verdana, sans-serif;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
  padding: 2% 3% 2.5%;
  background-color: #FF0;
}

html.no-warning #warning,
html.chromacheck-svg #warning {
  display: none;
}

.close-warning:hover {
  cursor: pointer;
}

#cover {
  padding-top: calc(3em - 1%);
  padding-bottom: 5%;
  margin: 0;
  position: relative;
}

.logo {
  width: 1.75rem;
}

#cover .logo {
  position: absolute;
  top: 1em;
  left: 4%;
}

.logo img {
  width: 100%;
}

#cover-moji {
  margin-top: 2%;
  position: relative;
  overflow: hidden;
  padding-bottom: 2%;
  height: calc(1em + 35vw)
}

#cover-moji #spinners {
  position: absolute;
  width: 98%;
  height: 100%;
  top: -15%;
  left: -2%;
  margin-top: 0;
}

#cover-moji .emoji {
  margin-top: 0;
  position: absolute;
}

.spin-slow,
.spin-med,
.spin-fast {
  margin-bottom: -.05em;
  display: block;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin-slow {
  animation-duration: 9s;
}

.spin-med {
  animation-duration: 6s;
}

.spin-fast {
  animation-duration: 3s;
}

.counterspin {
  animation-name: counterspin;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes counterspin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.emoji-S {
  font-size: calc(1em + 3vw);
}

.emoji-M {
  font-size: calc(1em + 4vw);
}

.emoji-L {
  font-size: calc(1em + 5vw);
}

.emoji-XL {
  font-size: calc(1em + 6vw);
}

.emoji-XXL {
  font-size: calc(1em + 35vw);
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.x0 {
  left: 0%;
}

.x1 {
  left: 10%;
}

.x2 {
  left: 20%;
}

.x3 {
  left: 30%;
}

.x4 {
  left: 40%;
}

.x5 {
  left: 50%;
}

.x6 {
  left: 60%;
}

.x7 {
  left: 70%;
}

.x8 {
  left: 80%;
}

.x9 {
  left: 90%;
}

.x10 {
  left: 100%;
}

.y0 {
  top: 0%;
}

.y1 {
  top: 10%;
}

.y2 {
  top: 20%;
}

.y3 {
  top: 30%;
}

.y4 {
  top: 40%;
}

.y5 {
  top: 50%;
}

.y6 {
  top: 60%;
}

.y7 {
  top: 70%;
}

.y8 {
  top: 80%;
}

.y9 {
  top: 90%;
}

.y10 {
  top: 100%;
}

a.button {
  color: #FFF;
  padding: .5em .5em;
  background-color: #9C3;
  /* Typekit green */
  border-radius: .25em;
  border-width: 0 0 4px 4px;
  border-style: solid;
  border-color: #000 #693;
}

a.button:hover {
  border-width: 0 0 3px 3px;
}

a.button:active {
  border-width: 0 0 2px 2px;
}

li.button {
  margin-top: 2em;
  margin-bottom: 2em;
}

ul.bulleted,
li.bulleted {
  position: relative;
  margin-left: 1.4em;
  text-indent: -1.4em;
}

ul.bulleted li:before,
li.bulleted:before {
  content: '👉';
  margin-right: .4em;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  color: transparent;
  line-height: 1;
  background-image: url('../images/svg/1f449.svg');
}

html.chromacheck-svg li.bulleted:before {
  background: none;
  color: inherit;
}

li.download:before {
  content: '⬇️';
}

li.clone:before {
  content: '👭';
}

li.package:before {
  content: '📦';
}

li.manual:before {
  content: '📖';
}

#about,
#emoji,
#get,
#use,
#make,
#trajan {
  animation-duration: 60s;
  animation-iteration-count: infinite;
}

.red-start-bg,
.orange-start-bg,
.yellow-start-bg,
.green-start-bg,
.blue-start-bg,
.purple-start-bg {
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.red-start-bg {
  background-color: #FF5250;
  animation-name: red-start-bg;
}

.orange-start-bg {
  background-color: #FFB050;
  animation-name: orange-start-bg;
}

.yellow-start-bg {
  background-color: #FFF96A;
  animation-name: yellow-start-bg;
}

.green-start-bg {
  background-color: #91E05A;
  animation-name: green-start-bg;
}

.blue-start-bg {
  background-color: #45BFF0;
  animation-name: blue-start-bg;
}

.purple-start-bg {
  background-color: #B47DEC;
  animation-name: purple-start-bg;
}

/*
@keyframes red-start-bg {
0%, 100% { background-color: #FF5250;}
14.29% { background-color: #FFB050;}
28.57% { background-color: #FFF96A;}
42.86% { background-color: #91E05A;}
57.14% { background-color: #45BFF0;}
71.43% { background-color: #B47DEC;}
}
@keyframes orange-start-bg {
71.43% { background-color: #FF5250;}
0%, 100% { background-color: #FFB050;}
14.29% { background-color: #FFF96A;}
28.57% { background-color: #91E05A;}
42.86% { background-color: #45BFF0;}
57.14% { background-color: #B47DEC;}
}
@keyframes yellow-start-bg {
57.14% { background-color: #FF5250;}
71.43% { background-color: #FFB050;}
0%, 100% { background-color: #FFF96A;}
14.29% { background-color: #91E05A;}
28.57% { background-color: #45BFF0;}
42.86% { background-color: #B47DEC;}
}
@keyframes green-start-bg {
42.86% { background-color: #FF5250;}
57.14% { background-color: #FFB050;}
71.43% { background-color: #FFF96A;}
0%, 100% { background-color: #91E05A;}
14.29% { background-color: #45BFF0;}
28.57% { background-color: #B47DEC;}
}
@keyframes blue-start-bg {
28.57% { background-color: #FF5250;}
42.86% { background-color: #FFB050;}
57.14% { background-color: #FFF96A;}
71.43% { background-color: #91E05A;}
0%, 100% { background-color: #45BFF0;}
14.29% { background-color: #B47DEC;}
}
@keyframes purple-start-bg {
14.29% { background-color: #FF5250;}
28.57% { background-color: #FFB050;}
42.86% { background-color: #FFF96A;}
57.14% { background-color: #91E05A;}
71.43% { background-color: #45BFF0;}
0%, 100% { background-color: #B47DEC;}
}
*/


.red-start,
.orange-start,
.yellow-start,
.green-start,
.blue-start,
.purple-start {
  animation-duration: .6s;
  animation-iteration-count: infinite;
}

.red-start {
  color: #FF5250;
  animation-name: red-start;
}

.orange-start {
  color: #FFB050;
  animation-name: orange-start;
}

.yellow-start {
  color: #FFF96A;
  animation-name: yellow-start;
}

.green-start {
  color: #91E05A;
  animation-name: green-start;
}

.blue-start {
  color: #45BFF0;
  animation-name: blue-start;
}

.purple-start {
  color: #B47DEC;
  animation-name: purple-start;
}

@keyframes red-start {

  0%,
  100% {
    color: #FF5250;
  }

  14.29% {
    color: #FFB050;
  }

  28.57% {
    color: #FFF96A;
  }

  42.86% {
    color: #91E05A;
  }

  57.14% {
    color: #45BFF0;
  }

  71.43% {
    color: #B47DEC;
  }
}

@keyframes orange-start {
  71.43% {
    color: #FF5250;
  }

  0%,
  100% {
    color: #FFB050;
  }

  14.29% {
    color: #FFF96A;
  }

  28.57% {
    color: #91E05A;
  }

  42.86% {
    color: #45BFF0;
  }

  57.14% {
    color: #B47DEC;
  }
}

@keyframes yellow-start {
  57.14% {
    color: #FF5250;
  }

  71.43% {
    color: #FFB050;
  }

  0%,
  100% {
    color: #FFF96A;
  }

  14.29% {
    color: #91E05A;
  }

  28.57% {
    color: #45BFF0;
  }

  42.86% {
    color: #B47DEC;
  }
}

@keyframes green-start {
  42.86% {
    color: #FF5250;
  }

  57.14% {
    color: #FFB050;
  }

  71.43% {
    color: #FFF96A;
  }

  0%,
  100% {
    color: #91E05A;
  }

  14.29% {
    color: #45BFF0;
  }

  28.57% {
    color: #B47DEC;
  }
}

@keyframes blue-start {
  28.57% {
    color: #FF5250;
  }

  42.86% {
    color: #FFB050;
  }

  57.14% {
    color: #FFF96A;
  }

  71.43% {
    color: #91E05A;
  }

  0%,
  100% {
    color: #45BFF0;
  }

  14.29% {
    color: #B47DEC;
  }
}

@keyframes purple-start {
  14.29% {
    color: #FF5250;
  }

  28.57% {
    color: #FFB050;
  }

  42.86% {
    color: #FFF96A;
  }

  57.14% {
    color: #91E05A;
  }

  71.43% {
    color: #45BFF0;
  }

  0%,
  100% {
    color: #B47DEC;
  }
}

#tabs li {
  display: inline-block;
  background-color: #EEE;
  padding: .25em .45em;
  border: 1px solid #CCC;
  margin-top: 0;
}

#tabs li+li {
  border-left: none;
}

#tabs .ui-tabs-active {
  background-color: #FFF;
  border-bottom-color: #FFF;
}

.tab-content {
  background-color: #FFF;
  margin-top: -1px;
  border: 1px solid #CCC;
  padding: 1% 2%;
}

.red {
  color: #FF5250;
}

.orange {
  color: #FFB050;
}

.yellow {
  color: #FFF96A;
}

.green {
  color: #91E05A;
}

.blue {
  color: #45BFF0;
}

.purple {
  color: #B47DEC;
}

.white {
  color: #FFF;
}

.black {
  color: #000;
}

.red-bg {
  background-color: #FF5250;
}

.orange-bg {
  background-color: #FFB050;
}

.yellow-bg {
  background-color: #FFF96A;
}

.green-bg {
  background-color: #91E05A;
}

.blue-bg {
  background-color: #45BFF0;
}

.purple-bg {
  background-color: #B47DEC;
  background-color: rgb(148, 80, 224);
}

.white-bg {
  background-color: #FFF;
}

.black-bg {
  background-color: #000;
}

.rainbow-bg {
  background-image: repeating-linear-gradient(180deg,
      rgb(255, 82, 80),
      /* red */
      rgb(255, 176, 80, 20%),
      /* orange */
      rgb(255, 249, 106, 40%),
      /* yellow */
      rgb(145, 224, 90, 60%),
      /* green */
      rgb(69, 191, 240, 80%),
      /* blue */
      rgb(180, 125, 236, 100%)
      /* purple */
    );
}

.emoji {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  color: transparent;
  line-height: 1;
}

.emoji-cat {
  background-image: url('../images/svg/1f63b.svg');
}

.emoji-rainbow {
  background-image: url('../images/svg/1f308.svg');
}

.emoji-info {
  background-image: url('../images/svg/2139.svg');
}

.emoji-check {
  background-image: url('../images/svg/2705.svg');
}

.emoji-triangle {
  background-image: url('../images/svg/1f4d0.svg');
}

.emoji-tools {
  background-image: url('../images/svg/1f6e0.svg');
}

.emoji-columns {
  background-image: url('../images/svg/1f3db.svg');
}

.emoji-cool {
  background-image: url('../images/svg/1f60e.svg');
}

.emoji-dog {
  background-image: url('../images/svg/1f436.svg');
}

.emoji-watermelon {
  background-image: url('../images/svg/1f349.svg');
}

.emoji-andre {
  background-image: url('../images/svg/1f61c.svg');
}

.emoji-eyes {
  background-image: url('../images/svg/1f440.svg');
}

.emoji-robot {
  background-image: url('../images/svg/1f916.svg');
}

.emoji-thumbsup {
  background-image: url('../images/svg/1f44d.svg');
}

.emoji-mouse {
  background-image: url('../images/svg/1f42d.svg');
}

.emoji-recycle {
  background-image: url('../images/svg/267b.svg');
}

.emoji-snowflake {
  background-image: url('../images/svg/2744.svg');
}

.emoji-earth {
  background-image: url('../images/svg/1f30d.svg');
}

.emoji-plane {
  background-image: url('../images/svg/2708.svg');
}

.emoji-lemon {
  background-image: url('../images/svg/1f34b.svg');
}

.emoji-pizza {
  background-image: url('../images/svg/1f355.svg');
}

.emoji-peace {
  background-image: url('../images/svg/262e.svg');
}

.emoji-candy {
  background-image: url('../images/svg/1f36c.svg');
}

.emoji-soccer {
  background-image: url('../images/svg/26bd.svg');
}

.emoji-dice {
  background-image: url('../images/svg/1f3b2.svg');
}

.emoji-isabel {
  background-image: url('../images/svg/1f602.svg');
}

.emoji-blessed {
  background-image: url('../images/svg/1f64c.svg');
}

.emoji-satellite {
  background-image: url('../images/svg/1f6f0.svg');
}

.emoji-diamond {
  background-image: url('../images/svg/1f48e.svg');
}

.emoji-poo {
  background-image: url('../images/svg/1f4a9.svg');
}

.emoji-lightbulb {
  background-image: url('../images/svg/1f4a1.svg');
}

.emoji-money {
  background-image: url('../images/svg/1f4b8.svg');
}

.emoji-heart {
  background-image: url('../images/svg/2764.svg');
}

.emoji-yinyang {
  background-image: url('../images/svg/262f.svg');
}

.emoji-anchor {
  background-image: url('../images/svg/2693.svg');
}

.emoji-moon {
  background-image: url('../images/svg/1f31d.svg');
}

.emoji-100 {
  background-image: url('../images/svg/1f4af.svg');
}

.emoji-diskette {
  background-image: url('../images/svg/1f4be.svg');
}

.emoji-donut {
  background-image: url('../images/svg/1f369.svg');
}


html.chromacheck-svg .emoji {
  background: none;
  color: inherit;
}

.color-switcher {
  text-align: center;
  display: none;
}

html.chromacheck-svg .color-switcher {
  display: block;
}

.color-switcher span {
  display: inline-block;
  line-height: 1;
  padding: 0;
  margin: 0;
}

.color-switcher span span a {
  display: inline-block;
  font-size: 2em;
  white-space: nowrap;
  text-decoration: none;
  padding: .2em .1em 0;
  min-width: 1em;
  margin-top: 0;
}

.color-switcher span span a:not(.current) {
  background-color: transparent;
}

#trajan-block {
  line-height: 1.2;
  font-size: 3em;
  margin-top: 0;
  background-size: cover;
  background-position: right top;
  padding: .2em .2em 0;
  text-align: center;
}



.emoji,
.emoji-block {
  font-family: 'EmojiOne Color UI';
}

#emoji .emoji-block {
  font-family: 'EmojiOne Color';
}

.trajan {
  font-family: 'Trajan Color Concept';
}

.mirror {
  display: inline-block;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.default,
.ss01,
.ss02,
.ss03,
.ss04,
.ss05,
.ss06,
.ss07,
.ss08,
.ss09,
.ss10,
.ss11,
.ss12,
.ss13,
.ss14,
.ss15,
.ss16,
.ss17,
.ss18,
.ss19,
.ss20 {
  background-color: #555;
}

.ss01 {
  font-feature-settings: "ss01";
}

.ss02 {
  font-feature-settings: "ss02";
}

.ss03 {
  font-feature-settings: "ss03";
  background-color: #AAA;
}

.ss04 {
  font-feature-settings: "ss04";
  background-color: #333;
}

.ss05 {
  font-feature-settings: "ss05";
  background-color: #222;
}

.ss06 {
  font-feature-settings: "ss06";
  background-color: #333;
}

.ss07 {
  font-feature-settings: "ss07";
}

.ss08 {
  font-feature-settings: "ss08";
  background-color: #333;
}

.ss09 {
  font-feature-settings: "ss09";
  background-color: #222;
}

.ss10 {
  font-feature-settings: "ss10";
}

.ss11 {
  font-feature-settings: "ss11";
  background-color: #c4a58f;
}

.ss12 {
  font-feature-settings: "ss12";
  background-color: #333;
}

.ss13 {
  font-feature-settings: "ss13";
}

.ss14 {
  font-feature-settings: "ss14";
}

.ss15 {
  font-feature-settings: "ss15";
}

.ss16 {
  font-feature-settings: "ss16";
  background-color: #888;
}

.ss17 {
  font-feature-settings: "ss17";
  background-color: #222;
}

.ss18 {
  font-feature-settings: "ss18";
  background-color: #333;
}

.ss19 {
  font-feature-settings: "ss19";
  background-color: #AAA;
}

.ss20 {
  font-feature-settings: "ss20";
}


@media (min-width: 20em) {
  html:before {
    content: 'XS';
  }
}

@media (min-width: 30em) {
  html:before {
    content: 'S';
  }

  p {
    line-height: 1.4;
  }

  .emoji-block {
    font-size: 1.5em;
  }

  #trajan-block {
    font-size: 4em;
  }
}

@media (min-width: 48em) {
  html:before {
    content: 'M';
  }

  body {
    line-height: 1.4;
  }

  h1 {
    font-size: 4em;
  }

  h2 {
    font-size: 1.75em;
  }

  h2 .emoji {
    display: inline-block;
    font-size: 1.4em;
    margin-left: -1.3em;
    margin-top: -.2em;
    margin-right: .1em;
    vertical-align: middle;
  }

  figure {
    max-width: none;
  }

  /*
.emoji-S {font-size: 2em;}
.emoji-M {font-size: 3em;}
.emoji-L {font-size: 4em;}
.emoji-XL {font-size: 5em;}
.emoji-XXL { font-size: 25em;}
*/

  .emoji-block {
    font-size: 1.75em;
  }

  #trajan-block {
    font-size: 5em;
  }
}

@media (min-width: 64em) {
  html:before {
    content: 'L';
  }

  .emoji-block {
    font-size: 2em;
  }

  #trajan-block {
    font-size: 7em;
  }
}

@media (min-width: 80em) {
  html:before {
    content: 'XL';
  }

  .emoji-block {
    font-size: 2.5em;
  }

  #trajan-block {
    font-size: 10em;
  }
}

@media (min-width: 96em) {
  html:before {
    content: 'XXL';
  }

  /* 	html {zoom: 120%;} */
}