.lobby {
  .centurion-title {
    text-align: center;

    font-size: 2.5rem;
    min-height: inherit;

    .text {
      padding: 0 2rem;
    }

    .beer {
      animation-fill-mode: forwards;
      max-width: 120%;
      max-height: 120%;

      &.connecting {
        animation: spin 0.4s ease-in-out 25;
      }

      @keyframes spin {
        100% {
          transform: rotate(-360deg);
        }
      }
    }
  }

  .beer-flipped {
    transform: scaleX(-1);
  }

  .lobby-connecting {
    margin: 2em 0 0 0;
    text-align: center;
  }

  .hints {
    margin: 1rem 0 0 0;
    font-size: 1.5rem;
    text-align: center;
  }

  .control {
    font-size: 1.3rem;
    margin: 2em 1em 2em 1em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }

  .lobby-options-or {
    display: inline-block;
    position: relative;

    margin: 16px 0;
    color: #888;

    &:before,
    &:after {
      content: "";
      width: 1px;
      height: 6px;
      position: absolute;
      left: 50%;
      margin-left: 0.1px;
      background: #bbb;
    }

    &:before {
      bottom: 100%;
    }

    &:after {
      top: 100%;
    }
  }
}
