@use 'sass:math';
@use '../../style/mixins' as *;

#about {
  box-shadow: var(--shadow);
  padding: var(--normal-margin);
  background-color: var(--accent-color);

  @include on-small-screen {
    :focus:not(:hover) {
      outline: var(--very-light-text-color) solid var(--line-width);
    }

    $img-size: 11rem;
    > .profile-picture {
      @include square($img-size);
      margin: auto;
    }

    > h1 {
      text-align: center;
      margin-top: calc(var(--line-height) + 4px);
    }
  }

  @include on-large-screen {
    $img-size: 12.5rem;

    width: var(--body-width);
    margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin)
      auto;
    border-radius: var(--border-radius);

    > .profile-picture {
      > .figure-container {
        @include square($img-size);

        position: absolute;
        left: calc(#{math.div(-$img-size, 3)} - var(--normal-margin));
        top: calc(#{math.div(-$img-size, 3)} - var(--normal-margin));
      }

      > .placeholder {
        @include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)}));
        box-sizing: content-box;
        float: left;
        margin: 0 0.75ex 0.2ex 0;
      }
    }

    > p {
      text-align: justify;
    }
  }

  ::selection {
    background-color: var(--very-light-text-color);
    color: var(--accent-color);
  }

  > h1,
  > .profile-picture > .placeholder {
    @include title-font();
  }

  > .profile-picture {
    position: relative;
    z-index: 1;

    .figure-container {
      &,
      > .image {
        border-radius: 100%;
      }
    }
  }

  > h1,
  > p,
  a {
    color: var(--very-light-text-color);

    :focus:not(:hover) {
      outline: var(--very-light-text-color) solid var(--line-width);
    }
  }

  > p {
    margin-top: var(--line-height);
  }

  a {
    border-bottom: 2px solid var(--very-light-text-color);
  }
}