whippy-edition/app/assets/stylesheets/containers.scss

.container {
  width: 700px;
  margin: 0 auto;
  margin-top: 40px;

  @media screen and (max-width: 700px) {
    width: 100%;
    margin: 0;
  }
}

.mastodon-column-container {
  display: flex;
  height: 100%;
  width: 100%;

  // 707568 - height 100% doesn't work on child of a flex item - chromium - Monorail
  // https://bugs.chromium.org/p/chromium/issues/detail?id=707568
  flex: 1 1 auto;
}

.logo-container {
  max-width: 400px;
  margin: 100px auto;
  margin-bottom: 0;
  cursor: default;

  @media screen and (max-width: 360px) {
    margin: 30px auto;
  }

  h1 {
    display: block;
    text-align: center;
    color: $color5;
    font-size: 48px;
    font-weight: 500;

    img {
      display: block;
      margin: 20px auto;
      width: 180px;
      height: 180px;
    }

    a {
      color: inherit;
      text-decoration: none;
      outline: 0;

      img {
        opacity: 0.8;
        transition: opacity 0.8s ease;
      }

      &:hover {
        img {
          opacity: 1;
          transition-duration: 0.2s;
        }
      }
    }

    small {
      display: block;
      font-size: 12px;
      font-weight: 400;
      font-family: 'Roboto Mono', monospace;
    }
  }
}