body {
    margin: 0;
}

#site-container {
    display: flex;
    flex-direction: row;
}

bp-navigation-bar {
    flex-grow: 0;
}

bp-app {
    flex-grow: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-base);
}

@media (max-width: 1024px) {
    #site-container {
        flex-direction: column;
    }

    bp-app {
        max-width: none;
        margin: 0;
    }
}

.accordion {
    border: 1px solid var(--color-primary);
    overflow: hidden;
}
.accordion summary {
    cursor: pointer;
    padding: var(--spacing-base);
    background-color: var(--color-primary);
    color: white;
}

.accordion:first-child {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.accordion:last-child {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.accordion:first-child:last-child {
    border-radius: var(--border-radius);
}

.accordion summary>* {
    display: inline;
}

.accordion-content {
    padding: var(--spacing-base);
}

footer {
    margin-top: var(--spacing-base);
    padding: var(--spacing-base);

    background-color: var(--color-secondary);
}