@import "open-props/open-props.min.css";
@import "open-props/colors-hsl.min.css";
@import "open-props/normalize.light.min.css";

@import "./variables.css";
@import "./overrides.css";
@import "./utilities.css";
@import "./hero.css";
@import "./card.css";
@import "./gallery.css";
@import "./svg.css";
@import "./header.css";

html {
  scroll-padding-top: var(--size-10);
}

body {
  letter-spacing: var(--font-letterspacing-2);
}

body > footer {
  display: flex;
  flex-direction: column;
  gap: var(--size-fluid-7);
  background-color: var(--black);
  align-items: center;
  padding-block: var(--size-fluid-7);
}

body > footer > small {
    display: block;
    white-space: nowrap;
    color: white;
  }

body > footer > address {
    display: flex;
    gap: var(--size-8);
    text-align: center;
  }

body > footer > address > a {
      --offset: 20px;

      position: relative;
      flex: 1 0 33%;
      padding: var(--size-fluid-3);
      background-color: white;
      border-radius: var(--radius-2);
      -webkit-border-after: var(--border);
              border-block-end: var(--border);
      font-style: initial;
      font-size: var(--font-size-0);
      white-space: nowrap;
    }

body > footer > address > a:hover {
        text-decoration: none;
      }

body > footer > address > a::before,
      body > footer > address > a::after {
        content: "";
        display: block;
        width: 50%;
        margin-inline: auto;
        padding-block: var(--offset);
        color: var(--text-1);
      }

body > footer > address > a::before {
        -webkit-border-after: var(--border);
                border-block-end: var(--border);
        text-transform: uppercase;
        position: relative;
        margin-block: var(--offset);
      }

body > footer > address > a::after {
        position: absolute;
        top: calc(2 * var(--offset));
        left: 0;
        right: 0;
        background-color: var(--brand);
        -webkit-mask-position: center top;
                mask-position: center top;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
      }

body > footer > address > a[href^="mailto"]::after {
      -webkit-mask-image: var(--email-icon);
              mask-image: var(--email-icon);
    }

body > footer > address > a[href^="tel"]::after {
      -webkit-mask-image: var(--phone-icon);
              mask-image: var(--phone-icon);
    }

body > footer > address > a[href*="maps"]::after {
      -webkit-mask-image: var(--maps-icon);
              mask-image: var(--maps-icon);
    }

body > footer > address > a[href^="mailto"]::before {
      content: "email";
    }

body > footer > address > a[href^="tel"]::before {
      content: "phone";
    }

body > footer > address > a[href*="maps"]::before {
      content: "address";
    }

body > main > article {
  max-inline-size: var(--max-size);
  margin-inline: auto;
  margin-block: var(--size-fluid-5);
}

#about > :where(h2, p) {
    max-inline-size: var(--size-md);
    margin-inline: auto;
  }

#about > :where(h2) {
    -webkit-margin-after: var(--size-5);
            margin-block-end: var(--size-5);
  }

#about:after {
    content: "";
    display: block;
    background-image: url("/assets/images/Intronic Test Application.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    height: var(--size-sm);
    -webkit-padding-before: var(--size-fluid-5);
            padding-block-start: var(--size-fluid-5);
  }