@import '~@/assets/scss/variables';

.about-me-block {
  .about-me-ul {
    list-style: none;
    padding: 0;
  }

  .about-me-label {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    color: $gray;
  }

  .about-me-p {
    font-weight: 800;
    font-size: 1.5rem;
    color: $gray-dark;
  }

  .about-me-skill {
    display: flex;
    flex-flow: column wrap;

    .about-me-skill__dl {
      margin: 5px;
      padding: 5px;
      border: 2px solid $gray;
      border-radius: 0.5rem;
    }

    .about-me-skill__dd {
      margin: 0;
      display: flex;
      justify-content: space-between;
    }

    .skill-link {
      margin: 0;
      color: $gray;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .skill-score {
      flex: none;
    }

    @media only screen and (min-width: 768px) {
      max-height: 400px;

      .about-me-skill__dl {
        width: 180px;
      }

      .skill-score {
        .skill-score__span {
          margin: -2px;
          font-size: 18px;
        }
      }
    }
  }
}
