@font-face {
  font-family: 'PokemonGB';
  src: url(../fonts/PokemonGB.ttf); }
body {
  color: #000;
  font-family: 'PokemonGB';
  background-color: #7CC0D6; }
  body .view {
    max-width: 800px;
    margin: 2em auto; }
    body .view .main {
      text-align: center; }
      body .view .main .logo {
        width: 100%;
        margin: 1em 0 2em 0; }
      body .view .main .start {
        margin-top: 2em; }
    body .view .button {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      border: 2px solid #555;
      padding: .382em 1em;
      text-decoration: none;
      background-color: #fff;
      max-width: 10em;
      margin: 0 auto; }
      body .view .button img {
        width: 3em;
        height: 3em; }
      body .view .button:hover {
        cursor: pointer;
        background-color: #F7F7F7; }
      body .view .button:active {
        color: red; }
      body .view .button.replay {
        width: 10em;
        color: #000; }
      body .view .button.submit {
        max-width: 100%; }
  body .pokemon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 18px;
    text-align: center;
    width: 14em;
    padding: 2em;
    border: 10px solid #103D7E;
    border-radius: 5px;
    background-color: #3663AD;
    margin: 0 auto; }
    body .pokemon .progress {
      color: #FFCB08;
      align-self: flex-end; }
    body .pokemon .photo {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 0 0 18em;
      padding: 0 1em;
      border: 3px solid #103D7E;
      background-color: #fff; }
      body .pokemon .photo img {
        width: 12em; }
    body .pokemon input[type="text"] {
      font-size: 1.3em;
      padding: .382em .618em;
      margin: 1em 0 .382em;
      border-color: #103D7E; }
    body .pokemon .button {
      line-height: 1.618em;
      color: #2B54AA;
      background-color: #FFCB08;
      border: 2px solid #2B54AA; }
      body .pokemon .button:hover {
        background-color: #f2bf09; }
  body .story-text {
    color: #000;
    border: 3px solid #5F7077;
    background-color: #fff;
    padding: .382em .618em;
    margin-bottom: 1em; }
  body .results {
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 1px 1px 1px #5F7077; }
    body .results .question {
      display: flex;
      flex-direction: row;
      align-items: center;
      background-color: #3191D3;
      border: 2px solid #4B5065;
      border-radius: 6px;
      padding: .382em 1em;
      margin-bottom: .382em; }
      @media (min-width: 640px) {
        body .results .question {
          padding: 0 1em; } }
      body .results .question .thumbnail {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex: 0 0 20%;
        margin-right: 5%;
        background-color: #fff; }
        @media (min-width: 640px) {
          body .results .question .thumbnail {
            flex: 0 0 15%; } }
        body .results .question .thumbnail img {
          height: 5em; }
          @media (min-width: 640px) {
            body .results .question .thumbnail img {
              height: 3em; } }
      body .results .question .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto; }
        @media (min-width: 640px) {
          body .results .question .info {
            flex: 0 0 80%; } }
        body .results .question .info .name {
          flex: 0 0 40%;
          padding-bottom: .382em; }
          body .results .question .info .name .name-key {
            line-height: 1.618em; }
          body .results .question .info .name .response {
            font-size: .87em;
            margin-left: 1em; }
        @media (min-width: 640px) {
          body .results .question .info {
            flex-direction: row; }
            body .results .question .info .name {
              padding-bottom: 0; } }
        body .results .question .info .hp {
          flex: 0 1 40%;
          display: flex;
          flex-direction: column;
          max-width: 380px; }
          @media (min-width: 640px) {
            body .results .question .info .hp {
              align-items: flex-end; } }
          body .results .question .info .hp .level {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #FAC35F;
            background-color: #5F7077;
            width: 100%;
            padding: 3px;
            margin-bottom: .3em;
            border-radius: 6px; }
            body .results .question .info .hp .level .bar {
              flex: 1 1 auto;
              background-color: #4BD78F;
              height: 12px;
              border-radius: 4px; }
          @media (max-width: 640px) {
            body .results .question .info .hp .subtotal {
              align-self: flex-end; } }
      body .results .question.incorrect .response, body .results .question.partial .response {
        text-decoration: line-through; }
      body .results .question.incorrect .info .level .bar {
        background-color: #B43E15; }
      body .results .question.partial .info .level .bar {
        background-color: #FF9500; }

/*# sourceMappingURL=main.css.map */