dialog::backdrop {
    background-image: linear-gradient(
        45deg,
        magenta,
        rebeccapurple,
        dodgerblue,
        green
    );
    opacity: 0.75;
}

#__guide_open_text__ {
    font-size: calc(var(--variable-font-size) * 0.55);
    margin: 0;
}

#__guide_open__ {
    text-decoration: underline;
}

#__dialog_cross__ {
    color: white;
    transition: color 0.5s ease-out;
    right: 0;
    top: 0;
    font-weight: 600;
    font-size: var(--variable-font-size);
    float: right;
    top: 0;
    position: relative;
    grid-area: Cross;
    justify-self: right;
    background: none;
    border: none;
    width: fit-content;
    height: min-content;
}
#__dialog_cross__:hover {
    cursor: pointer;
    color:red;
    box-shadow: none;
}

#__dialog__ {
    padding: 3vh;   /* Must use id selector to override paddding in .card */
}

dialog[open] {
    display: grid;
    width: 75%;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        ". Cross"
        "Title Title"
        "Desc Desc"
        "H1 H1"
        "T1 I1"
        "T2 I2"
        "H2 H2"
        "T3 I3"
        "T4 I4"
        "H3 H3"
        "T5 I5"
        "Table Table"
        "H4 H4"
        "T6 I6"
        "H5 H5"
        "T7 T7"
        "H6 H6"
        "T8 T8"
        "Close Close";
    padding: 50px;
}

dialog img {
    width: 70%;
    place-self: center;
    box-shadow: 0 0 0.5vh rgba(255, 255, 255, 0.2);
}

dialog h2 {
    font-size: calc(var(--variable-font-size) * 1.2);
    margin-top: 4vh;
    padding-bottom: 0;
    margin-bottom: 0;
}

#__guide_title__ {
    grid-area: Title;
    place-self: center;
    padding-top: 0;
    font-size: calc(var(--variable-font-size) * 2);
}
#__guide_desc__ {
    grid-area: Desc;
    text-align: center;
}
#__select_anthology_h__{
    grid-area: H1
}
#__click_anthology_t___ {
    grid-area: T1
}
#__anthology-select_i__ {
    grid-area: I1
}
#__dropdown_anthology_t__{
    grid-area: T2
}
#__anthology-options_i__ {
    grid-area: I2;
}
#__select_poem_h__ {
    grid-area: H2
}
#__click_poem_t__ {
    grid-area: T3
}
#__title_i__ {
    grid-area: I3
}
#__dropdown_poems_t__ {
    grid-area: T4
}
#__dropdown_poems_i__ {
    grid-area: I4
}
#__words_quotes_h__ {
    grid-area: H3
}
#__radio_t__ {
    grid-area: T5
}
#__radio-buttons_i__ {
    grid-area: I5
}
#__difficulty_h__ {
    grid-area: H4
}
#__slider_t__ {
    grid-area: T6
}
#__slider_i__ {
    grid-area: I6
}
#__fill_in_blanks_h__ {
    grid-area: H5
}
#__fill_in_blanks_t__ {
    grid-area: T7
}
#__viewing_notes_h__ {
    grid-area: H6
}
#__viewing_notes_t__ {
    grid-area: T8
}
#__guide_close__ {
    margin: 3vh;
    grid-area: Close;
    display: grid;
    place-content: center;
}
#__guide_table__ {
    grid-area: Table;
    display: grid;
    grid-template-columns: 1fr 6fr;
    column-gap: 1vh;
    align-items: center;
}