:root {
    --font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    --background-color: #fffff8;
}

body {
    padding-bottom: 5rem;
}


[data-theme=light],
:root:not([data-theme=dark]) {
    --background-color: #fffff8;
    --color: #000000;
    --primary: hsl(26.05deg 61.22% 44.33%);
    --primary-height: hsl(16.46deg 77.41% 46.85%);
}

p {
    line-height: 2rem;
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    padding-right: 0;
    vertical-align: baseline;
}

.story-image-right {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
    max-width: 35%;
}

.story-image-left {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
    max-width: 35%;
}

@media (min-width: 992px) {
    .container {
        max-width: 700px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 700px;
    }
}
h1, h2, h3, h4, h5, h6 {
    --font-weight: 500;
}

#story h1 {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

#options-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 0.5rem;
}

.option-item {
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 0 1rem;
}

.option-item:hover {
    /* darken */
    filter: brightness(90%);
    background: #0000000f;
    cursor: pointer;
}

.option-item.selected {
    filter: brightness(75%);
    background: #0000001f;
}

.option-item img,
.option-item p {
    display: block;
    width: 100%;
}
.option-item p {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 0;
    margin-top: 14px;
}