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

#about {
  text-align: center;
  box-shadow: var(--shadow);
  padding: var(--normal-margin);
  background-color: var(--accent-color);
  font-size: 0;

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

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

  $img-size: 125px;
  .image {
    @include square($img-size);
    border-radius: 100%;
    box-shadow: var(--shadow);
    margin: auto;
  }

  p {
    text-align: justify;
  }

  h1 {
    hyphens: none;
  }

  p,
  h1 {
    color: var(--very-light-text-color);
    margin-top: var(--line-height);
  }

  @include on-small-screen {
    :focus:not(:hover) {
      outline: var(--very-light-text-color) solid 3px !important;
    }
  }

  @include on-large-screen {
    $img-size: 190px;

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

    .image {
      @include square($img-size);
      position: absolute;
      left: 0;
      top: 0;
      transform: translateY(math.div(-$img-size, 3)) translateX(math.div(-$img-size, 3));
    }

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

    h1 {
      text-align: left;
      margin-top: 0;
    }
  }
}