body {
    margin: 0;
}

header {
    text-align: center;

    --mdc-text-button-label-text-color: var(--cem-action-primary-default-text);
    --mat-sidenav-content-background-color: var(--cem-palette-trust);

    color: var(--cem-palette-trust-text);
    background-color: var(--cem-palette-trust);
    box-shadow: var(--cem-layer-work);
    cem-icon-link a{ box-shadow: none;}
    &{ padding: var(--cem-inset-control) var(--cem-inset-container) }
    h1,p{position: relative; z-index: 2;}
    .logo-large{ position: absolute;
        right: var(--cem-layout-gutter-wide);
        height: var(--cem-dim-xxx-large);
        z-index: 1;
        opacity: 0.5;
    }
}
footer{ text-align: center;
    a
    {   color: var(--cem-palette-comfort-text);
        text-decoration: none;
        &:hover,&:focus{text-decoration: underline;}
    }
}
code{
    font-family: var(--cem-typography-script-font-family);
    font-size: var(--cem-typography-script-font-size);
    font-weight: var(--cem-typography-script-font-weight);
}
html-demo-element{
    pre{ margin: 0}
    [slot="text"]{margin: 0 var(--cem-inset-container); }
    [slot="demo"]{margin: 0 var(--cem-inset-container) var(--cem-inset-container) var(--cem-inset-container); }
    [slot="legend"], [slot="description"] {
        background-color: var(--cem-action-contextual-indeterminate-background);
    }
}
section {
    display: flex;
    gap: var(--cem-gap-page);
    flex-wrap: wrap;
}