/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');

/* Define CSS Variables */
:root {
    --font-family: 'Atkinson Hyperlegible Next', sans-serif;
    --light-coral: #ef7674ff;
    --reseda-green: #748b75ff;
    --azure-web: #e6fdffff;
    --eggplant: #6c4b5eff;
    --gunmetal: #153131ff;
    --font-size: 20px;
}

/* Global Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: #fff;
    color: var(--gunmetal);
    display: grid;
    font-size: var(--font-size);
    grid-template-rows: auto 1fr auto;
    line-height: 1.5;
    min-height: 100vh;
}

.no-scroll {
  overflow: hidden;
}

a[href^='mailto'] {
  align-items: baseline;
  display: inline-flex;

  &:before {
    content: url('data:image/svg+xml,<svg enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="%236c4b5e"><g id="Glyph_copy_2"><path d="M63.125,9.977c-0.902-1.321-2.419-2.194-4.131-2.194H5.006c-1.676,0-3.158,0.842-4.067,2.117l31.16,25.982L63.125,9.977z"/><path d="M0.006,14.328v36.889c0,2.75,2.25,5,5,5h53.988c2.75,0,5-2.25,5-5V14.461L32.099,41.09L0.006,14.328z"/></g></svg>');
    display: inline-block;
    height: 0.8em;
    margin-inline: 0.25em;
    width: 0.8em;
  }
}

a[href^='tel'] {
  align-items: baseline;
  display: inline-flex;

  &:before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236c4b5e"><title>phone-call</title><path class="cls-2" d="M13,8a3,3,0,0,1,3,3,1,1,0,0,0,2,0,5,5,0,0,0-5-5,1,1,0,0,0,0,2Z"/><path class="cls-2" d="M13,4a7,7,0,0,1,7,7,1,1,0,0,0,2,0,9,9,0,0,0-9-9,1,1,0,0,0,0,2Z"/><path class="cls-2" d="M21.75,15.91a1,1,0,0,0-.72-.65l-6-1.37a1,1,0,0,0-.92.26c-.14.13-.15.14-.8,1.38a9.91,9.91,0,0,1-4.87-4.89C9.71,10,9.72,10,9.85,9.85a1,1,0,0,0,.26-.92L8.74,3a1,1,0,0,0-.65-.72,3.79,3.79,0,0,0-.72-.18A3.94,3.94,0,0,0,6.6,2,4.6,4.6,0,0,0,2,6.6,15.42,15.42,0,0,0,17.4,22,4.6,4.6,0,0,0,22,17.4a4.77,4.77,0,0,0-.06-.76A4.34,4.34,0,0,0,21.75,15.91Z"/></svg>');
    display: inline-block;
    height: 0.8em;
    margin-inline: 0.25em;
    width: 0.8em;
  }
}

.layout-flex-h,
.layout-flex-h-r {
  align-items: center;
  display: flex;
  gap: 1em;
}
.layout-flex-h-r {
  flex-direction: row-reverse;
}

.layout-flex-v {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.layout-flex-v-r {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.4em;
}