body {
  background: white url("/?originalUrl=https%3A%2F%2Fhyperform.js.org%2Fsky.png") no-repeat center top;
  background-size: 100% 150px;
}

article {
  max-width: 41em;
}

main {
  padding: 0 .5em;
}

header {
  text-align: center;
}

h1 {
  font-size: 2.5em;
}

p {
  margin: 0;
}

li + li,
p + p {
  margin-top: .75em;
}

pre {
  font-size: 1.1em;
  line-height: 1.3;
}

a {
  color: #78397E;
  text-decoration: none;
}

a:focus,
a:hover {
  color: #66246C;
  box-shadow: inset 0 -1px 0 0 #66246C,
              inset 0 -5px 5px -5px #66246C;
}

a[href^="http://"]:after,
a[href^="https://"]:after {
  content: " " url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%20width%3D%2212%22%3E%3Crect%20x%3D%220.5%22%20y%3D%222.5%22%20width%3D%229%22%20height%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%2378397E%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M2%2C5h5v-3l5%2C5l-5%2C5v-3h-5z%22%20fill%3D%22%2378397E%22%20%20stroke%3D%22white%22%20stroke-width%3D%221%22/%3E%3C/svg%3E');
  vertical-align: middle;
}

hr {
  color: transparent;
  background: none;
  height: 0;
  border: none;
  border-top: 1px solid #78397E;
}

ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  margin-left: 0;
  padding-left: 22px;
  background: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F1f47e.png") no-repeat left 4px;
  background-size: 16px;
}

ul li.github {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Foctocat.png");
}

ul li.active {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F1f680.png");
}

ul li.home {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F2b50.png");
}

ul li.docs {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F1f4d6.png");
}

#stage {
  border: 1px solid #eee;
  padding: 1em 1.5em;
}

#code:empty {
  display: none;
}

.row {
  display: flex;
  margin: -1em 0 0 -1em;
}

.span {
  flex: 1;
  padding: 1em 0 0 1em;
}

.help {
  color: #666;
  font-size: smaller;
}


table {
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #f1eef2;
  padding: .375em;
}
tbody > tr:nth-child(2n) > td {
  background: #f9f4ff;
}


/* Source Code Highlighting */

.highlight {
  background: #272822;
  color: #f8f8f2;
  font-family: "Droid Sans Mono",monospace;
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
  border-radius: 0.3em;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}

.highlight pre {
  margin: 0;
  padding: 0;
}


/* Page Footer */

.page-footer {
  background: #240A29 url("/?originalUrl=https%3A%2F%2Fhyperform.js.org%2Fcave.png") repeat-x center top;
  color: white;
  padding: 200px 0;
}

.page-footer > * {
  max-width: 40em;
  margin: 0 auto;
}

.page-footer a {
  color: #B8A1BD;
}

.page-footer a:focus,
.page-footer a:hover {
  color: #664C67;
}


/* Navigation */

/* special sub-nav for docs */
.nav--docs {
  float: left;
  max-width: 15em;
  margin: 0 1em 1em 0;
}

@media (min-width: 71em) {
  .nav--docs {
    margin-left: -16em;
  }
}

@media (min-width: 49em) {
  .page-nav {
    margin-left: -4em;
    margin-right: -4em;
  }
}


.nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.nav__list .nav__list {
  margin-top: .5em;
}

.nav--vertical .nav__list {
  flex-direction: column;
}


.nav__item {
  background: none;
  padding-left: 0;
}

.nav__item + .nav__item {
  margin-left: 1em;
  margin-top: 0;
}

.nav--vertical .nav__item + .nav__item {
  margin-left: 0;
  margin-top: .25em;
}

.nav--docs > .nav__list > .nav__item > .nav__link {
  font-weight: bold;
}

.nav__link {
  display: block;
  background: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F1f47e.png") no-repeat left 8px;
  background-size: 16px;
  padding: .25em .5em .25em 1.667em;
}

.nav__link.github {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Foctocat.png");
}

.nav__link.home {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F2b50.png");
}

.nav__link.examples {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F1f527.png");
}

.nav__link.docs {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F1f4d6.png");
}

.nav__link.download {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F2198.png");
}

.nav__link.changelog {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F1f4cb.png");
}

.nav__link.active {
  background-image: url("/?originalUrl=https%3A%2F%2Fgithub.githubassets.com%2Fimages%2Ficons%2Femoji%2Funicode%2F1f680.png");
  color: inherit;
}


/* Maxotron on Front Page */
.max {
  display: flex;
  flex-wrap: wrap;
  margin: 10px -10px;
}

.max__l {
  background: linear-gradient(to bottom, #fff, #cfbed1);
  border: 1px solid #78397E;
  border-radius: 1px;
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  margin: 10px;
  min-width: 5em;
  padding: 10px;
  text-align: center;
  text-shadow: 1px 1px rgba(255,255,255,.75);
}

.max__l:focus,
.max__l:hover {
  border-color: #66246C;
  box-shadow: 0 0 15px 1px #FFFEC5,
              inset 0 -3px 3px -2px #78397E;
}

.max__i {
  display: block;
  margin: 0 auto 10px;
  max-width: 64px;
}

.arcade-btn {
  display: block;
  line-height: 119px;
}
.arcade-btn:hover,
.arcade-btn:focus {
  box-shadow: none;
}
.arcade-btn:active {
}
.arcade-btn:before {
  content: url("/?originalUrl=https%3A%2F%2Fhyperform.js.org%2Fdownload%40120.png");
  margin-right: 10px;
  display: inline-block;
  width: 120px;
  height: 120px;
  vertical-align: top;
}
.arcade-btn:focus:before,
.arcade-btn:hover:before {
  content: url("/?originalUrl=https%3A%2F%2Fhyperform.js.org%2Fdownload-pressed%40120.png");
}