* {
    font-family:"Publico Text";
}
[data-theme="light"] {
  --background: #e9e9e9;
  --solid: rgba(0,0,0,0.85);
  --l-70: rgba(0,0,0,0.7);
  --l-50: rgba(0,0,0,0.5);
  --l-40: rgba(0,0,0,0.4);
  --l-08: rgba(0,0,0,0.08);
  --dropdown: #d4d3d3;
  --woj: rgba(128,0,0,0.85);
}
[data-theme="dark"] {
  --background: #262323;
  --solid: rgba(255,255,255,1);
  --l-70: rgba(255,255,255,0.7);
  --l-50: rgba(255,255,255,0.5);
  --l-40: rgba(255,255,255,0.4);
  --l-08: rgba(255,255,255,0.08);
  --dropdown: #1b1818;
  --woj: rgba(255,226,180,0.8);
}
html {
    background-color: var(--background);
}
.passage__day {
    font-family:"Publico Headline";
    color: var(--l-50);
    font-size: var(--font-32);
    margin-top: 2em;
    font-weight: 600;
    line-height: 1.1;
}
.passage__date {
    font-family:"Publico Headline";
    color: var(--solid);
    font-size: var(--font-56);
    margin-bottom: 0.4em;
    font-weight: 700;
    line-height: 1.3;
}
.passage__outer {
    margin-bottom: 4.8em;
}
.rp-passage-display {
    font-family:"Publico Headline";
    color: var(--solid);
    font-size: var(--font-35);
    font-weight: 700;
    margin-bottom: 1.2em;
    line-height: 1.3;
}
.rp-passage-text {
    line-height: 1.9;
}
.rp-passage-text h3 {
    color: var(--solid);
    line-height: 1.3;
    font-size: var(--font-22);
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 1em;
}
.rp-passage-text h4 {
    color: var(--solid);
    line-height: 1.3;
    font-size: var(--font-19);
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 1em;
}
.rp-passage-text p {
    color: var(--l-70);
    font-size: var(--font-19);
    margin-bottom: 1.2em;
}
.chapternum {
    color: var(--solid);
    font-size: var(--font-22);
    line-height: 0;
}
.woj {
    color: var(--woj);
}
.versenum, .crossreference, .footnote {
    display: none;
}
div.poetry {
    padding-left: var(--space-40-28);
    padding-top: 1em;
    padding-bottom: 1em;
}
.passage__dropdowns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 0.8em;
}
.passage__dropdowns select {
    font-size: var(--font-19);
    padding: 0.6em 2.5em 0.6em 1em;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    border: none;
    border-radius: 4px;
    width: auto;
    background-color: var(--dropdown);
    color: var(--l-70);
}
/* dropdown arrow styles */
.passage__dropdowns select {
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 0.7rem top 50%;
    background-size: 0.65rem auto;
}
[data-theme="dark"] .passage__dropdowns select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='rgba(255,255,255,0.7)' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");
    box-shadow: 0 0 20px rgba(255,255,255,0.03);
}
[data-theme="light"] .passage__dropdowns select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='rgba(0,0,0,0.7)' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");
}

.passage__current-date {
    margin-bottom: var(--space-96-70);
    padding-left: 0.2rem;
}
.passage__current-date a {
    font-size: 0.9rem;
    color: var(--l-40);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.passage__current-date a svg {
    fill: currentColor;
    height: 0.7em;
    margin-bottom: 0.15em;
    margin-left: 0.4em;
}

.passage__nav {
    border-bottom: 1px solid var(--l-08);
    padding-bottom: 1.2em;
}
.passage__nav--foot {
    border-top: 1px solid var(--l-08);
    padding-top: 1.2em;
    border-bottom: 0;
    padding-bottom: 0;
}
.passage__nav a {
    color: var(--l-40);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.passage__nav a svg {
    fill: currentColor;
    height: 0.9em;
    margin-bottom: 0.15em;
}
.passage__nav .prev-link svg {
    margin-right: 0.4em;
}
.passage__nav .next-link svg {
    margin-left: 0.4em;
}