.g-page {
    --ink: #203c2c;
    --focus: #b88616;
    --section-gap: 20px;
}

.g-panel {
    --panel-paper: #eaffea;
    --panel-edge: #cadfc1;
    --panel-ink: #254932;
    --panel-muted: #51694f;
    --divider-tip: color-mix(in srgb, var(--panel-edge) 40%, var(--panel-paper));
    --row-divider: linear-gradient(to right, var(--divider-tip), var(--panel-edge) 18%, var(--panel-edge) 82%, var(--divider-tip));
    --heading-divider: linear-gradient(to right, var(--panel-edge) 32%, color-mix(in srgb, var(--panel-edge) 48%, white));
    --divider-mask: linear-gradient(to bottom, #0006, #000 24%, #000 76%, #0006);

    background-color: var(--panel-paper);
    background-image: radial-gradient(
        ellipse at 0% 0%,
        color-mix(in srgb, var(--panel-paper) 38%, white),
        var(--panel-paper) 66%,
        color-mix(in srgb, var(--panel-paper) 88%, var(--panel-edge))
    );
    border: 1px solid var(--panel-edge);
    border-radius: 8px;
}

.g-panel--yellow {
    --panel-paper: #feffe1;
    --panel-edge: #eae2c8;
    --panel-ink: #5c4b24;
    --panel-muted: #6f633f;
}

.g-panel--blue {
    --panel-paper: #e5fcff;
    --panel-edge: #cae1e3;
    --panel-ink: #234e57;
    --panel-muted: #4b6c73;
}

.g-panel--purple {
    --panel-paper: #fbf1ff;
    --panel-edge: #e4d6e9;
    --panel-ink: #533d63;
    --panel-muted: #685675;
}

.g-panel-heading {
    border-bottom: 1px solid var(--panel-edge);
    border-image: var(--heading-divider) 1;
}

.g-link-button {
    --link-color: #405b43;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-block-size: calc(1.4em + 12px);
    padding: 5px 9px;
    background: #fff;
    border: 1px solid #d5dfd1;
    border-radius: 5px;
    color: var(--link-color);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.g-link-button > span {
    text-box: trim-both cap alphabetic;
}

.g-link-button:is(:hover, :focus-visible) {
    --link-color: #4f411d;
    background: #fffbe7;
    border-color: #c8b66d;
}

#footer.g-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "copyright links contact";
    align-items: center;
    gap: 8px 20px;
    padding: 13px 20px;
    background: linear-gradient(135deg, #365940, #183723 62%, #0c2108);
    border-top: 1px solid #b8c1b5;
    border-radius: 8px 8px 0 0;
    color: #f1f6ed;
    font-size: 14px;
    line-height: 1.4;
}

.g-footer-copy {
    grid-area: copyright;
    color: #d0decf;
    font-size: 13px;
}

.g-footer-links {
    grid-area: links;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px;
}

#footer.g-footer a {
    display: inline-block;
    padding: 4px 0;
    color: inherit;
    text-decoration: none;
}

#footer.g-footer .g-footer-contact {
    grid-area: contact;
    justify-self: end;
    padding-inline: 8px;
    border: 1px solid #cddbc980;
    border-radius: 5px;
}

#footer.g-footer a:is(:hover, :focus-visible) {
    color: #ffc600;
}

#footer.g-footer a:focus-visible {
    outline: 2px solid #ffc600;
    outline-offset: 2px;
}

@media (max-width: 760px) {
    #footer.g-footer {
        padding-inline: 10px;
        border-radius: 0;
    }
}

@media (max-width: 600px) {
    #footer.g-footer {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "links links" "copyright contact";
        padding-block: 10px;
    }

    .g-footer-links {
        justify-content: flex-start;
        padding-bottom: 6px;
        border-bottom: 1px solid #cddbc947;
    }
}