@font-face {
    font-family: "WorkSans-ExtraLight";
    src: url("./fonts/WorkSans-ExtraLight.woff2");
}
@font-face {
    font-family: "WorkSans-Light";
    src: url("./fonts/WorkSans-Light.woff2");
}
@font-face {
    font-family: "WorkSans-Regular";
    src: url("./fonts/WorkSans-Regular.woff2");
}

:root {
    --bg-color: #3b4252;
    --text-color: #d8dee9;
    --link-color: #a3be8c;
    --link-visited: #d08770;
    --link-hover: #ebcb8b;
    --link-active: #b48ead;
    --section-title-color: #ebcb8b;
    --highlight-color: #a3be8c;
}

body {
    font-family: "WorkSans-Regular", serif;
    font-size: 13pt;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.3;
    margin: 0;
    padding: 0;
    padding-bottom: 3em;
}

body div + div {
    margin-top: 1em; 
}

p {
    text-align: justify;
    text-justify: inter-word;
    padding: 0 0 14px 0;
    text-indent: 0;
    hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
}

a {
    text-decoration: none;
    color: var(--link-color);
    font-size: 13pt;
}

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

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

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

mark {
    background: transparent;
    border-radius: 0.8em 0.3rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: var(--bg-color);
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    margin: 0 -0.4rem;
    padding: 0.1em 0.4rem;
    background-image: linear-gradient(
        to right,
        color-mix(in srgb, var(--highlight-color) 20%, transparent),
        color-mix(in srgb, var(--highlight-color) 90%, transparent) 4%,
        color-mix(in srgb, var(--highlight-color) 40%, transparent)
    );
}

table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
    border: none;
}

td {
    width: 50%;
    vertical-align: top;
    padding: 0 5.4pt;
}

.left-column, .right-column {
    padding: 0 10px;
}

.pgHeading {
    background-color: var(--highlight-color);
    margin: 10px;
    padding: 5px;
}

.lnTitle {
    font-size: 28.5pt;
    font-family: "WorkSans-Light", serif;
    color: var(--bg-color);
}

.sectionTitle {
    font-size: 15pt;
    font-family: "WorkSans-Light", serif;
    color: var(--section-title-color);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.sectionTitle .icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--section-title-color);
    stroke-width: 2;
}

.Photo {
    background-image: url("gardenPhoto85.jpg");
    width: 325px;
    height: 250px;
    border-radius: 25px;
    box-shadow: 0 0 8px 8px var(--bg-color) inset;
    margin-bottom: 20px;
}

ul {
    font-family: "WorkSans-Regular", serif;
    font-size: 13pt;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 14pt;
    line-height: 1.3;
}

.error {
    font-family: "WorkSans-Regular", serif;
    text-align: center;
    text-justify: inter-word;
    padding: 200px 0 14px 0;
    text-indent: 0;
    font-size: 28.5pt;
    color: #bdae93;
    hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
}

.icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

/* Responsive design */
@media (max-width: 768px) {
    table {
        display: block;
    }

    td {
        display: block;
        width: 100% !important;
    }

    .left-column, .right-column {
        padding: 0 15px;
    }

    .Photo {
        width: 100%;
        max-width: 325px;
        height: auto;
    }
}