section {
    padding: 2rem;
}

.dark-background {
    background-color: #252525;
    --context: dark;
}

.saturated-background {
    background-color: #3173C6;
    --context: saturated;
}

.white-background {
    background-color: #fff;
    --context: light;
}

.light-gray-background {
    background-color: #f8f8f8;
    --context: light;
}

h2 {
    color: var(--pfe-broadcasted--text, #252525);
}

.border-card {
    --pfe-card--Border: 1px solid var(--pfe-theme--surface--border, #d2d2d2);
}

.border-card h3 {
    margin-top: 0;
}

.resource-card [slot="pfe-card--header"] {
    text-transform: uppercase;
}

/* Example not using context variable */
.custom-styles {
    background-color: rgb(108, 245, 154);
    --context: saturated;
    
    --pfe-broadcasted--text: #444;
    --pfe-broadcasted--link: green;
    --pfe-broadcasted--link--hover: #eee;
    --pfe-broadcasted--link--focus: #fff;

    --pfe-accordion--BackgroundColor--active: rgba(255, 255, 255, 0.5);
    --pfe-accordion--accent--active: hotpink;
    --pfe-accordion--Color--active: inherit;
    
    --pfe-accordion--accent--expanded: hotpink;
    --pfe-accordion--BackgroundColor--expanded: pink;
    --pfe-accordion--Color--expanded: #000;

    --pfe-accordion--BorderColor: #fff;
}

.custom-styles pfe-accordion-panel pfe-accordion {
    --context: light;

    --pfe-accordion--accent: initial;
    --pfe-accordion--accent--expanded: initial;
    --pfe-accordion--accent--active: initial;
    --pfe-accordion--BackgroundColor--expanded: initial;
    --pfe-accordion--Color--expanded: initial;
    --pfe-accordion--Color--active: initial;

    --pfe-accordion--BorderColor: #fff;

    --pfe-broadcasted--text: initial;
    --pfe-broadcasted--link: initial;
    --pfe-broadcasted--link--hover: initial;
    --pfe-broadcasted--link--focus: initial;
}

.custom-styles h2 {
    margin-top: 0;
}

.floating-card {
    float: left;
    width: 48%;
    margin-right: 2%;
    border: #eee solid 1px;
    padding: 20px;
}