poem.css

body {
    counter-reset: poem;                       /* Set a counter named 'section', and its initial value is 0. */
}

stanza {
    border: black solid 2px;    /*add a border around stanzas*/
    margin: 50px;                /*with margins so that borders don't run into each other! */
    display: block;             /*this is important! display on its own line*/
}

line {
    display: block;             /*this is important! display on its own line*/
}

/* since there are no actual spaces in the text,add a margin to make it readable */
/* if you remove it, the words will run together.   */
word {
    margin-left: .222em;
    /* color: green; */
    display: inline;            /*Important!! Don't display on own line*/
}

/* consider whether you want to color/display your punctuation */
punctuation {
    /* visibility: hidden; */
    /* width: 0px; */
}

punctuation::after {
    visibility: visible;
    /* content: "!" */
}

indent {
    white-space: pre-wrap;      /*preserve whitespace of indentations*/
    display: inline;
}


/* add a counter to each line.  if you don't like it, delete or comment the `content` line */
line::before {
    counter-increment: poem;
    content: counter(poem);
    width: 2em;
    background-color: #DDD;
}

/* --------- class rules ------------ */

line {
    /* visibility: hidden; */
    display: flex;
    /* uncomment the next two lines to display text backwards */
    /* flex-direction: row-reverse; */
    /* justify-content: left */
}

line.show {
    visibility: visible;
    color: #112505;
    background-color: grey;
    font-weight: 100;
    font-style: italic;

}
/* Another way to do the deformation */
line {
    /* direction:rtl; */
}

/* 
.time {display: block;
    font-weight: bold;}
.hide {visibility: hidden;}

.death {
    color: #991111;
    background-color: rgba(4,4,4,0.3);
    font-weight:700;
}

.wealth {
    color: gold;
    font-style: italic;
}

.prayer {
    background-color: magenta;
} */