body {
  font-family: "freight-big-pro";
  font-weight: 400;
  font-size: 18px;
  color: #292929;
  position: relative;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased; }

* {
  text-rendering: optimizeLegibility; }

figure {
  display: inline-block;
  margin: 0; }

#app {
  display: inline-block;
  width: 100%;
  padding: 5em;
  box-sizing: border-box; }
  #app h1 {
    font-size: 1.35em;
    letter-spacing: 0.2em;
    font-weight: 300;
    text-transform: uppercase;
    margin: 0; }
    #app h1:after {
      content: '';
      display: block;
      border-top: 1px solid #b8a45f;
      width: 2rem;
      margin: 1rem 0; }
  #app figure {
    cursor: pointer;
    margin-right: 0.25em; }
    #app figure:hover img {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg); }
    #app figure img {
      position: relative;
      top: 2px;
      width: 0.85em;
      height: 0.85em;
      -webkit-transition: 1s all cubic-bezier(0.23, 1, 0.32, 1);
      transition: 1s all cubic-bezier(0.23, 1, 0.32, 1); }
  #app .input {
    display: inline-block;
    color: #292929; }
    #app .input .string {
      position: relative;
      -webkit-transition: 1s all cubic-bezier(0.23, 1, 0.32, 1);
      transition: 1s all cubic-bezier(0.23, 1, 0.32, 1);
      left: -10em;
      opacity: 0; }
    #app .input.move .string {
      opacity: 0.5;
      left: 0; }
  #app .sentence {
    display: inline-block; }
  #app .key {
    color: #b8a45f; }

@media screen and (max-width: 30em) {
  body {
    font-size: 24px; }
  #app {
    padding: 2em; } }
/*# sourceMappingURL=style.css.map */