arrayinamatrix.xyz/style/style.css

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
html {
    font-family: "Montserrat", sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
   }
   body {
    margin:0
   }
   article,
   aside,
   details,
   figcaption,
   figure,
   footer,
   header,
   hgroup,
   main,
   menu,
   nav,
   section,
   summary {
    display:block
   }
   audio,
   canvas,
   progress,
   video {
    display:inline-block;
    vertical-align:baseline
   }
   audio:not([controls]) {
    display:none;
    height:0
   }
   [hidden],
   template {
    display:none
   }
   a {
    background-color:transparent
   }
   a:active,
   a:hover {
    outline:0
   }
   abbr[title] {
    border-bottom:1px dotted
   }
   b,
   strong {
    font-weight:bold
   }
   dfn {
    font-style:italic
   }
   h1 {
    font-size:2em;
    margin:0.67em 0
   }
   mark {
    background:#ff0;
    color:#000
   }
   small {
    font-size:80%
   }
   sub,
   sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
   }
   sup {
    top:-0.5em
   }
   sub {
    bottom:-0.25em
   }
   img {
    border:0
   }
   svg:not(:root) {
    overflow:hidden
   }
   figure {
    margin:1em 40px
   }
   hr {
    box-sizing:content-box;
    height:0
   }
   pre {
    overflow:auto
   }
   code,
   kbd,
   pre,
   samp {
    font-family:monospace, monospace;
    font-size:1em
   }
   button,
   input,
   optgroup,
   select,
   textarea {
    color:inherit;
    font:inherit;
    margin:0
   }
   button {
    overflow:visible
   }
   button,
   select {
    text-transform:none
   }
   button,
   html input[type="button"],
   input[type="reset"],
   input[type="submit"] {
    -webkit-appearance:button;
    cursor:pointer
   }
   button[disabled],
   html input[disabled] {
    cursor:default
   }
   button::-moz-focus-inner,
   input::-moz-focus-inner {
    border:0;
    padding:0
   }
   input {
    line-height:normal
   }
   input[type="checkbox"],
   input[type="radio"] {
    box-sizing:border-box;
    padding:0
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
    height:auto
   }
   input[type="search"] {
    -webkit-appearance:textfield;
    box-sizing:content-box
   }
   input[type="search"]::-webkit-search-cancel-button,
   input[type="search"]::-webkit-search-decoration {
    -webkit-appearance:none
   }
   fieldset {
    border:1px solid #c0c0c0;
    margin:0 2px;
    padding:0.35em 0.625em 0.75em
   }
   legend {
    border:0;
    padding:0
   }
   textarea {
    overflow:auto
   }
   optgroup {
    font-weight:bold
   }
   table {
    border-collapse:collapse;
    border-spacing:0
   }
   td,
   th {
    padding:0
   }
   * {
    box-sizing:border-box
   }
   body {
    padding:0;
    margin:0;
    font-family: "Montserrat", sans-serif;
    font-size:16px;
    line-height:1.5;
    color:#606c71
   }
   #skip-to-content {
    height:1px;
    width:1px;
    position:absolute;
    overflow:hidden;
    top:-10px
   }
   #skip-to-content:focus {
    position:fixed;
    top:10px;
    left:10px;
    height:auto;
    width:auto;
    background:#e19447;
    outline:thick solid #e19447
   }
   a {
    color:#1e6bb8;
    text-decoration:none
   }
   a:hover {
    text-decoration:underline
   }
   .btn {
    display:inline-block;
    margin-bottom:1rem;
    color:rgba(255,255,255,0.7);
    background-color:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.2);
    border-style:solid;
    border-width:1px;
    border-radius:0.3rem;
    transition:color 0.2s, background-color 0.2s, border-color 0.2s
   }
   .btn:hover {
    color:rgba(255,255,255,0.8);
    text-decoration:none;
    background-color:rgba(255,255,255,0.2);
    border-color:rgba(255,255,255,0.3)
   }
   .btn+.btn {
    margin-left:1rem
   }
   @media screen and (min-width: 64em) {
    .btn {
     padding:0.75rem 1rem
    }
   }
   @media screen and (min-width: 42em) and (max-width: 64em) {
    .btn {
     padding:0.6rem 0.9rem;
     font-size:0.9rem
    }
   }
   @media screen and (max-width: 42em) {
    .btn {
     display:block;
     width:100%;
     padding:0.75rem;
     font-size:0.9rem
    }
    .btn+.btn {
     margin-top:1rem;
     margin-left:0
    }
   }
   .page-header {
    color:#fff;
    text-align:center;
   }
   @-webkit-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-moz-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-o-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-webkit-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @-moz-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @-o-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
   body {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABbmlDQ1BpY2MAACiRdZE7SwNBFIW/RCWikRRaBLHYQsVCJSiIpcbCJkiICr6aZPMSNuuyu0HEVrCxCFiINr4K/4G2gq2CICiCiI1/wFcjYb2TBBJEZ5m9H2fmXGbOgD9m6AWnOQIF07UT01FtYXFJC7wSIEwnw/iSumNNxuMx/h1f9/hUvRtSvf7f9+doT2ccHXytwmO6ZbvCE8KxdddSvCPcpeeTaeEj4UFbDih8rfRUlV8U56r8odieS0yBX/XUcg2camA9bxeEB4R7C0ZRr51H3SSYMednpXbL7MEhwTRRNFIUWcXAZUiqKZn97YtUfDOsiUeXv8UGtjhy5MU7KGpRumakZkXPyGewoXL/naeTHR2pdg9GoeXZ8977ILAL5ZLnfR97XvkEmp7g0qz71ySn8U/RS3Wt9xBCW3B+VddSe3CxDeFHK2knK1KTTH82C29n0LEInbfQtlzNqrbO6QPMbcoT3cD+AfTL/tDKD92VZ/plHO89AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAuElEQVRoBe3awQ2CQABEUbUEbJEEi5ISpQVETuY38LPkk5gwp9mdx9H7srz2dX3fpul5G/XZts959H2e5/14G/Z3nv+QGPYC/+M/Rv2ceO4uwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+xPhInZOxBZgfyJcxM6J2ALsT4SL2DkRW4D9iXAROydiC7A/ES5i50RsAfYnwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+y8j8rvYJf6v9QVf2KG69fWg3gAAAABJRU5ErkJggg==") repeat 0 0;
    -webkit-animation: bg-scrolling-reverse 0.92s infinite;
    /* Safari 4+ */
    -moz-animation: bg-scrolling-reverse 0.92s infinite;
    /* Fx 5+ */
    -o-animation: bg-scrolling-reverse 0.92s infinite;
    /* Opera 12+ */
    animation: bg-scrolling-reverse 0.92s infinite;
    /* IE 10+ */
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
   }
   @media screen and (min-width: 64em) {
    .page-header {
     padding:5rem 6rem
    }
   }
   @media screen and (min-width: 42em) and (max-width: 64em) {
    .page-header {
     padding:3rem 4rem
    }
   }
   @media screen and (max-width: 42em) {
    .page-header {
     padding:2rem 1rem
    }
   }
   .project-name {
    margin-top:0;
    margin-bottom:0.1rem
   }
   @media screen and (min-width: 64em) {
    .project-name {
     font-size:3.25rem
    }
   }
   @media screen and (min-width: 42em) and (max-width: 64em) {
    .project-name {
     font-size:2.25rem
    }
   }
   @media screen and (max-width: 42em) {
    .project-name {
     font-size:1.75rem
    }
   }
   .project-tagline {
    margin-bottom:2rem;
    font-weight:normal;
    opacity:0.7
   }
   @media screen and (min-width: 64em) {
    .project-tagline {
     font-size:1.25rem
    }
   }
   @media screen and (min-width: 42em) and (max-width: 64em) {
    .project-tagline {
     font-size:1.15rem
    }
   }
   @media screen and (max-width: 42em) {
    .project-tagline {
     font-size:1rem
    }
   }
   .main-content {
    word-wrap:break-word;
    background-color: #fff;
   }
   .main-content :first-child {
    margin-top:0
   }
   @media screen and (min-width: 64em) {
    .main-content {
     max-width:64rem;
     padding:2rem 6rem;
     margin:0 auto;
     font-size:1.1rem
    }
   }
   @media screen and (min-width: 42em) and (max-width: 64em) {
    .main-content {
     padding:2rem 4rem;
     font-size:1.1rem
    }
   }
   @media screen and (max-width: 42em) {
    .main-content {
     padding:2rem 1rem;
     font-size:1rem
    }
   }
   .main-content kbd {
    background-color:#fafbfc;
    border:1px solid #c6cbd1;
    border-bottom-color:#959da5;
    border-radius:3px;
    box-shadow:inset 0 -1px 0 #959da5;
    color:#444d56;
    display:inline-block;
    font-size:11px;
    line-height:10px;
    padding:3px 5px;
    vertical-align:middle
   }
   .main-content img {
    max-width:100%
   }
   .main-content h1,
   .main-content h2,
   .main-content h3,
   .main-content h4,
   .main-content h5,
   .main-content h6 {
    margin-top:2rem;
    margin-bottom:1rem;
    font-weight:normal;
    color:#000;
   }
   .main-content p {
    margin-bottom:1em
   }
   .main-content code {
    padding:2px 4px;
    font-family: "Montserrat", sans-serif;
    font-size:0.9rem;
    color:#567482;
    background-color:#f3f6fa;
    border-radius:0.3rem
   }
   .main-content pre {
    padding:0.8rem;
    margin-top:0;
    margin-bottom:1rem;
    font:1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
    color:#567482;
    word-wrap:normal;
    background-color:#f3f6fa;
    border:solid 1px #dce6f0;
    border-radius:0.3rem
   }
   .main-content pre>code {
    padding:0;
    margin:0;
    font-size:0.9rem;
    color:#567482;
    word-break:normal;
    white-space:pre;
    background:transparent;
    border:0
   }
   .main-content .highlight {
    margin-bottom:1rem
   }
   .main-content .highlight pre {
    margin-bottom:0;
    word-break:normal
   }
   .main-content .highlight pre,
   .main-content pre {
    padding:0.8rem;
    overflow:auto;
    font-size:0.9rem;
    line-height:1.45;
    border-radius:0.3rem;
    -webkit-overflow-scrolling:touch
   }
   .main-content pre code,
   .main-content pre tt {
    display:inline;
    max-width:initial;
    padding:0;
    margin:0;
    overflow:initial;
    line-height:inherit;
    word-wrap:normal;
    background-color:transparent;
    border:0
   }
   .main-content pre code:before,
   .main-content pre code:after,
   .main-content pre tt:before,
   .main-content pre tt:after {
    content:normal
   }
   .main-content ul,
   .main-content ol {
    margin-top:0
   }
   .main-content blockquote {
    padding:0 1rem;
    margin-left:0;
    color:#819198;
    border-left:0.3rem solid #dce6f0
   }
   .main-content blockquote>:first-child {
    margin-top:0
   }
   .main-content blockquote>:last-child {
    margin-bottom:0
   }
   .main-content table {
    display:block;
    width:100%;
    overflow:auto;
    word-break:normal;
    word-break:keep-all;
    -webkit-overflow-scrolling:touch
   }
   .main-content table th {
    font-weight:bold
   }
   .main-content table th,
   .main-content table td {
    padding:0.5rem 1rem;
    border:1px solid #e9ebec
   }
   .main-content dl {
    padding:0
   }
   .main-content dl dt {
    padding:0;
    margin-top:1rem;
    font-size:1rem;
    font-weight:bold
   }
   .main-content dl dd {
    padding:0;
    margin-bottom:1rem
   }
   .main-content hr {
    height:2px;
    padding:0;
    margin:1rem 0;
    background-color:#eff0f1;
    border:0
   }
   .site-footer {
    padding-top:2rem;
    margin-top:2rem;
    border-top:solid 1px #eff0f1
   }
   @media screen and (min-width: 64em) {
    .site-footer {
     font-size:1rem
    }
   }
   @media screen and (min-width: 42em) and (max-width: 64em) {
    .site-footer {
     font-size:1rem
    }
   }
   @media screen and (max-width: 42em) {
    .site-footer {
     font-size:0.9rem
    }
   }
   .site-footer-owner {
    display:block;
    font-weight:bold
   }
   .site-footer-credits {
    color:#819198
   }
   .gameButton {
    font-size: 400%;
    text-align: center;
      background-color:rgba(0,0,0,0.08);
   }
  .game {
    text-align: center;
  }