:root {
    --background-color: #fff;
    --text-color: #333;
    --card-background-color: #f9f9f9;
    --card-border-color: #e5e5e5;
    --button-background-color: #333;
    --button-text-color: white;
    --button-hover-background-color: #555;
    --available-in-aws-marketplace-image: url('/images/available-in-aws-marketplace.svg');
    --p-logo-image: url('/images/p.svg')
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #333;
        --text-color: #f5f5f5;
        --card-background-color: #444;
        --card-border-color: #555;
        --button-background-color: #f5f5f5;
        --button-text-color: #333;
        --button-hover-background-color: #777;
        --available-in-aws-marketplace-image: url('/images/available-in-aws-marketplace.white.svg');
        --p-logo-image: url('/images/p.white.svg')
    }
}

* { font-family: system-ui; color: var(--text-color) }

body { margin: auto; max-width: 50pc; padding: 1pc; background-color: var(--background-color); }
table { text-align: left; margin-bottom: 1lh; margin-bottom: 1lh; }

.top-menu p a { font-size: medium; text-decoration: none; padding: .2em; }
.top-menu p a:hover { background: var(--button-hover-background-color); }
.top-menu p a img { vertical-align: middle; }

form p label { display: inline-block; width: 6pc; }
input, select, button { font-size: medium; }
form p input, textarea, select { min-width: 6pc; width: 50% }
form p input[type=text]:not(:focus) { text-overflow: ellipsis; direction: rtl; text-align: left; }
form p input[type=submit] { font-weight: bold; padding: .3pc 1pc; margin-right: .5pc; }

pre, code { font-family: monospace; background-color: var(--card-background-color); padding: .1em .3em; margin: -.1em; }
code:empty::after { content: '-'; }
pre { font-family: monospace; padding: 1em; margin-bottom: 1lh; overflow: auto; }

td { vertical-align: top; }
tbody tr td { border-top: 1px solid silver }

footer { font-size: small; margin-top: 80px; padding: 20px 0; border-top: 1px solid var(--card-border-color); text-align: center; color: var(--text-color); }

.callout { padding: 1em; background-color: lightgray; border: 2px solid darkgray; }

a.ui:hover { background: #eeeeee; } 
a.ui { padding: .1em .2em .1em .2em; text-decoration: none; }

.diagram { max-width: 100%; height: auto; margin: 30px 0; padding: 20px; background-color: var(--card-background-color); border: 1px solid var(--card-border-color); border-radius: 4px; }
.diagram svg rect { rx:5; fill:#f5f5f5; stroke:#333; stroke-width: 2; }
.diagram svg rect.prx { fill: #e0e0e0; }
.diagram svg line { stroke: var(--text-color); stroke-width: 2; }
.diagram svg .edge-labels path { stroke: var(--text-color); stroke-width: 2; }
.diagram svg line.light { stroke: #f5f5f5; }
.diagram svg defs marker path, polygon { fill: var(--text-color); }
.edge-labels text { fill: var(--text-color); }
.diagram svg rect.rgn { stroke: var(--card-border-color); fill: var(--card-background-color); stroke-dasharray: 4 4; }

.cta-section { text-align: center; margin: 60px 0; padding: 30px; background-color: var(--card-background-color); border-radius: 8px; border: 1px solid var(--card-border-color); }
.cta-section h2 { margin-bottom: 0 }
.cta-section p:first-of-type { margin-top: 0; }
.cta-button { display: inline-block; padding: 12px 24px; margin: 10px; background-color: var(--button-background-color); color: var(--button-text-color); text-decoration: none; border-radius: 4px; font-weight: bold; transition: background-color 0.3s ease; }
.cta-button:hover { background-color: var(--button-hover-background-color); }
.secondary-cta { background-color: var(--background-color); color: var(--text-color); border: 1px solid var(--text-color); }
.secondary-cta:hover { background-color: var(--card-background-color); }