@import url("https://fonts.googleapis.com/css2?family=EB+Garamond");
@import url("https://fonts.googleapis.com/css2?family=Anton");

book, author, title, chapter, para {
    display: block;
}

book {
    background-color: #F8F8F8;
    counter-reset: chapter-number footnote-number;
    font-family: "EB Garamond", Garamond, Georgia, "Times New Roman", Times, serif;
    margin: auto;
    max-width: 80ch;
    padding: 2em;
}

author, title {
    text-align: center;
    font-family: Anton, sans-serif;
}

author {
    font-size: 2em;
}

book > title {
    font-size: 4em;
    margin: 0.5em 0 1em 0;
}

author, book > title {
    font-variant: small-caps;
    letter-spacing: 0.1em;
}

title + chapter {
    border-top: medium double black;
}

chapter > title {
    font-size: x-large;
    text-decoration: underline;
    margin: 1.5em 0 0.75em 0;
}

chapter > title::before {
    content: "Chapter " counter(chapter-number, upper-roman) "\2014";
    counter-increment: chapter-number;
}

para {
    line-height: 1.5;
    margin: 0.75em 0;
    text-indent: 1.5em;
}

title + para {
    text-indent: 0;
}

title + para::first-letter {
    font-size: 1.7em;
    font-weight: bold;
    line-height: 1;
    margin-right: 0.05em;
}

para:hover {
    background-color: slateblue;
    color: white;
    cursor: pointer;
}

footnote {
    display: inline;
    font-size: 0;
    vertical-align: super;
}

footnote::before {
    content: "[" counter(footnote-number) "]";
    counter-increment: footnote-number;
    font-size: small;
}

footnote:hover {
    background-color: tomato;
    font-size: large;
    padding: 0.5em;
}

footnote:hover::before {
    font-size: large;
    padding-right: 0.25em;
}