/* nav */

#about,
#about:hover,
#about:active {
    color: var(--navItem);
    border-bottom: 0.5859375rem solid var(--invisible);
    box-shadow: 0 0.234375rem 0 0 var(--activeState);
    transform: translateY(-0.05859375rem);
 }

/* body */

.container {
   position: relative;
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
   text-align: left;
   width: 100%;
   height: 100%;
   min-height: calc(100vh - 2.75rem);
   background: var(--hero) center/cover no-repeat;
   padding: 0;
}

.inner {
   min-height: calc(100vh - 2.75rem - (3rem * 2) - 2rem);
   background: var(--navbar) center/cover no-repeat;
   box-shadow: var(--card_bShadow);
   border-radius: 4px;
   padding: 2rem 3rem;
   margin: auto 3rem calc(var(--fsz-type) + (0.5rem * 2));;
   box-sizing: border-box;
   display: flow-root;
   align-items: flex-end;
}

img {
   float: right;
   align-items: flex-end;
   max-width: calc(50vw - (3rem * 2));
   min-height: 12.5rem;
   max-height: calc(100vh - 2.75rem - (3rem * 4));
   shape-margin: 3rem;
   margin-bottom: 0.0625rem;
   shape-outside: url(/images/joe.png);
}

h2 {
   color: var(--text);
   font-family: var(--ff-secondary);
   font-size: var(--fsz-intro);
   padding: 0 0.2rem;
   margin-top: 0;
   margin-bottom: 2.5rem;
}

h3 {
   margin-bottom: 1rem;
   font-size: var(--fsz-h__p);
   font-weight: var(--fw-bld);
}

h3,
p,
h4 {
   color: var(--text);
}

h3 + p {
   margin-bottom: 1.5rem;
   font-size: var(--fsz-p);
   line-height: 1.5;
}
h4 {
   margin-top: 2.5rem;
}