.section-container {
    background-color: var(--section-bg-color);
    border: 1px solid var(--section-border-color);
    border-radius: 8px;
    box-shadow: 2px 2px 4px var(--section-shadow-color);
    backdrop-filter: blur(12px);
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
}

.body-content > .section-container {
  margin-left: auto;
  margin-right: auto;
}

.section-container-header {
    background: linear-gradient(
        to top left, 
        var(--section-header-gradient-start), 
        var(--section-header-gradient-end)
    );
    border-bottom: 1px solid var(--section-border-color);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 2px 4px var(--section-header-shadow);
    display: flex;
    align-items: center;
    padding: 12px 32px;
    z-index: 1;
}

.section-container-header h2 {
    color: var(--section-header-text-color);
    font-size: 1.5rem;
    margin: 0;
}

.section-container-body {
    display: flex;
    min-height: 64px;
    margin: 0;
    width: 100%;
    padding: 16px;
}

.section-container-body ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    width: 100%;
}

.section-container-body ul > li {
    width: 100%;
}

.section-container li + li {
    margin-top: 10px;
}

body.spooky-mode .section-container,
body.santa-mode .section-container {
  margin-top: 24px;
}