:root {
    /* 
       COLOR VARIABLES
       Due to the use of opacity, you need to use the variables the following way: rgba(var(--color-build), 0.8);
    */
    --color-build: 48, 68, 82;
    --color-build-dark: 40 56 67;
    --color-banner-base: 37, 67, 84;
    --color-banner-top: 10, 30, 46;

    --color-empower: 79, 200, 244;
    --color-empower-dark: 75, 145, 180;

    --color-protect: 23, 160, 153;
    --color-protect-dark: 20, 103, 113;

    --color-yellow: 250, 164, 26;

    --color-cherry: 191, 32, 38;
    --color-cherry-dark: 142, 25, 28;

    --color-brown: 163, 129, 113;

    --color-surface:248, 251, 255;
    --color-surface-dark:238, 240, 245;
}



/**
 *  Not a colour, but it's the only CSS file
 *  called on both the homepage and subpage
 **/
 
/* Subtle attribution section */
.attribution {
  font-size: .875rem;
  line-height: 1.4;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

/* Only the body text of this block is muted, not the heading */
.attribution p,
.attribution dl {
  color: var(--gc-text-muted, #6b7280);
}
.attribution:not(:has(dl)){
  display: none;
}
/* Inline definition layout */


.attribution dt,
.attribution dd {
  display: inline;
  margin: 0;
}

.attribution dt { font-weight: 600; margin-right: .25em; }

.attribution dd::after {
  content: "";
  display: block; /* next pair starts on a new line */
}