/* Good Fortune & Life: shared alignment rules across every sub-page. */
#fortune-app :is(.fortune-hero, .fortune-result-heading, .inspiration-heading) {
    text-align: center;
}

#fortune-app .fortune-hero > :is(h1, p) {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#fortune-app :is(
    .fortune-setup > h2,
    .fortune-setup > h3,
    .fortune-side-info > h2,
    .fortune-methods > h2,
    .fortune-explain > h2,
    .fortune-continue > h2,
    .fortune-inspiration-side > h2,
    .fortune-keywords > h2
) {
    width: 100%;
    text-align: center;
}

#fortune-app .fortune-explain > h2 {
    justify-content: center;
}

#fortune-app :is(.fortune-choice, .animal-choice, .fortune-topic-grid button) {
    align-items: center;
    justify-content: center;
    text-align: center;
}

#fortune-app .fortune-choice {
    flex-direction: column;
}

#fortune-app .fortune-choice > span {
    width: 100%;
    justify-items: center;
    text-align: center;
}

#fortune-app :is(
    .fortune-entry > svg,
    .fortune-entry > img,
    .fortune-choice > svg,
    .fortune-choice > img,
    .animal-choice > svg,
    .animal-choice > img,
    .fortune-topic-grid button > svg,
    .fortune-topic-grid button > img,
    .fortune-reading-grid article > svg,
    .fortune-reading-grid article > img,
    .inspiration-points svg,
    .inspiration-points img
) {
    align-self: center;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
}

#fortune-app .fortune-step {
    align-items: center;
}

#fortune-app .fortune-step > b {
    display: grid;
    place-items: center;
}

#fortune-app .fortune-side-info > div {
    align-items: center;
}

#fortune-app .fortune-side-info > div > :is(svg, img) {
    align-self: center;
}

#fortune-app .fortune-reading-grid article {
    text-align: center;
}

#fortune-app .fortune-reading-grid article > :is(svg, img) {
    display: block;
}

#fortune-app .fortune-keywords > div {
    justify-content: center;
}

#fortune-app .fortune-keywords > p {
    text-align: center;
}

#fortune-app :is(.fortune-question-strip, .fortune-action-strip, .fortune-side-disclaimer) {
    align-items: center;
}

#fortune-app :is(.fortune-question-strip, .fortune-action-strip) > :is(svg, img),
#fortune-app .fortune-side-disclaimer > :is(svg, img) {
    align-self: center;
    justify-self: center;
}

#fortune-app .fortune-continue > a {
    align-items: center;
}

#fortune-app .fortune-continue > a > :is(svg, img),
#fortune-app .fortune-continue > a > b {
    align-self: center;
    justify-self: center;
}

#fortune-app :is(.fortune-mini-chat, .fortune-chat-form) {
    align-items: center;
}

#fortune-app :is(.fortune-mini-chat, .fortune-chat-form) button {
    align-items: center;
    justify-content: center;
}

#fortune-app :is(.fortune-mini-chat, .fortune-chat-form) button > :is(svg, img) {
    margin: auto;
}

#fortune-app .fortune-inspiration-side > a {
    align-items: center;
}

#fortune-app .fortune-inspiration-side > a > :is(svg, img) {
    align-self: center;
}

#fortune-app :is(.fortune-disclaimer, .fortune-side-disclaimer) {
    justify-content: center;
}

@media (max-width: 920px) {
    #fortune-app .fortune-result-heading {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #fortune-app .fortune-result-heading > div {
        width: 100% !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #fortune-app .fortune-result-heading :is(h1, p) {
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}

@media (max-width: 620px) {
    #fortune-app .fortune-hero.compact > p {
        max-width: 20em;
        padding-inline: 6px;
        line-height: 1.65;
        text-wrap: balance;
    }

    #fortune-app :is(.fortune-question-strip, .fortune-action-strip) {
        align-items: center !important;
    }

    #fortune-app .fortune-choice {
        min-height: 160px;
    }
}