@import 'mobile';
@import 'variables';

$icon-size: 40px;
$title-font-size: 40px;
$build-version-font-size: 12px;
$link-color: #56b0ff;

.about {
  .about-inner-container {
    background-color: $light-row-color;
    padding: $ui-large-margin;
    border: 1px solid $border-color;
    width: fit-content;

    .livesplit-title {
      display: flex;
      align-items: center;

      .livesplit-icon {
        height: $icon-size;
        margin-right: $ui-margin;

        img {
          height: 100%;
        }
      }

      .title-text {
        font-weight: bold;
        font-size: $title-font-size;
      }
    }

    .build-version {
      font-size: $build-version-font-size;
    }

    h2 {
      margin-bottom: $ui-large-margin;
    }

    a {
      color: $link-color;
    }

    .changelog {
      margin-left: $ui-large-margin;

      >div {
        margin: $ui-large-margin 0 $ui-large-margin $ui-large-margin;
      }
    }

    .contributors {
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: space-evenly;
      align-items: end;
      font-size: 14px;

      a {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 4px;

        img {
          width: $contributor-avatar-size;
          height: $contributor-avatar-size;
          border-radius: 50%;
        }
      }
    }

    @include mobile {
      box-sizing: border-box;
    }
  }

  max-width: 700px;

  @include mobile {
    max-width: 100%;
  }
}
