@import "../../assets/scss/variables";

.component-about {
  z-index: 0;

  .content {
    position: relative;
    margin: 150px auto 80px auto;
    padding: 40px 50px;
    font-size: $font-18;
    text-align: justify;
    background: $white-alpha;
    color: $black;
    box-shadow: 0px 0px 25px $white-alpha;
    border-radius: 10px;

    .about-links {
      color: $black;

      .link {
        display: flex;
        text-decoration: none;
        margin: 0;
        padding: 0;
        line-height: 35px;
        width: 200px;
        transition: transform .3s;
        -webkit-backface-visibility: hidden;

        .icon {
          display: inline-block;
          font-size: 15px;
          padding: 5px;
          margin: 5px;
          background: $dark-gray;
          border-radius: 2px;
          color: $white;
          height: 25px;
          width: 25px;
          text-align: center;
        }

        .label {
          display: inline-block;
          color: $dark-gray;
          font-size: $font-16;
          padding-left: 5px;

        }

        &:hover {
          transform: scale(1.1);
        }
      }
    }

    .back {
      position: absolute;
      top: -40px;
      left: 0px;
      height: 40px;
      width: 60px;
      appearance: none;
      border: none;
      padding: 0;
      font-size: $font-40;
      color: $black-alpha;
      background: transparent;
      cursor: pointer;
      transition: transform .3s;
      -webkit-backface-visibility: hidden;

      &:hover {
        transform: scale(1.1) translateX(-10px);
      }
    }
  }
}

@media (min-width: map-get($grid-breakpoints, 'md')) {
 .component-about {
    .content {
      transform: rotate(2deg) skew(0deg, -6deg);
    }
  }
}