YuruToot/app/javascript/styles/containers.scss

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

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

.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: $primary-text-color;
    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: 'mastodon-font-monospace', monospace;
    }
  }
}