html {
    font-family: system-ui, sans-serif;
}

body {
    margin: var(--cem-gap-group);
}

main, nav
{
    display: flex;
    gap: var(--cem-gap-group);
    flex-wrap: wrap;
}

nav {
    align-items: baseline;
    margin-block-end: var(--cem-gap-group);
}

nav h1,
nav p {
    flex-basis: 100%;
    margin: 0;
}

cem-demo-element {
    flex: 1 1 28rem;
    min-width: 0;
}

cem-demo-element > [slot="demo"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cem-gap-group);
}

form,
cem-stack {
    display: grid;
    gap: var(--cem-gap-group);
}

.properties {
    display: grid;
    gap: var(--cem-dim-medium);
    align-content: start;
}

.property-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--cem-dim-medium);
}

.property-group {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.property-group > legend {
    padding: 0;
    margin-block-end: var(--cem-dim-small);
    font-weight: bold;
}

.property-options {
    display: flex;
    flex-direction: column;
    gap: var(--cem-dim-small);
}