:root {
    /* text */
    --body-text-color: rgb(46, 58, 36);
    --panel-text-color: rgb(40, 50, 32);
    --muted-text-color: rgb(140, 131, 104);
    --link-hover-color: rgb(76, 140, 74);
    --heading-link-color: rgb(47, 107, 49);
    --unused-accent-color: rgb(183, 255, 189);

    /* borders */
    --divider-color: rgba(202, 221, 171, 0.45);
    --section-border-color: rgba(160, 205, 180, 0.5);
    --accent-border-color: rgba(120, 160, 90, 0.5);
    --footer-border-color: rgba(165, 195, 180, 0.45);
    --active-border-color: rgb(212, 160, 23);
    --grey-panel-border-color: rgba(150, 140, 120, 0.35);
    --footer-section-border-color: rgba(135, 172, 148, 0.4);

    /* backgrounds */
    --body-bg-color: rgb(228, 238, 232);
    --main-bg-color: rgba(235, 248, 244, 0.35);
    --panel-bg-color: rgb(198, 228, 212);
    --nav-bg-color: rgba(208, 234, 220, 0.9);
    --footer-section-bg-color: rgba(208, 234, 222, 0.7);
    --attention-bg-color: rgba(200, 223, 180, 0.5);
    --grey-panel-bg-color: rgba(200, 195, 180, 0.25);
    --gradient-start-color: rgba(215, 228, 196, 0.5);
    --gradient-end-color: rgba(228, 238, 232, 0);

    /* effects */
    --text-glow-color: rgba(255, 252, 240, 0.85);
    --shadow-color: rgba(0, 0, 0, 0.15);
}

/* site palette and non-mobile-specific image backgrounds */
body {
    color: var(--body-text-color);
    text-shadow:
        0 0 0.1rem var(--text-glow-color),
        0 0 0.3rem var(--text-glow-color);
    background-color: var(--body-bg-color);
    font-family: 'Georgia', serif;
    font-weight: 300;
    font-size: 16px;
    /*background-image: url(images/bg.png);*/
}

a {
    color: var(--panel-text-color);
}

footer a,
footer a:hover,
#social a {
    color: var(--panel-text-color);
}

a:hover {
    color: var(--link-hover-color);
}

header {
    /* different bg image in mobile styling */
    background: var(--panel-bg-color);
    border-bottom: 1px solid var(--section-border-color);
    box-shadow: 0 0 0.2rem var(--shadow-color);
}

.header-holder {
    margin: 0;
    padding: 0;
    background: url(images/rectangle-logo-darker-text.png) no-repeat;
    background-size: auto 8rem;
}

nav,
.headline,
.name,
h1,
h2,
h3 {
    font-family: 'Libre Baskerville', serif;
}

hr {
    border: none;
    height: 1.5rem;
}

hr.fancy {
    width: 50%;
    border-top: 1px solid var(--divider-color);
}

main {
    background-color: var(--main-bg-color);
    border-left: 1px solid var(--divider-color);
    border-right: 1px solid var(--divider-color);
}

nav {
    background-color: var(--nav-bg-color);
    border-bottom: 1px solid var(--section-border-color);
}

body::after {
    content: "";
    background-image: linear-gradient(var(--gradient-start-color), var(--gradient-end-color));
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

footer {
    background: url(images/bamboo.png) no-repeat;
    background-color: var(--panel-bg-color);
    box-shadow: 0 0 0.2rem var(--shadow-color);
    border-top: 1px solid var(--footer-border-color);
}

.footer-holder {
    margin: 0;
}

footer section {
    background-color: var(--footer-section-bg-color);
    border: 1px solid var(--footer-section-border-color);
}

.attention,
.testimonial-button,
#contact-button {
    border: 1px solid var(--accent-border-color);
    border-radius: 0.3rem;
    background-color: var(--attention-bg-color);
    color: var(--panel-text-color);
    padding: 0.5rem;
}

.attention-grey {
    border: 1px solid var(--grey-panel-border-color);
    border-radius: 0.3rem;
    background-color: var(--grey-panel-bg-color);
    padding-bottom: 1rem;
}

/* all other non-color/image styling */
body {
    margin: 0;
    font-size: 1rem;
}

a {
    font-weight: bold;
}

h1 {
    display: none;
    font-size: 1.5rem;
    text-shadow:
        0 0 0.1rem var(--text-glow-color),
        0 0 0.2rem var(--text-glow-color),
        0 0 0.3rem var(--text-glow-color);
}

h1,
h2,
h3 {
    margin: 0 0.5rem;
}

/* h2 {
    font-size: 1.3rem;
} */

h3 {
    text-align: center;
    /* font-size: 1.2rem; */
    margin: 0.5rem 0 0;
    padding: 0;
}

h4 {
    /* font-size: 1.1rem; */
    text-align: center;
}

#social {
    font-size: 1.5rem;
    text-align: right;
    padding: 1rem;
}

#social a {
    font-size: 1rem;
    display: block;
    margin: 0 0.3rem;
    text-decoration: none;
    text-shadow: none;
    float: right;
    clear: both;
}

#social i {
    margin-left: 0.3rem;
}

#social span {
    margin-bottom: 0.3rem;
    vertical-align: middle;
}

header,
.header-holder {
    margin: 0;
    padding: 0;
    /*background-position: calc(50% - 14rem) top;*/
    height: 6rem;
}

img.full-width {
    width: 85%;
    height: 20rem;
}

img {
    border: none;
    border-radius: 0.5rem;
}

img.small {
    max-height: 10rem;
    max-width: 50%;
}

img.medium {
    max-height: 15rem;
    max-width: 50%;
}

img.large {
    max-height: 20rem;
    max-width: 50%;
}

img.left {
    float: left;
    margin: 0.5rem 1rem 0.5rem 0.5rem;
}

img.right {
    float: right;
    margin: 0.5rem 0.5rem 0.5rem 1rem;
}

img.cover-top {
    object-fit: cover;
    object-position: top;
}

.left-card img {
    float: left;
    height: 10rem;
    width: 8rem;
    object-fit: cover;
    margin-right: 1rem;
}

.left-card ul,
.noimg-card ul {
    margin-top: 0;
    list-style-type: none;
}

.noimg-card ul {
    padding-left: 0;
}

.left-card ul {
    padding-left: 9rem;
}

.left-card li,
.noimg-card li {
    margin: 0 0 0.2rem;
    line-height: 1.3rem;
}

.left-card,
.noimg-card {
    width: 100%;
    min-height: 11rem;
    padding: 0.5rem;
}

.noimg-card ul {
    margin-left: 0;
    padding-left: 0;
}

.title {
    font-style: italic;
}

nav {
    text-align: center;
}

nav a {
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    padding: 0.3rem 0.8rem;
}

main {
    max-width: 60rem;
    margin: auto;
    padding: 1rem 2rem;
}

.nodots>ul,
.nodots {
    list-style-type: none;
    padding-left: 0;
}

footer {
    font-size: 0.8rem;
    background-position: -13% 0;
    background-size: 25%;
    margin: 0;
    padding: 1rem;

}

footer a {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer i {
    margin-right: 0.5rem;
}

.footer-holder,
.header-holder {
    margin: auto;
    max-width: 70rem;
}

.footer-holder {
    display: flex;
}

.footer-holder section {
    flex-grow: 1;
    padding: 0 0.5rem;
    margin: 0.5rem;
    min-width: 20%;
    border-radius: 0.3rem;
}

p {
    margin: 0.5rem 0;
    padding: 0.5rem;
}

footer p {
    padding: 0;
}

footer hr {
    border: none;
}

li {
    margin: 0.5rem 0;
}

.bold {
    font-weight: bold;
}

.headline {
    display: block;
    text-align: center;
}

span.micro {
    font-size: 0.7rem;
}

span.tiny {
    font-size: 0.8rem;
}

span.small {
    font-size: 0.9rem;
}

span.medium {
    font-size: 1.1rem;
}

span.large {
    font-size: 1.5rem;
}

span.huge {
    font-size: 1.7rem;
}

.left {
    display: block;
    text-align: left;
}

.right {
    display: block;
    text-align: right;
}

.center {
    display: block;
    margin: auto;
    text-align: center;
}

.maps {
    height: 10rem;
    width: 100%;
    border: none;
    border-radius: 0.3rem;
}

.credit {
    margin: 0 1rem;
}

.fas,
.fab {
    width: 0.5rem;
}

.md-only a {
    text-decoration: none;
}

.md-only {
    display: none;
}

p.md-only {
    padding-top: 0;
    padding-right: 1rem;
}

.multi-list {
    display: flex;
    column-gap: 5rem;
}

.multi-list>div {
    flex: 1;
}

hr.divider {
    border: none;
    border-top: 1px dotted var(--accent-border-color);
    width: 50%;
    height: 1px;
    margin: 1rem auto;
}

@media screen and (max-width: 670px) {
    .multi-list {
        display: block;
    }

    .multi-list .right {
        text-align: left;
    }

    main {
        max-width: 100%;
        padding: 1.5rem;
        border: none;
    }

    .header-holder {
        background: none;
    }

    header {
        height: 9rem;
        background-image: url(images/bamboo.png);
        background-position: -21% 0;
        background-size: 50%;
        background-repeat: no-repeat;
    }

    h1 {
        font-size: 1.7rem;
        display: block;
        text-align: right;
        padding: 0.5rem;
    }

    h2 a,
    h2 a:active,
    h2 a:hover {
        color: var(--heading-link-color);
        text-decoration: none;
        font-size: 1.7rem;
    }

    h3,
    h3 a:active,
    h3 a:hover {
        font-size: 2rem;
        text-decoration: none;
    }

    nav {
        text-align: left;
    }

    nav a {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    #social {
        display: none;
    }

    #contact-button {
        display: block;
        margin: auto;
        width: 50%;
        padding: 0.5rem;
    }

    /*#social a {
        font-size: 1.5rem;
    }

    #social {
        position: absolute;
        top: 5rem;
        right: 0;
        width: 90%;
    }*/

    footer,
    .footer-holder,
    .header-holder {
        display: block;
    }

    img {
        max-width: 90%;
    }

    footer {
        display: block;
        margin: 0;
    }

    footer h3 {
        font-size: 1.2rem;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    footer p,
    footer li {
        font-size: 1rem;
        display: inline-block;
        padding-bottom: 0.5rem;
        min-height: 2rem;
    }

    footer p {
        margin: 0 1rem;
        width: 100%;
    }

    footer ul {
        padding: 0;
    }

    footer li {
        min-width: 55%;
        margin: 0 1rem;
    }

    footer section {
        margin: 0 0 1rem;
    }

    span.small {
        font-size: 2rem;
    }

    .maps {
        height: 15rem;
    }

    img {
        max-width: 90%;
    }

    /*.left-card img,
    .right-card img {
        display: block;
        float: none;
        width: 80%;
        height: 30rem;
        margin: 0 auto 1rem;
        border-radius: 1rem;
    }

    .left-card ul {
        margin: 1rem auto 4rem;
        width: 85%;
    }*/

    .left-card strong,
    .right-card strong,
    .left-card .title,
    .right-card .title {
        display: block;
        width: 100%;
        /*margin-top: 1rem;*/
    }

    .fas,
    .fab {
        width: 1.5rem;
    }

    img.full-width {
        width: 85%;
        height: 11rem;
    }

    .dt-only {
        display: none;
    }

    .md-only {
        display: block;
    }
}

@media screen and (max-width: 400px) {
    header {
        height: 7rem;
    }

    h1 {
        font-size: 1.3rem;
    }

    #social a {
        font-size: 1.2rem;
        line-height: 2.2rem;
    }

    nav a {
        font-size: 1.1rem;
        line-height: 1.9rem;
    }

    .dt-only {
        display: none;
    }

    .md-only {
        display: block;
    }

    .left-card ul {
        padding-left: 0;
    }
}

.testimonial-link, .service-link {
    display: inline-block;
    padding: 0.2rem;
}

.testimonial-link a, .service-link a {
    text-decoration: none;
}

#testimonials {
    padding: 0;
    list-style-type: none;
}

#testimonials li:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 50%;
    padding-top: 1px;
    border-bottom: 1px dotted var(--divider-color);
}

#testimonial-buttons {
    list-style-type: none;
    padding: 0;
}

#testimonial-buttons li {
    display: inline-block;
}

.testimonial-button, .service-button {
    font-size: 1.1rem;
    font-family: 'Georgia', serif;
    margin: 0 0.25rem;
    padding: 0.2rem 0.3rem;
    color: var(--muted-text-color);
}

.button-active {
    border: 1px solid var(--active-border-color);
    color: var(--panel-text-color);
}

.button-header {
    width: 100%;
    display: block;
    font-size: 1.1rem;
    font-style: oblique;
    padding-top: 0.3rem;
}

.smaller-text {
    font-size: 0.9rem
}

/* PayPal */
#paypal-form-fields-container-Z82MAX2ZJCSRJ {
    margin: auto;
}