@import url("https://fonts.googleapis.com/css?family=Titillium+Web&display=swap");
@font-face {
  font-family: "Apax-Medium";
  src: url("/assets/Apax-Medium.otf"); }

@font-face {
  font-family: "nasaliza";
  src: url("/assets/nasaliza.woff"); }

@font-face {
  font-family: "suisse";
  src: url("/assets/SuisseIntl-Book.otf"); }

body {
  font-size: 1em;
  line-height: 1.3em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: suisse, sans-serif; }
  @media (min-width: 600px) {
    body {
      font-size: 1.2em; } }
  @media (min-width: 1400px) {
    body {
      font-size: 2em; } }

h3 {
  text-align: center;
  padding-top: .25em;
  margin-bottom: .75em;
  color: white;
  letter-spacing: .075em;
  font-size: 20px; }

.save-stat span,
label {
  display: inline-block; }

h2 {
  font-size: 5em; }

body.gameOver #gameover h2,
h4,
.countdown {
  font-size: 3em;
  line-height: 1em; }
  @media (min-width: 1400px) {
    body.gameOver #gameover h2,
    h4,
    .countdown {
      font-size: 4em; } }

.buttons button,
form input {
  font-size: 1em; }

.notification,
.disclaimer {
  font-size: 18px;
  line-height: 1.3em;
  color: #b4b4b4; }
  .notification a,
  .disclaimer a {
    color: #b4b4b4;
    transition: .25s color; }
    .notification a:hover,
    .disclaimer a:hover {
      color: blue; }

@media (min-width: 900px) {
  #loadText,
  button {
    font-size: 3vw; } }

body.loading header .title h1 {
  font-size: 25px;
  line-height: 1.2em;
  font-weight: 900; }
  @media (min-width: 900px) {
    body.loading header .title h1 {
      font-size: 6vw; } }

body.loading header .title p {
  margin-bottom: 1em; }

header {
  font-weight: 400;
  color: black; }
  header .title h1 {
    transform: font-size .25s; }
  header .title p {
    display: none; }
  header.info {
    margin: 4px 20px 6px;
    position: relative;
    color: black; }
    header.info .timer {
      position: absolute;
      top: 0;
      text-align: center;
      left: 50%;
      width: 100px;
      margin-left: -50px; }
    header.info .moves {
      position: absolute;
      right: 0px;
      top: 0px; }
    header.info span.hide {
      display: none; }
    @media (max-width: 600px) {
      header.info span.hide {
        display: none; } }

.ranking {
  display: block;
  z-index: 9999;
  padding-bottom: 5em; }
  .ranking table tr {
    border: solid 1px;
    transition: background .25s; }
    .ranking table tr:hover {
      background: #141414; }
    .ranking table tr th,
    .ranking table tr td {
      padding: .15em 0 .25em; }
    .ranking table tr th {
      background: white;
      color: black; }
      .ranking table tr th:nth-child(2) {
        text-align: left; }
    .ranking table tr td {
      width: 15%;
      text-align: center; }
      .ranking table tr td:nth-child(2) {
        text-align: left; }
      .ranking table tr td:nth-child(2), .ranking table tr td:nth-child(4) {
        width: 35%; }

#gameover {
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1.3em;
  color: white;
  background: #0f0f0f;
  padding-top: 2em; }
  #gameover h2 {
    color: black;
    text-align: center;
    transition: font-size .25s; }
  #gameover p {
    margin-bottom: 1em; }
  #gameover .save-stat {
    margin: 2em 20px; }
    #gameover .save-stat .high-score > * {
      color: #646464; }
    #gameover .save-stat div > span {
      display: inline-block; }
      #gameover .save-stat div > span:first-child {
        width: 80px; }
  #gameover form {
    margin-top: 1em; }
    #gameover form > * {
      display: inline-block; }
      #gameover form > *:first-child {
        width: 80px; }
    #gameover form input {
      width: 200px;
      margin-bottom: 1em;
      background: #191919;
      border: none;
      color: white; }
  #gameover button {
    margin: 1em .25em .5em; }
    #gameover button.success {
      cursor: default;
      background: #141414; }
      #gameover button.success:hover {
        color: black; }
  #gameover .notification {
    color: green; }
  #gameover .disclaimer {
    margin-top: 3em; }
  @media (min-width: 1200px) {
    #gameover .save-stat {
      width: 900px;
      margin: 2em auto 2em; }
      #gameover .save-stat .flex-container {
        display: flex;
        justify-content: space-between; }
    #gameover .save-stat div > span:first-child {
      width: 180px; }
    #gameover .save-stat form > *:first-child {
      width: 180px; } }

#memory {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0px 0;
  height: calc(90vh - (1em + 40px));
  background: #0a0a0a;
  border-top: solid 1px #969696;
  overflow: hidden;
  padding: 20px 20px 10vh; }
  #memory > * {
    flex: 0 1 calc(25vw - 20px);
    margin-bottom: 15px;
    position: relative;
    cursor: pointer; }
    #memory > *.selected > *,
    #memory > *.selected > *:hover, #memory > *.spotted > *,
    #memory > *.spotted > *:hover {
      transform: rotateY(180deg); }
    #memory > * > * {
      transform-style: preserve-3d;
      border-radius: 5px;
      position: absolute;
      width: 100%;
      height: 100%;
      transition: transform .25s;
      box-shadow: 0 0 10px black; }
      #memory > * > *:hover {
        transform: rotateY(20deg) skew(0deg, 1deg); }
      #memory > * > * figure,
      #memory > * > * .back {
        border-radius: 5px;
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden; }
      #memory > * > * .back {
        font-family: nasaliza, Helvetica, sans-serif;
        transition: background .5s;
        background: linear-gradient(90deg, #1e1e1e, #1e1e1e);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center; }
        #memory > * > * .back span {
          color: #0a0a0a;
          font-size: 2vw;
          line-height: 0.85em;
          letter-spacing: .04em;
          width: 100%;
          text-align: center; }
        #memory > * > * .back img {
          display: none;
          width: 30%;
          max-width: 200px; }
      #memory > * > * figure {
        transform: rotateY(180deg); }
  #memory figure {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black; }
    #memory figure img {
      width: 100%; }
  @media (min-aspect-ratio: 1 / 1) {
    #memory {
      height: calc(100vh - (1em + 40px));
      padding: 20px 20px 10px; }
      #memory > * {
        flex: 0 1 calc(25vw - 20px); } }
  @media (min-aspect-ratio: 3 / 2) {
    #memory > * {
      flex: 0 1 calc(20vw - 20px); } }

#loader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: black; }
  #loader figure.satelite {
    position: fixed;
    left: -4vw;
    z-index: 99999;
    animation: satelite 50s linear infinite;
    top: 10vh; }
    #loader figure.satelite img {
      display: block;
      width: 4vw; }
  #loader figure.rocket {
    position: fixed;
    bottom: -20vh;
    right: 20vw;
    transition: bottom 1.25s ease-in;
    z-index: 999; }
    #loader figure.rocket:after {
      height: 20vh;
      content: "";
      position: relative;
      display: block;
      transition: height .25s; }
    #loader figure.rocket img {
      width: 3.5vw;
      transition: border-bottom 1s ease-in; }
    #loader figure.rocket.launch {
      bottom: 100vh; }
      #loader figure.rocket.launch:after {
        background: linear-gradient(yellow, black); }
  #loader #loadText i {
    opacity: 0;
    animation: loader .6s infinite; }
    #loader #loadText i:nth-child(2) {
      animation: loader .6s infinite .2s; }
    #loader #loadText i:nth-child(3) {
      animation: loader .6s infinite .4s; }
  #loader #loadText,
  #loader button {
    color: white;
    line-height: 1em;
    position: absolute;
    bottom: 10vh;
    left: 5vw;
    z-index: 999; }
  #loader button {
    display: none;
    color: black;
    padding: .15em .3em .2em; }
  #loader span {
    position: absolute;
    display: block;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(250, 250, 250, 0.2); }
    #loader span:nth-child(1) {
      animation: shootingstar 0.75s ease-out 2s forwards;
      box-shadow: none; }
    #loader span:nth-child(2) {
      animation: shootingstar 0.75s ease-out 5s forwards;
      box-shadow: none; }
    #loader span:nth-child(3) {
      animation: shootingstar 0.75s ease-out 12s forwards;
      box-shadow: none; }
    #loader span:nth-child(4) {
      animation: shootingstar 0.75s ease-out 16s forwards;
      box-shadow: none; }
    #loader span:nth-child(5) {
      animation: shootingstar 0.75s ease-out 34s forwards;
      box-shadow: none; }
    #loader span:nth-child(6) {
      animation: shootingstar 0.75s ease-out 40s forwards;
      box-shadow: none; }

body.loading header .title {
  position: fixed;
  top: 15vh;
  left: 5vw;
  right: 5vw;
  z-index: 9999;
  color: white; }
  body.loading header .title h1 {
    margin-bottom: .5em; }
    body.loading header .title h1 span {
      display: inline; }
  body.loading header .title p {
    display: block; }
    body.loading header .title p a {
      color: white; }

@keyframes flicker {
  0% {
    background: white; }
  3% {
    background: black; }
  6% {
    background: white; }
  3% {
    background: black; }
  4% {
    background: white; }
  5% {
    background: black; }
  6% {
    background: white; }
  100% {
    background: white; } }

@keyframes shootingstar {
  1% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(500px, 100px); } }

@keyframes satelite {
  100% {
    transform: rotate(360deg);
    left: 100vw; } }

@keyframes loader {
  0%,
  60% {
    opacity: .2; }
  80% {
    opacity: 1; } }

@keyframes fire {
  0% {
    height: 10vh; }
  80% {
    height: 20vh; } }

.content-wrapper {
  background: black; }
  .content-wrapper nav#contentNav {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    background: #0f0f0f;
    border-bottom: solid 1px white; }
    .content-wrapper nav#contentNav div {
      flex: 0 1 calc(50% - 10px);
      text-align: center;
      padding: .5em 0 .65em;
      background: #191919;
      color: white;
      transition: background .25s, color .25s, border-bottom .25s;
      border: solid 1px white;
      margin-bottom: -1px;
      cursor: pointer; }
      .content-wrapper nav#contentNav div.active {
        border-bottom: solid 1px black;
        background: black;
        color: white; }
  .content-wrapper .content-child {
    height: 0;
    overflow: hidden;
    opacity: 0; }
    .content-wrapper .content-child.active {
      height: auto;
      opacity: 1; }
  .content-wrapper table {
    margin: 1em 20px 0;
    width: calc(100% - 40px); }
  .content-wrapper .images-info ul {
    margin: 2em 20px 0; }
    .content-wrapper .images-info ul li {
      margin-bottom: 2em; }
      .content-wrapper .images-info ul li h4 {
        margin-bottom: .25em; }
      .content-wrapper .images-info ul li img,
      .content-wrapper .images-info ul li span {
        display: block; }
      .content-wrapper .images-info ul li span {
        margin-bottom: 1em; }
      .content-wrapper .images-info ul li img {
        max-width: 100%;
        margin-bottom: .5em; }
  @media (min-width: 1200px) {
    .content-wrapper table {
      margin: 1em auto 0; }
    .content-wrapper .images-info ul li {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: flex-start;
      padding-bottom: 2em; }
      .content-wrapper .images-info ul li h4 {
        flex: 0 1 100%; }
      .content-wrapper .images-info ul li .wrapper {
        flex: 0 1 35%; }
      .content-wrapper .images-info ul li img {
        width: calc(60% - 2px);
        flex: 0 1 calc(60% - 2px);
        margin-top: .35em;
        margin-left: 5%;
        border: solid 1px white; }
    .content-wrapper .ranking {
      width: 900px;
      margin: 2em auto 0; }
      .content-wrapper .ranking table {
        width: 100%; } }

.countdown {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  color: white;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center; }
  .countdown span {
    width: 50%;
    text-align: center; }

body {
  background: white;
  color: #c8c8c8;
  transition: background .05s ease-out; }
  body.gameOver #gameover h2 {
    color: white; }

button {
  background: white;
  color: black;
  border: none;
  padding: .1em .5em .2em;
  border-radius: 10px;
  cursor: pointer;
  transition: background .3s, color .3s; }
  button:hover {
    background: blue;
    color: white; }