.main-title {
    text-align: center;
    border-bottom: 1px solid var(--border);
    margin: 10px 0px;
    padding: 10px 0px;
}

#main-content.dark { background: #11243f; }
#main-content.positive { background: #e8c98a; }
#main-content.negative { background: #7a2b22; }
#main-content.sacred { background: #f6ecc9; }
#main-content.casual { background: #d8c8a4; }

#main-content.dark, #main-content.negative{
  color: var(--surface);
}

#main-content.dark #historyDropdown, #main-content.negative #historyDropdown {
  color: #11243f;
}

#main-content.dark .card,
#main-content.negative .card {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

#main-content.dark h2,
#main-content.dark h3,
#main-content.dark h4,
#main-content.negative h2,
#main-content.negative h3,
#main-content.negative h4,
#main-content.dark h1,
#main-content.negative h1 {
    color: #ffffff;
}

.periode-header{
  text-align: center;
  margin: 10px 0px;
  grid-column: 1 / -1;
}

.card-grid{
  background-color: white;
}

#contentArea {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  padding: 1rem 0;
}

#historySlider{
  padding: 10px 0px;
  border-bottom: 1px solid var(--border);
}

#historyDropdown{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 5px 5px;
  border-radius: 5px;
}

body[data-page="history"] .site-footer {
  position: relative;
  z-index: 60;
  background: #f4ead4;
}

.history-content-head .eyebrow,
.history-content-head [data-history-title],
.history-content-head [data-history-intro],
.history-loading,
.history-empty,
.history-empty h2 {
  -webkit-transition: color 480ms ease-out;
  transition: color 480ms ease-out;
}

.history-content[data-mood="dark"] .history-content-head .eyebrow,
.history-content[data-mood="dark"] [data-history-title],
.history-content[data-mood="dark"] [data-history-intro],
.history-content[data-mood="dark"] .history-loading,
.history-content[data-mood="dark"] .history-empty,
.history-content[data-mood="dark"] .history-empty h2 {
  color: rgba(255, 255, 255, 0.9);
}

.history-content[data-mood="negative"] .history-content-head .eyebrow,
.history-content[data-mood="negative"] [data-history-title],
.history-content[data-mood="negative"] [data-history-intro],
.history-content[data-mood="negative"] .history-loading,
.history-content[data-mood="negative"] .history-empty,
.history-content[data-mood="negative"] .history-empty h2 {
  color: rgba(255, 255, 255, 0.88);
}

.history-content[data-mood="positive"] .history-content-head .eyebrow,
.history-content[data-mood="positive"] [data-history-title],
.history-content[data-mood="positive"] [data-history-intro],
.history-content[data-mood="sacred"] .history-content-head .eyebrow,
.history-content[data-mood="sacred"] [data-history-title],
.history-content[data-mood="sacred"] [data-history-intro],
.history-content[data-mood="casual"] .history-content-head .eyebrow,
.history-content[data-mood="casual"] [data-history-title],
.history-content[data-mood="casual"] [data-history-intro] {
  color: #11243f;
}

@media (prefers-reduced-motion: reduce) {
  .history-content-head .eyebrow,
  .history-content-head [data-history-title],
  .history-content-head [data-history-intro],
  .history-loading,
  .history-empty,
  .history-empty h2 {
    -webkit-transition: none;
    transition: none;
  }
}

@media (min-width: 600px) {
  #contentArea {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  #contentArea {
    grid-template-columns: repeat(3, 1fr);
  }
}