.main-nav,.about-nav {
    display: inline;
}
.about-nav {
    /* again, px one is a fallback */
    font-size: var(--base-font-size)*2;
    font-size: 3.75vmin;
    width: 100%;
    margin-left: 2.5%;
    font-weight: 300;
    min-height: 0px;
}
.nav-active {
    font-weight: 450;
}
header,footer {
    font-family: var(--header-font-family);
    font-weight: 400;
    width: 95%;
    margin-top: calc(var(--spacing-unit)/3);
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    /* prevents title from flowing into the header */
    min-height: calc(var(--spacing-unit)*3);

    a {
        text-decoration-line: none;
        /* vertical-align: top; */
        color: var(--grey-colour);

        &:link, :visited {
            color: var(--grey-colour);
        }
        &:hover {
            color: var(--grey-colour-light) !important;
        }
        &:active {
            color: var(--text-colour) !important;
        }
    }
    ul {
        list-style: none;
        display: flex;
        gap: clamp(0.5rem,0.75rem,2rem);
        margin: 0;
        padding-inline: 0;
        grid-template-columns: repeat(7, 1fr);
        justify-content: left;
        max-width: 100%;
    }
}
header {
    /* px size is used as fallback */
    font-size: calc(var(--base-font-size)*3);
    font-size: clamp(1.2rem,5.75vmin,40px);
    margin-bottom: 0;


    &.nav {
        display: grid;
        justify-content: left;
        gap: 0.1rem;
        grid-template-areas:
            "logo . nav-main"
            "logo . nav-about"
            "logo . title";
        align-items: start;
        vertical-align: top;
        column-gap: 0.5vmin;
        row-gap: 0;
    }
    .main-nav {
        grid-area: nav-main;
    }
    .about-nav {
        grid-area: nav-about;
    }
    ul {
        grid-area: nav;
    }

    .logo-link {
        grid-area: logo;
        align-self: center;
    }
    h1 {
        grid-area: title;
        margin-block: 0;
        vertical-align: top;
        font-size: inherit;
    }
    img {
        /* was previously just width, change makes menu more usable on smaller screens
        possibly swap out for the apple touch icon on smaller screens? */
        width: clamp(
            var(--spacing-unit),
            10vw,
            calc(3*var(--spacing-unit)
        ));
    }

}
footer {
    /* @extend header; */

    font-size: calc(var(--base-font-size)*2);
    font-size: 3.75vmin;
    margin-bottom: calc(var(--spacing-unit)/2);
}
/* taken directly from here https://codepen.io/MarkBoots/pen/RwLPXgJ */
[speech-bubble], [speech-bubble] * { box-sizing: border-box }

[speech-bubble]{
  --bbColor: grey;
  --bbArrowSize: 1.5rem;
  --bbBorderRadius: 0.25rem;
  --bbPadding: 1rem;
  background: var(--bbColor);
  border-radius: var(--bbBorderRadius);
  padding: var(--bbPadding);
  position: relative;
}

[speech-bubble]::before{
  content: '';
  position: absolute;
  background: var(--bbColor);
}

[speech-bubble][pbottom]{ margin-bottom: var(--bbArrowSize) }


/* bottom and top  */
[speech-bubble][pbottom]::before,
[speech-bubble][ptop]::before{
  --width: calc(var(--bbArrowSize) / 2 * 3);
  height: var(--bbArrowSize);
  width: var(--width);
}

/* bottom */
[speech-bubble][pbottom]::before{
  top: calc(100% - 2px);
}
[speech-bubble][pbottom][aleft]::before{
  left: 1rem;
  clip-path: polygon(25% 0, 100% 0, 0% 100%)
}
[speech-bubble][pbottom][acenter]::before{
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
}
[speech-bubble][pbottom][aright]::before{
  right: 1rem;
  clip-path: polygon(0 0, 75% 0, 100% 100%);
}

/* this bit is mine */
[speech-bubble][pbottom][aright] {
    margin-right: 15%;
    margin-left: 30%;
    padding-left: 5%;
}
[speech-bubble][pbottom][aleft] {
    margin-right: 25%;
    margin-left: 20%;
    /*text-align: end;*/
    padding-right: 5%;
}
[speech-bubble][pbottom][acenter] {
    margin-right: 25%;
    margin-left: 25%;
    padding-left: 5%;
    padding-right: 5%;
}


/*for when the two lead into the other one, move the next one up*/
[speech-bubble][pbottom][aright] + [speech-bubble][pbottom][aleft], [speech-bubble][pbottom][aleft] + [speech-bubble][pbottom][aright] {
    margin-block-start: calc(var(--bbArrowSize)*-0.5);
    /*margin-block-end: calc(var(--bbArrowSize)*-0.5);*/
}

/* used for both */
.speech-bubbles {
    width: 90%;
    margin: 0 auto;

    [speech-bubble][pbottom][aright] {
        margin-left: 12.5%;
    }
    [speech-bubble][pbottom][aleft] {
        margin-right: 12.5%;
    }

}