.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: minmax(0, 1fr) auto auto;
    grid-template-areas: "links contact copyright";
    align-items: center;
    gap: 3px 12px;
    padding: 14px 20px 14px 8px;
    background: var(--g-menu-background);
    background-color: #1c1c1c;
    border-top: 1px solid var(--g-menu-edge);
    border-radius: 8px 8px 0 0;
    color: #fff;
    line-height: 1.4;
}

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

.g-footer-links {
    grid-area: links;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

#footer.g-footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 5px;
    color: inherit;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

#footer.g-footer .g-footer-links a {
    padding-inline: 10px;
    font-size: 14px;
}

#footer.g-footer a svg {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--g-menu-icon);
}

#footer.g-footer .g-footer-contact {
    grid-area: contact;
    justify-self: end;
    font-size: 14px;
    font-weight: 400;
}

#footer.g-footer a:is(:hover, :focus-visible) {
    background: var(--g-menu-hover);
    color: var(--g-menu-highlight);
}

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

#footer.g-footer a:focus-visible {
    outline: 2px solid var(--g-menu-highlight);
    outline-offset: 2px;
}

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

    #footer.g-footer a {
        padding: 7px 10px;
        font-size: 15px;
    }
}

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

    .g-footer-copy {
        padding-inline-start: 10px;
    }
}