neiltron/xylotron

footer {
  display: block;
  width: 100%;
  height: 10.09vh;
  line-height: 10vh;
  float: left;
  vertical-align: middle;
  background-color: #ddd;
  outline: 0;

  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

  h1, a {
    display: inline-block;
    float: left;
  }

  h1 {
    font-size: 1em;
    margin: 0 0 0 1em;
    font-weight: 900;
    vertical-align: middle;
    padding: 0 .5em 0 1em;

    @media screen and (max-width: $break-small) {
      margin-left: 0;
    }
  }

  a {
    color: #333;
    padding: 0 .5em;

    span {
      color: red;
    }

    &:visited {
      color: inherit;
    }

    &.play {
      display: none;

      &.active {
        display: inline-block;
      }
    }
  }

  .que {
    float: right;
    display: block;
    margin-right: 1em;

    @media screen and (max-width: $break-small) {
      margin-right: 0;
    }
  }

  @media screen and (max-width: $break-extrasmall) {
    text-align: center;
  }
}