Introduction

Novel. Journal. Field guide. Textbook. Whatever you need this for. Let me begin by saying, if you are not familiar with work skins on AO3, I encourage you to review A Step-by-Step Guide to Work Skins, because I'm going to assume you have at least basic working knowledge of how to create, edit, and link to one. If you'd like to get an understanding of this particular stylesheet, please read on. If you simply want to get to the full code, expand the details below. Important: This tutorial uses two image files. Alternatively, this code was meant to be an answer to the limitations of responsive code that AO3 currently does not allow. If you want a book with fixed pixels, this isn't it. Feel free to goof around with the code if that's what you prefer! And if you'd like to see another example of the open book using this style, I welcome you to view my poetry transformed into a prayer book. The interest from a reader of that work is what inspired me to make adjustments to the stylesheet and write out this tutorial. ♡

#workskin .bookwrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80em;
  height: 100%;
  margin: 1em auto;
  box-sizing: border-box;
}

#workskin .bookcontainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

#workskin .bookpages,
#workskin .openbook::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 2%;
  left: 1%;
  width: 98%;
  height: 96.5%;
  border-radius: 2%;
  box-sizing: border-box;
  background-color: #f7efd3;
}

#workskin .bookgutter,
#workskin .openbook::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4rem;
  box-sizing: border-box;
  background: linear-gradient(to right, transparent 0%,rgba(102,51,51,0.2) 46%,rgba(102,51,51,0.5) 49%,rgba(102,51,51,0.7) 50%,rgba(102,51,51,0.5) 51%,rgba(102,51,51,0.2) 52%,transparent 100%);
  transform: translate(-50%,0);
}

#workskin .bookcover,
#workskin .openbook {
  position: relative;
  border-radius: 2%;
  box-sizing: border-box;
  align-content: center;
  background-color: #8b4513;
}

#workskin .openbook * {
  position: relative;
}

#workskin .openbook > * {
  position: relative;
  z-index: 1;
  column-count: 2;
  column-gap: 0;
  box-sizing: border-box;
  font-family: 'Times New Roman', 'Times', serif;
  color: #633;
}

#workskin .openbook *::-moz-selection {
  background: rgba(222,255,0.75);
}

#workskin .openbook *::selection {
  background: rgba(222,255,0.75);
}

#workskin .openbook .header {
  padding-bottom: 0;
}

#workskin .openbook .header *,
#workskin .openbook .footer * {
  margin: 0;
  margin-bottom: 5%;
  box-sizing: border-box;
  font-family: 'Times New Roman', 'Times', serif;
  font-weight: 700;
  letter-spacing: 0.125em;
  text-transform: uppercase;
}

#workskin .openbook .header::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 50%;
  width: 49%;
  height: 100%;
  border-radius: 30%;
  border-top-left-radius: 25%;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #f7efd3;
  transform: rotate(-1deg);
}

#workskin .openbook .header::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 49%;
  height: 100%;
  border-radius: 30%;
  border-top-right-radius: 25%;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #f7efd3;
  transform: rotate(1deg);
}

#workskin .openbook .header ins {
  text-underline-offset: 5px;
}

#workskin .openbook .header > *:first-child {
  margin-top: 5%;
  margin-left: 10%;
  font-size: 75%;
  text-align: left;
  transform: rotate(-1deg);
}

#workskin .openbook .header > *:last-child {
  margin-top: 5%;
  margin-right: 10%;
  padding-top: 5%;
  font-size: 75%;
  text-align: right;
  transform: rotate(1deg);
}

#workskin .openbook .chapter-title {
  position: relative;
  left: 10%;
  width: 85%;
  margin: 2% 0 5% 0;
  padding: 0;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 150%;
  font-weight: 700;
  letter-spacing: 10%;
  text-align: center;
  text-transform: uppercase;
}

#workskin .openbook .chapter-title::before,
#workskin .openbook .chapter-title::after {
  content: '';
  position: absolute;
  height: 0.125em;
  border-width: 0.05em 0;
}

#workskin .openbook .chapter-title::before {
  left: 0;
}

#workskin .openbook .chapter-title::after {
  right: 0;
}

#workskin .openbook .chapter .separator {
  left: 10%;
  width: 85%;
  padding-top: 2%;
  border-bottom: .25em double #633;
  box-sizing: border-box;
}

#workskin .openbook .chapter .separator::before {
  content: '◈';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 44%;
  width: 8%;
  background-color: #f7efd3;
  color: #5f3c2e;
  font-size: 100%;
  text-align: center;
}

#workskin .openbook .chapter {
  line-height: 1.5;
  min-height: 375px;
  padding-bottom: 1%;
}

#workskin .openbook .chapter p {
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 0;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 100%;
  color: #633;
}

#workskin .openbook .chapter > p:first-of-type {
  padding-top: 5%;
}

#workskin .openbook .chapter > p:first-of-type::first-letter {
  float: left;
  padding: 2% 1% 0 0;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 300%;
  font-weight: 700;
  text-transform: uppercase;
}

#workskin .openbook .chapter ins {
  padding-bottom: .1em;
  background-image: url('https://64.media.tumblr.com/55e6d4b17d29534d4c13b7c49d15138c/5a0920460cd22172-ed/s1280x1920/020708c0e36c446813921c992fc59723e6ff4ece.png');
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: auto 0.25em;
  color: inherit;
  text-decoration: none;
}

#workskin .openbook .chapter del {
  padding-bottom: .1em;
  background-image: url('https://64.media.tumblr.com/9fdaa5619d9a98bf13ef4f1c62c15b28/5a0920460cd22172-17/s2048x3072/8c2ea0bf70ec59e448dff32f4d3234dbd2ed5d7b.png');
  background-position: center;
  background-repeat: repeat-x;
  background-size: auto 0.25em;
  color: rgba(0,0,0,0.5);
  text-decoration: none;
}

#workskin .openbook .chapter sup {
  position: absolute;
  left: -2em;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  font-family: 'Bradley Hand', 'Bradley Hand ITC', 'Brush Script MT', 'Segoe Script', 'Lucida Handwriting', 'Georgia', serif;
  font-size: 105%;
  color: #c00;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: none;
}

#workskin .openbook .chapter > ul {
  padding-left: 10%;
  padding-right: 10%;
}

#workskin .openbook .chapter > ul ul {
  padding-left: 2%;
}

#workskin .openbook .chapter > ul > li {
  line-height: 1.286;
}

#workskin .openbook .chapter dl {
  width: 81%;
  margin-left: 5%;
  padding-top: 4%;
  border-top: solid 0 #633;
  border-width: 0.0625em 0;
  text-shadow: none;
}

#workskin .openbook .chapter dl dt {
  width: 81%;
  margin-inline-start: 6%;
  font-size: 100%;
}

#workskin .openbook .chapter dl dd {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 1rem;
}

#workskin .openbook .chapter dl .handwriting {
  font-family: 'Bradley Hand', 'Bradley Hand ITC', 'Brush Script MT', 'Segoe Script', 'Lucida Handwriting', 'Georgia', serif;
  font-size: 105%;
  color: #03c;
  letter-spacing: 1px;
}

#workskin .openbook .chapter dl .definition {
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 100%;
  color: #633;
  letter-spacing: 1px;
}

#workskin .openbook .highlight-yellow {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(222,255,0,1) 0%,rgba(222,255,0,0.5) 60%,rgba(222,255,0,1) 100%);
}

#workskin .openbook .highlight-pink {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(255,69,190,1) 0%,rgba(255,107,203,0.5) 60%,rgba(255,107,203,1) 100%);
}

#workskin .openbook .highlight-blue {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(73,179,255,1) 0%,rgba(107,193,255,0.5) 60%,rgba(107,193,255,1) 100%);
}

#workskin .openbook .highlight-green {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(67,226,15,1) 0%,rgba(39,229,54,0.5) 60%,rgba(39,229,54,1) 100%);
}

#workskin .openbook .highlight-orange {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(255,134,9,1) 0%,rgba(255,177,34,0.5) 60%,rgba(255,177,34,1) 100%);
}

#workskin .openbook .footer {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 100%;
  font-weight: 700;
}

#workskin .openbook .footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 50%;
  width: 49%;
  height: 100%;
  border-radius: 30%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 25%;
  background-color: #f7efd3;
  transform: rotate(1deg);
}

#workskin .openbook .footer::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  width: 49%;
  height: 100%;
  border-radius: 30%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 25%;
  background-color: #f7efd3;
  transform: rotate(-1deg);
}

#workskin .openbook .footer > *:first-child {
  margin-bottom: 5%;
  margin-left: 10%;
  text-align: left;
  transform: rotate(1deg);
}

#workskin .openbook .footer > *:last-child {
  margin-bottom: 5%;
  margin-right: 10%;
  text-align: right;
  transform: rotate(-1deg);
}

#workskin .hide {
  display: none;
}

<div class="bookwrapper">
     <div class="bookcontainer">
          <div class="openbook">
               <div class="header">
                    <h5><ins>Tutorial Header 1</ins></h5>
                    <h6>Tutorial Header 2</h6>
               </div> <!-- close header -->
               <div class="chapter">
                    <h1 class="chapter-title">Tutorial Chapter</h1>
                    <div class="separator"></div>
                    <p>This is an example of an open book or journal to use on AO3. The original CodePen CSS uses responsive properties to adjust the book to different screen sizes. This is an attempt to replicate that despite AO3's limitations. If you aren't vibing with the way certain things look--or you want to add different things like shadowed font or a definition area--that's okay! Things can be customized! Here's our options:
                    </p>
                    <ul>
                         <li>Serif typefaces</li>
                         <li>Header area with separate left and right sections</li>
                         <li>An adorned chapter title</li>
                         <li>A drop cap for the first letter of the first paragraph of the chapter</li>
                         <li>Indented bullet lists that continue to nest</li>
                         <li>Highlighted text in various colors</li>
                         <li>An image file to simulate strikethrough edits</li>     
                         <li>An image file to simulate underlining</li>     
                         <li>A Notes or Definition area</li>
                         <li>Page numbers</li>
                    </ul>
                    <p>You can customize these by editing your HTML or CSS.</p>
                    <ul>
                         <li>We're using unordered lists to showcase nested bullet lists as well as the various highlighter colors. Let's begin by highlighting the text at the end of this sentence in <span class="highlight-yellow">yellow</span>.
                              <ul>
                                   <li>I prefer to highlight this in <span class="highlight-orange">orange</span> instead.</li>
                                   <li>Let's try <span class="highlight-pink">pink</span>.</li>
                                   <li><span class="highlight-green">Green</span>!</li>
                                   <li><span class="highlight-blue">Blue</span>?</li>
                              </ul>
                         </li>
                         <li>We can use <del>a red line</del><sup>an editing pen</sup> in our chapter.</li>
                         <li>We can also <ins>underline</ins> important information.</li>
                    </ul>
                    <dl>
                         <dt><span class="hide"><strong>Handwritten</strong></span> <strong>Notes</strong></dt>
                         <dd class="handwriting">We use a description list to display handwritten notes in blue ink.</dd>
                         <dd class="handwriting">Alternatively, we can style it to display a word's <ins>definition</ins>. I'll show that option in the tutorial.</dd>
                    </dl> 
               </div> <!-- close chapter -->
               <div class="footer">
                    <h5>2</h5>
                    <h5>3</h5>        
               </div> <!-- close footer -->
          </div> <!-- close openbook -->
     </div> <!-- close bookcontainer -->
</div> <!-- close bookwrapper -->

27 Jun 26 - Just now noticed AO3 ate part of my tutorial in 12a. The text has been replaced.


17 Jun 26 - Changed percentages on:
#workskin .bookpages, #workskin .openbook::before
#workskin .openbook .chapter
#workskin .openbook .chapter > ul
#workskin .openbook .chapter > ul ul


17 Jun 26 - Removed/replaced .page-numbers in CSS:
Complete removal: #workskin .openbook .footer > ul.page-numbers > li 
Old: #workskin .openbook .footer .page-numbers > *:first-child 
New: #workskin .openbook .footer > *:first-child 
Old: #workskin .openbook .footer .page-numbers > *:last-child 
New: #workskin .openbook .footer > *:last-child 


17 Jun 26 - Replaced footer HTML:
<div class="footer">
     <ul class="page-numbers">
          <li>2</li>
          <li>3</li>        
     </ul>
</div>

Is now:
<div class="footer">
     <h5>2</h5>
     <h5>3</h5>        
</div>

Topics Covered

1. Starting From Scratch
2. Using an Existing Work Skin
3. Building the Container
4. Adding Book Cover, Pages, and Gutter
5. Positioning Child Elements and Selection
6. Adding Our Book Headers
7. Chapter Title
8. Separating the Title from Chapter Text
9. Chapter Text and Other Elements
10. Underlining, Strikethrough, and Superscript
11. Unordered Lists
12. Styling the Description List Section
1. Handwritten 'Notes' Section
2. Listing a Definition
13. Styling Text Using Highlighters
14. Styling the Footer Section
15. Hiding Text

Create Your Work Skin

1. Starting From Scratch

If you've never created a work skin for the specific work you are wanting to link to (i.e. use this CSS for), please visit A Step-by-Step Guide to Work Skins in the paragraph above. Meet us at Part 3.

2. Using an Existing Work Skin

If you already have an active work skin linked to your work, you'll need to amend it with the code from this one. I tried to use selectors that wouldn't override or affect any previous code that may be in your work, but be mindful if by some twist of fate you already have code with the same names as the ones below, you should rename mine so as not to override yours.

Adding and Editing CSS

3. Building the Container

Edit your work skin to open the file.

Again, if you want to simply copy/paste the entire code, then jump here.

I've found working with Flexbox makes things so much easier when you want to center a div and not rely too much on positioning elements. It's not perfect, but hey, we work with what we've got.

#workskin .bookwrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80em;
  height: 100%;
  margin: 1em auto;
  box-sizing: border-box;
}

#workskin .bookcontainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

These are the containers where your book will be. You don't have to fiddle too much with this unless you want to change the margins. I put box-sizing: border-box; so any children with borders wouldn't weird out and extend past the parent. If you notice, the height on these is 100%. This is fine if you have a moderate amount of text to display on the book pages. If, however, your text is lengthy, it will stretch your book to be higher than it is wide. I haven't found a workaround for this because I'm a dog on the internet. Later, I will talk about the code I put in so that the width/height ratio isn't too extreme on mobile if you only have two lines of text in your book. The aspect-ratio property would likely have taken care of all of this, but alas, that is one of many things AO3 does not allow.

4. Adding Book Cover, Pages, and Gutter

These are the areas of your actual book. The developer of the original code used <section> and <article> to design their responsive book, however, if I recall correctly, the AO3 work skin page just shook its head at me when I tried to use them. Therefore, we are using pseudo-elements!

#workskin .bookpages,
#workskin .openbook::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 2%;
  left: 1%;
  width: 98%;
  height: 96.5%;
  border-radius: 2%;
  box-sizing: border-box;
  background-color: #f7efd3;
}

#workskin .bookgutter,
#workskin .openbook::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4rem;
  box-sizing: border-box;
  background: linear-gradient(to right, transparent 0%,rgba(102,51,51,0.2) 46%,rgba(102,51,51,0.5) 49%,rgba(102,51,51,0.7) 50%,rgba(102,51,51,0.5) 51%,rgba(102,51,51,0.2) 52%,transparent 100%);
  transform: translate(-50%,0);
}

#workskin .bookcover,
#workskin .openbook {
  position: relative;
  border-radius: 2%;
  box-sizing: border-box;
  align-content: center;
  background-color: #8b4513;
}

Why two names for the same selectors? This was just a way for me to easily remember which part of the book I was editing. Perhaps it will help you, too. As long as you keep the same name for the selector and its pseudo-elements, it will read just fine. In other words, if you want to change the name from one I used for this tutorial: #workskin .openbook, by all means! The developer of the original CSS named theirs .open-book and I simply removed the hyphen. In the code for my character's prayer book, I had changed it to #workskin .prayerbook. All that being said, if you change the selector name, you will need to change it for ALL selectors that have .openbook within them. Let's take this apart.

#workskin .bookcover,
#workskin .openbook {
  position: relative;
  border-radius: 2%;
  box-sizing: border-box;
  align-content: center;
  background-color: #8b4513;
}

Here is our book cover. I gave this a border-radius of 2% so it would round off the edges of the book cover. In my story, the book cover is brown. You can easily change this to your preferred color by looking for background-color: #8b4513; and replacing the hex code: background-color: #8b4513;. I didn't try it on this book here, but you can add a semi-transparent background image into this part to give it texture.

4A. Sidenote: Adding a Background Image (Overlay)
For this part, you will need an image host since AO3 does NOT host images. I just use tumblr with the understanding that my links will likely break at some point. Once you find a reliable image host, find a transparent overlay you like. The image file I used in my fic was from Transparent Textures. Respect the creator's wishes regarding their images. Download the image file you want, then upload it to your preferred image host. Copy the url somewhere. In your AO3 stylesheet, add this to the above code: background-image: url('YOURURLHERE.png'); with your image url pasted between the single quotes. Moving on.

#workskin .bookpages,
#workskin .openbook::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 2%;
  left: 1%;
  width: 98%;
  height: 96.5%;
  border-radius: 2%;
  box-sizing: border-box;
  background-color: #f7efd3;
}

Here are the actual pages of the book. The only thing you'd likely modify is the background-color: #f7efd3; part, which is the color of the pages. If you do change this, you will need to change the background color for your headers, footers, and separator in the below code so that the nice rounded part of the pages and decoration will match. Top and Left are percentages I used to reduce the page size and allow the book cover to show.

#workskin .bookgutter,
#workskin .openbook::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4rem;
  box-sizing: border-box;
  background: linear-gradient(to right, transparent 0%,rgba(102,51,51,0.2) 46%,rgba(102,51,51,0.5) 49%,rgba(102,51,51,0.7) 50%,rgba(102,51,51,0.5) 51%,rgba(102,51,51,0.2) 52%,transparent 100%);
  transform: translate(-50%,0);
}

This is the book gutter--the shadow at the center of the book that differentiates the left page from the right. I changed the color to a browner shadow as the original was grey. You'll notice the colors (background) are displayed in rgba(). That includes the alpha channel which will determine font transparency. Play around with it if you don't like the brown shadow. Always back up your work.

5. Positioning Child Elements and Selection

#workskin .openbook * {
  position: relative;
}

#workskin .openbook > * {
  position: relative;
  z-index: 1;
  column-count: 2;
  column-gap: 0;
  box-sizing: border-box;
  font-family: 'Times New Roman', 'Times', serif;
  color: #633;
}

With #workskin .openbook * , all child elements will be set to allow their positioning. With #workskin .openbook > *, we're setting up the page in halves and giving it a brown font in Times New Roman. Keep in mind, when you change fonts and their sizes, things shift around on the page. You may have to adjust margins and padding if that's the case. If you want your book to display with justified text, here is where you'd add text-align: justify; so it can apply to both the paragraphs as well as the bulleted lists and handwritten/defintion section.

#workskin .openbook *::-moz-selection {
  background: rgba(222,255,0.75);
}

#workskin .openbook *::selection {
  background: rgba(222,255,0.75);
}

If you're on desktop, this code allows you to drag your cursor along the text on the page to make the words appear highlighted in yellow. Besides being interactive, I'm not too sure of the reasoning for including this. I left it in, but if you don't have a use for it, you can always remove it.

6. Adding Our Book Headers

#workskin .openbook .header {
  padding-bottom: 0;
}

#workskin .openbook .header *,
#workskin .openbook .footer * {
  margin: 0;
  margin-bottom: 5%;
  box-sizing: border-box;
  font-family: 'Times New Roman', 'Times', serif;
  font-weight: 700;
  letter-spacing: 0.125em;
  text-transform: uppercase;
}

#workskin .openbook .header::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 50%;
  width: 49%;
  height: 100%;
  border-radius: 30%;
  border-top-left-radius: 25%;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #f7efd3;
  transform: rotate(-1deg);
}

#workskin .openbook .header::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 49%;
  height: 100%;
  border-radius: 30%;
  border-top-right-radius: 25%;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #f7efd3;
  transform: rotate(1deg);
}

#workskin .openbook .header ins {
  text-underline-offset: 5px;
}

Now we've come to the headers of our book (the curved section at the top left and top right where "Tutorial Header 1" and "Tutorial Header 2" are underlined). The original CSS on CodePen could run @media queries and the calc() function in order to make things neat and tidy. These options are currently not allowed on AO3 stylesheets. Well. It was a lot of trial and error, but I used the border-radius property to curve and lengthen. I used the transform property to help curve the top of the pages as well.

If this happens, border-radius, border-top-left-radius, and border-top-right-radius are what I altered. Another reminder: if you changed your page color earlier, you'll need to change them on the background properties above if you want them to match. Don't worry too much about the footer selector. It shares properties with the header, so it saves space in the stylesheet to type this way. We'll tackle the footer last. For now, let's take a quick look at the header options.

This is the HTML for the header section in the example above:

<div class="header">
     <h5><ins>Header Using H5</ins></h5>
     <h6>Header Using H6</h6>
</div> 

If you've perused the AO3 FAQ, you'll likely have run into their page Formatting content on AO3 with HTML. In the section where they discuss headers, you'll see the different variations between the header elements.

H6 HEADER - EXTENDS UNDERLINE TO BOOK GUTTER:

<div class="header">
     <h6>H6 Header Which Extends Underline to Book Gutter</h6>
     <h6>H6 Header Which Extends Underline to Book Gutter</h6>
</div> 

AO3 automatically styles <h6> with an underline. That's the one (<h6>) we're using on the right side of this header. If you want both headers to look this way, use the HTML above.

PLAIN HEADER:

<div class="header">
     <h5>H5 Header With NO Underline</h5>
     <h5>H5 Header With NO Underline</h5>
</div> 

If you don't like the look of the underline extending all the way to the book gutter, change your headers to <h5> in the HTML, and it will take care of removing that.

H5 HEADER WITH UNDERLINED TEXT:

<div class="header">
     <h5><ins>H5 Header WITH Underline</ins></h5>
     <h5><ins>H5 Header WITH Underline</ins></h5>
</div> 

If you do like the header underlined, but don't want it extending all the way to the book gutter (you like the look of the header on the left), you can stick an insert tag (formerly underline) <ins> around the text in your HTML. I'll talk about this tag in more detail in Section 11, but for now, use the above HTML. Here's a look at the CSS of <ins> within the header.

#workskin .openbook .header ins {
  text-underline-offset: 5px;
}

The CSS code uses text-underline-offset: 5px; to style the header so that the underline (<ins>) won't butt up right against the text. (It gives it a bit of space.)

Moving on.

#workskin .openbook .header > *:first-child {
  margin-top: 5%;
  margin-left: 10%;
  font-size: 75%;
  text-align: left;
  transform: rotate(1deg);
}

#workskin .openbook .header > *:last-child {
  margin-top: 5%;
  margin-right: 10%;
  padding-top: 5%;
  font-size: 75%;
  text-align: right;
  transform: rotate(-1deg);
}

These change how the header text looks on the page. The font-size is at 75% to sit smaller. Feel free to adjust. I used the transform property to tilt the text on the page corners in an attempt to look more realistic.

7. Chapter Title

#workskin .openbook .chapter-title {
  position: relative;
  left: 10%;
  width: 85%;
  margin: 2% 0 5% 0;
  padding: 0;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 150%;
  font-weight: 700;
  letter-spacing: 10%;
  text-align: center;
  text-transform: uppercase;
}

#workskin .openbook .chapter-title::before,
#workskin .openbook .chapter-title::after {
  content: '';
  position: absolute;
  height: 0.125em;
  border-width: 0.05em 0;
}

#workskin .openbook .chapter-title::before {
  left: 0;
}

#workskin .openbook .chapter-title::after {
  right: 0;
}

Chapter Title is pretty self-explanatory. Since it styles the <h1> element in the HTML, I changed the font so it wouldn't default to AO3's <h1> font of Georgia. It will be in bold (font-weight: 700;) and will be displayed at 150% to make it larger than the font on the pages. If the chapter title in your HTML is lengthy, you may need to adjust your font-size.

8. Separating the Title from Chapter Text

#workskin .openbook .chapter .separator {
  left: 10%;
  width: 85%;
  padding-top: 2%;
  border-bottom: .25em double #633;
  box-sizing: border-box;
}

#workskin .openbook .chapter .separator::before {
  content: '◈';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 44%;
  width: 8%;
  background-color: #f7efd3;
  color: #5f3c2e;
  font-size: 100%;
  text-align: center;
}

With the original, the developer used an svg element to decorate the separator (the separation of chapter title and text). Aaaand svg elements are not allowed in the AO3 stylesheet! So. Another pseudo-element to the rescue! You can put whatever unicode symbol in there, just make sure you're checking your margins and padding if you do. If your unicode symbol is defaulting to an unsightly emoji, may I direct you to this page where it explains unicode variation selectors to change this. I won't be getting into that here. Oh! And if you changed your page color earlier, you will also need to change your background-color.

9. Chapter Text and Other Elements

#workskin .openbook .chapter {
  line-height: 1.5;
  min-height: 375px;
  padding-bottom: 1%;
}

Styling for the chapter pages. Here's where I ran into problems. I tried to make this book use up 100% of the width of the workskin container within AO3, but the height gets unpredictable. I inserted min-height: 575px; so that it wouldn't look silly if your book only had two lines of text on the page or something short. Before, it would be a much wider book than tall. This will help it look alright on mobile. However, for desktop, it still looks... off. In this instance, I used <p><br /></p> to invisibly add height. However, I had to spam that code for a total of thirteen times to get it to reach the height of my character's prayer book. By doing that, it lengthens the height on mobile, so there seems to be no happy medium. I understand this isn't ideal, but this is a reminder that this code was meant to be an answer to the limitations of responsive code that AO3 currently does not allow us to use. You can see an example of the differences below.

I've determined that using a description list, <dl>, forces the book to a certain width. In my stylesheet, it's at 81%. Removing it keeps the width/height ratio at a decent proportion, however, I didn't test it with endless words to see how that adjusts it further. I'll include Changing Height: Example 1 so you can see what I mean by adding paragraphs with a break to add invisible height, as well as Changing Height: Example 3 to view the code with the description list removed, for your convenience.

<div class="bookwrapper">
     <div class="bookcontainer">
          <div class="openbook">
               <div class="header">
                    <h5><ins>Using Paragraphs</ins></h5>
                    <h5><ins>And Line Breaks</ins></h5>
               </div> <!-- close header -->
               <div class="chapter">
                    <h1 class="chapter-title">Changing Height: Example 1</h1>
                    <div class="separator"></div>
                    <p>This book spams <code><p><br /></p></code><br />
                           To add height because<br />
                           I have only written eight lines of text<br />
                           To create this
                    </p>
                    <p>There are two paragraphs<br />
                           Separated by breaks after each line <code><br /></code><br />
                           <ins>The book is a decent height</ins><br />
                           <ins>On desktop.</ins>
                    </p>
               <!-- Here is where we begin to spam code for invisible height -->
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
                    <p><br /></p>
               <!-- Here is our description list which will be removed in Changing Height: Example 3 -->
                    <dl>
                         <dt><span class="hide"><strong>Handwritten</strong></span> <strong>Notes</strong></dt>
                         <dd class="handwriting">This is a placeholder.</dd>
                         <dd class="handwriting">This section needs to stay to maintain this width to height ratio.</dd>
                         <dd class="handwriting">I will show how removing your description list will adjust the book size shortly in <h5><small>Changing Height: Example 3</small></h5></dd>
                    </dl>
               </div> <!-- close chapter -->
               <div class="footer">
                    <h5>4</h5>
                    <h5>5</h5>        
               </div> <!-- close footer -->
          </div> <!-- close openbook -->
     </div> <!-- close bookcontainer -->
</div> <!-- close bookwrapper -->

<div class="bookwrapper">
     <div class="bookcontainer">
          <div class="openbook">
               <div class="header">
                    <h5>Removing The</h5>
                    <h5>Description List</h5>
               </div> <!-- close header -->
               <div class="chapter">
                    <h1 class="chapter-title">Changing Height: Example 3</h1>
                    <div class="separator"></div>
                    <p>This book has removed all description list from the HTML<br />
                           (the Handwritten Notes section in blue)<br />
                           Because of this, the book has changed<br />
                           It's width to height ratio <ins>considerably</ins>
                    </p>
                    <p>If this is a size you prefer<br />
                           I will include the HTML below.<br />
                           These are just visual examples to show<br />
                           How varied the look of your book may be
                    </p>
                    <p>You can still spam the <code><p><br /></p></code> lines<br />
                           In this code to add invisible height<br />
                           It will NOT change it to look as large as
                    </p>
                    <p>
                           <strong>Changing Height: Example 1</strong>
                    </p>

               <!-- Here is where we removed the description list -->

               </div> <!-- close chapter -->
               <div class="footer">
                    <h5>8</h5>
                    <h5>9</h5>        
               </div> <!-- close footer -->
          </div> <!-- close openbook -->
     </div> <!-- close bookcontainer -->
</div> <!-- close bookwrapper -->

Let's return to the next part of our stylesheet.

#workskin .openbook .chapter p {
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 0;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 100%;
  color: #633;
}

These lines of code style our chapter paragraphs. The left and right margins are equal at 10% with no padding at the top. Our paragraph font is Times New Roman. It's displayed at AO3's default font size of 100%. The color of our font is a dark brown (color: #633;). You can always change your font-family, font-size, and color to fit your particular book.

If you like the offset text for the paragraphs, you can add the following CSS to the above selector:

letter-spacing: 1px;
text-shadow: 1px 1px #d18737;

Those two lines of code were meant to give a 3D effect to the Stardew Valley text in my character's prayer book. We'll revisit these two lines of code in Section 11 because we will add those two lines of code into our unordered lists if we want the shadowed text displayed there too.

If you want a bold font without the shadow effect, you can add the following line of CSS to your group above:

font-weight: 700;

A truly responsive property would be the font-size: clamp(); function which would give hard boundaries to the font size, therefore not allowing the font to get microscopic on mobile if you're using viewport or three letters a line if you're on desktop. Another AO3 limitation. Therefore, I used percentages to define font size. Because of this, if your text (chapter) is lengthy, it will stretch your book to be three stories tall on mobile. Turning your device to landscape is not ideal, but works to help read. If there's a workaround, please advise.

#workskin .openbook .chapter > p:first-of-type {
  padding-top: 5%;
}

#workskin .openbook .chapter > p:first-of-type::first-letter {
  float: left;
  padding: 2% 1% 0 0;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 300%;
  font-weight: 700;
  text-transform: uppercase;
}

And to finish up our paragraph styling, we have two last things. The first part of this code gives the first paragraph of the chapter some room at the top (gives it room from the decorative chapter title separator). The second part of the code styles the first letter of the chapter to make it look fancy (drop cap).

10. Underlining, Strikethrough, and Superscript

#workskin .openbook .chapter ins {
  padding-bottom: .1em;
  background-image: url('https://64.media.tumblr.com/55e6d4b17d29534d4c13b7c49d15138c/5a0920460cd22172-ed/s1280x1920/020708c0e36c446813921c992fc59723e6ff4ece.png');
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: auto 0.25em;
  color: inherit;
  text-decoration: none;
}

#workskin .openbook .chapter del {
  padding-bottom: .1em;
  background-image: url('https://64.media.tumblr.com/9fdaa5619d9a98bf13ef4f1c62c15b28/5a0920460cd22172-17/s2048x3072/8c2ea0bf70ec59e448dff32f4d3234dbd2ed5d7b.png');
  background-position: center;
  background-repeat: repeat-x;
  background-size: auto 0.25em;
  color: rgba(0,0,0,0.5);
  text-decoration: none;
}

#workskin .openbook .chapter sup {
  position: absolute;
  left: -2em;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  font-family: 'Bradley Hand', 'Bradley Hand ITC', 'Brush Script MT', 'Segoe Script', 'Lucida Handwriting', 'Georgia', serif;
  font-size: 105%;
  color: #c00;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: none;
}

We will be using these to style our book text with "the reader is also an editor" mindset. With these styles, we will overwrite the AO3 stylesheet when it comes to underlining, using strikethroughs, and using superscript. Let's get into this one by one, starting with underlining.

#workskin .openbook .chapter ins {
  padding-bottom: .1em;
  background-image: url('https://64.media.tumblr.com/55e6d4b17d29534d4c13b7c49d15138c/5a0920460cd22172-ed/s1280x1920/020708c0e36c446813921c992fc59723e6ff4ece.png');
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: auto 0.25em;
  color: inherit;
  text-decoration: none;
}

First, we will be working with <ins> or insert element (formerly underline or <u>, now deprecated). With #workskin .openbook .chapter ins we use an image file in order to make it appear as if someone used a blue pen to underline the text. In the original code, an svg element was used in order to "draw" the image out using code (text strings). I prefer that way (using svg elements), however, as I stated earlier, AO3 does not allow svg elements. So the svg was converted into an image file that I uploaded to my tumblr. Credit for the underline and strikethrough goes to Erin E. Sullivan. They wrote the text strings that created the svg elements, but you are welcome to save and use my png images that were converted from their code. I say "save" because while I don't mind anyone linking to my uploaded tumblr images, if tumblr breaks the links from their end, the images won't load (show) on your work. Separately, if you aren't keen on the colors, I imagine any photo editing software that saves with transparency will work to change that.

#workskin .openbook .chapter del {
  padding-bottom: .1em;
  background-image: url('https://64.media.tumblr.com/9fdaa5619d9a98bf13ef4f1c62c15b28/5a0920460cd22172-17/s2048x3072/8c2ea0bf70ec59e448dff32f4d3234dbd2ed5d7b.png');
  background-position: center;
  background-repeat: repeat-x;
  background-size: auto 0.25em;
  color: rgba(0,0,0,0.5);
  text-decoration: none;
}

Next is <del> or deleted text (formerly strike/strikethrough or <s>, now deprecated). With #workskin .openbook .chapter del we use an image file in order to make it appear as if someone used a red pen to cross out words in the book. If you notice with color: rgba(0,0,0,0.5); the rgb part sets the text color to black and the alpha channel to 0.5 (or a transparency of 50%). If you don't want your text to change transparency because of a strikethrough, you can either change the rgb to your font color and set the alpha channel to 1, or simply delete that line of code.

#workskin .openbook .chapter sup {
  position: absolute;
  left: -2em;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  font-family: 'Bradley Hand', 'Bradley Hand ITC', 'Brush Script MT', 'Segoe Script', 'Lucida Handwriting', 'Georgia', serif;
  font-size: 105%;
  color: #c00;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: none;
}

And the final part of this section is <sup> or superscript. With #workskin .openbook .chapter sup we change the style of our font in order to make it appear as if someone used a red pen to write notes above the words we crossed out with the previous code. Again, my character's handwriting is 'Bradley Hand' so that can be changed to a font you prefer. The line text-shadow: none; is included here in the event you choose to change the text in your book to the shadowed text I talked about in the last section. It will prevent the handwritten words in red ink from having a shadow like the printed text of the book. If you aren't using shadowed text, you can delete this line of code.

I've highlighted the code above that needs attention if your crossed out word is toward the left or right margin. These will need to be edited, and I'll show you what I mean by crossed out words being near the left or right margin below.

What I've found works (though ultimately, you likely have to edit code to find what works best for your book), is below.

If Your Crossed Out Word Is Aligned to the Left Margin in Superscript, Try:

left: 0;
text-align: left;

If Your Crossed Out Word Is Aligned to the Right Margin in Superscript, Try:

left: 0;
text-align: right;

If you have several words which will be crossed out, then I'm afraid you'll have to edit until you find what works best for your book. Since this is a responsive book, I'm not too sure there is a "one size fits all" AO3-limited code that will work on both smaller screens and when viewing from desktop.

Below, I am including the HTML and CSS of the <ruby> code that I used in the example above, so anyone who would like to try to adjust the code to work is able to. This code is not included in the full HTML/CSS code at the beginning of this tutorial.

<ul>
     <li><ruby><del>First</del><rt>left margin word</rt></ruby> word of a thought or list in ruby</li>
     <li>Placeholder text</li>
     <li>Using ruby: A crossed out word at the <ruby><del>end</del><rt>right margin word</rt></ruby></li>
     <li>Placeholder text</li>
     <li>Crossing out the <ruby><del>center</del><rt>centered word</rt></ruby> using ruby</li>
</ul>

#workskin .openbook .chapter rt {
  margin-top: 0;
  font-family: 'Bradley Hand', 'Bradley Hand ITC', 'Brush Script MT', 'Segoe Script', 'Lucida Handwriting', 'Georgia', serif;
  font-size: 105%;
  color: #c00;
  letter-spacing: 1px;
  text-shadow: none;
}

Therefore, you have to get creative with using a font that may or may not display on all sorts of different browsers. Or, we can find a web-safe font. One resource by cmfic01 here on AO3 gives visual examples of fonts that can be used, and it is immensely helpful if you don't want to stick with AO3's default font. W3 Schools has a page discussing Web Safe Fonts with visual examples as well.

11. Unordered Lists

#workskin .openbook .chapter > ul {
  padding-left: 10%;
  padding-right: 10%;
}

#workskin .openbook .chapter > ul ul {
  padding-left: 2%;
}

#workskin .openbook .chapter > ul > li {
  line-height: 1.286;
}

Unordered lists are just as they sound: lists to display our text. They're structured to indent with bullet points. Let's begin with the first part: #workskin .openbook .chapter > ul. If you like the offset (shadowed) text for the paragraphs, you can add the following CSS to the above selector:

letter-spacing: 1px;
text-shadow: 1px 1px #d18737;

Alternately, if you want a bold font without the shadow effect, you can add the following line of CSS to the selector #workskin .openbook .chapter > ul:

font-weight: 700;

Continuing with edits, if you'd like your lists to display differently from the regular text, you can change the color of the text by adding a color: red; to the first code and change it to whatever color name, hex code, or rgba() function. And if you prefer your lists to be numbered (ordered), swap out any ul for ol. If you edit your CSS, you'll need to edit your HTML to reflect this change.

12. Styling the Description List Section

#workskin .openbook .chapter dl {
  width: 81%;
  margin-left: 5%;
  padding-top: 4%;
  border-top: solid 0 #633;
  border-width: 0.0625em 0;
  text-shadow: none;
}

#workskin .openbook .chapter dl dt {
  width: 81%;
  margin-inline-start: 6%;
  font-size: 100%;
}

#workskin .openbook .chapter dl dd {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 1rem;
}

In Section 11, we discussed unordered lists. This group of code is our description list, and it's used to style the "Notes" or "Definition" section (the very last section). So <dl> styles the container of the section (or list), <dt> styles the text (or term), and <dd> styles the definition (or details). I had to leave out the break-inside: avoid-column; code from the original because AO3 said no. If you move the <dl> HTML into the middle of your chapter, as opposed to the end as I did, you may want to replace border-top: solid 0 #633; with border: solid 0 #633; so the lines will border top and bottom as the original does. Again, the line text-shadow: none; keeps the handwritten blue pen words from having a shadow like the printed text of the book in the event you add those two lines of code from Section 9. If you aren't going to use shadowed text, you can delete that line of code. We will look at two options for our description list. First, handwritten notes.

A. Handwritten 'Notes' Section

#workskin .openbook .chapter dl .handwriting {
  font-family: 'Bradley Hand', 'Bradley Hand ITC', 'Brush Script MT', 'Segoe Script', 'Lucida Handwriting', 'Georgia', serif;
  font-size: 105%;
  color: #03c;
  letter-spacing: 1px;
}

In my character's prayer book, I styled the text to be in my character's handwriting, Bradley Hand (or an alternative font for those who are reading from a browser that doesn't support that font for whatever reason). I increased the font size to 105% for my particular use. The code color: #03c; makes the pen ink appear blue. For my character's handwriting, having letter-spacing: 1px; makes the font appear more legible (to me). You can edit this depending on your preferred font, or remove that line completely if your font reads well. Let's pause and look at the HTML.

<dl>
     <dt><span class="hide"><strong>Handwritten</strong></span> <strong>Notes</strong></dt>
     <dd class="handwriting">We use a description list to display handwritten notes in blue ink.</dd>
     <dd class="handwriting">Alternatively, we can style it to display a word's <ins>definition</ins>. I'll show that option in the tutorial.</dd>
</dl>

You may notice in the HTML portion, this section of code lacks the paragraph tag: <p>. You don't need it here. In fact, adding that tag will mess with your output because AO3 has a particular declaration already set for its paragraphs. I digress.

B. Listing a Definition

#workskin .openbook .chapter dl .definition {
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 100%;
  color: #633;
  letter-spacing: 1px;
}

If you're looking to do as the original source code did and use this section to list a definition, then the code would be different. It uses the same font family, size, and color as the chapter pages. This code shouldn't conflict with anything in Part A, but if you're not using one or the other, it's okay to remove it from your stylesheet. Let's look at the HTML and the output.

<dl>
     <dt class="definition"><strong>fan&bull;fic&bull;tion</strong></dt>
     <dd class="definition">
          <em>noun</em><br />
          stories involving popular fictional characters that are written by fans and often posted on the Internet.
     </dd>
</dl>

Again, if you aren't going to include a Notes or Definition section in your book, then you really don't need any of Section 12's code in your stylesheet. Revisit Section 9 to see how removing this HTML affects the look of your book.

13. Styling Text Using Highlighters

#workskin .openbook .highlight-yellow {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(222,255,0,1) 0%,rgba(222,255,0,0.5) 60%,rgba(222,255,0,1) 100%);
}

#workskin .openbook .highlight-pink {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(255,69,190,1) 0%,rgba(255,107,203,0.5) 60%,rgba(255,107,203,1) 100%);
}

#workskin .openbook .highlight-blue {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(73,179,255,1) 0%,rgba(107,193,255,0.5) 60%,rgba(107,193,255,1) 100%);
}

#workskin .openbook .highlight-green {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(67,226,15,1) 0%,rgba(39,229,54,0.5) 60%,rgba(39,229,54,1) 100%);
}

#workskin .openbook .highlight-orange {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(255,134,9,1) 0%,rgba(255,177,34,0.5) 60%,rgba(255,177,34,1) 100%);
}

These are five colors which you can use to highlight any text. The original CSS used <mark>, but AO3 does not allow this code. We will use <span> within our HTML to highlight selected text. The only thing I added to this code was <padding> to keep the highlighter from abruptly ending at the end of the word. Here's an example.

If I want a portion of a sentence in my book to be highlighted yellow, <span class="highlight-yellow">I would wrap my text in span.</span>

Highlighters will only work if they are in the book! This is because I wrote the code to only affect the span within the selector #workskin .openbook. If you would like the highlighters to work for your entire story (outside of the book), remove the .openbook selector. Your code for a yellow highlighter will now read as:

#workskin .highlight-yellow {
  padding: .05em .15em;
  background: linear-gradient(to bottom, rgba(222,255,0,1) 0%,rgba(222,255,0,0.5) 60%,rgba(222,255,0,1) 100%);
}

And come out like this:

If I want a portion of a sentence in my work to be highlighted yellow, <span class="highlight-yellow">I would wrap my text in span.</span>

14. Styling the Footer Section

#workskin .openbook .footer {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 100%;
  font-weight: 700;
}

#workskin .openbook .footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 50%;
  width: 49%;
  height: 100%;
  border-radius: 30%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 25%;
  background-color: #f7efd3;
  transform: rotate(1deg);
}

#workskin .openbook .footer::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  width: 49%;
  height: 100%;
  border-radius: 30%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 25%;
  background-color: #f7efd3;
  transform: rotate(-1deg);
}

#workskin .openbook .footer > *:first-child {
  margin-bottom: 5%;
  margin-left: 10%;
  text-align: left;
  transform: rotate(1deg);
}

#workskin .openbook .footer > *:last-child {
  margin-bottom: 5%;
  margin-right: 10%;
  text-align: right;
  transform: rotate(-1deg);
}

These style the footer of your book, specifically the curves of the bottom of the book pages as well as how the book page numbers display. There are a few different things going on here. Let's get into the first group.

#workskin .openbook .footer {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 100%;
  font-weight: 700;
}

#workskin .openbook .footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 50%;
  width: 49%;
  height: 100%;
  border-radius: 30%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 25%;
  background-color: #f7efd3;
  transform: rotate(1deg);
}

#workskin .openbook .footer::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  width: 49%;
  height: 100%;
  border-radius: 30%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 25%;
  background-color: #f7efd3;
  transform: rotate(-1deg);
}

For the curves, you may need to adjust border-bottom-left-radius and border-bottom-right-radius, depending on how much text is in the chapter of your book. A reminder, if you changed your page color earlier, you will also need to change your background-color. The transform property is used to manipulate the curves on the bottom of the book pages.

#workskin .openbook .footer > *:first-child {
  margin-bottom: 5%;
  margin-left: 10%;
  text-align: left;
  transform: rotate(1deg);
}

#workskin .openbook .footer > *:last-child {
  margin-bottom: 5%;
  margin-right: 10%;
  text-align: right;
  transform: rotate(-1deg);
}

I replaced this code from the original post. We were previously using <ul> with a .page-numbers class. Because of that format, it was pushing the page numbers into weird spaces on smaller screens. So the above code is updated so that won't happen.

Both sides of the footer are 5% from the bottom of the div and 10% away from the margin on their respective side. text-align is used to make sure the text aligns to the margin it needs. The transform property is used to tilt the page numbers in an attempt to appear realistic against the curve of the page.

Let's pause our CSS and review our HTML for a minute.

<div class="footer">
     <h5>2</h5>
     <h5>3</h5>    
</div> 

These lines of code are where our page numbers live (in the footer). You can change the numbers to display your preferred page number or text.

15. Hiding Text

#workskin .hide {
  display: none;
}

This bit of code is used to hide any text from being displayed through CSS. It does not hide the text from screen readers, and when you click Hide Creator's Style, it will be right there in your story. In my character's prayer book, I used it to hide the detailed section information from the reader, but it allows the full details to be read by screen readers. Here is the example you may have noticed above in Section 12a so you get a better understanding of how and why I used the #workskin .hide code:

<dt><span class="hide"><strong>Handwritten</strong></span> <strong>Notes</strong></dt>

So the reader will only see "Notes", but a screen reader should give a more descriptive reason for the section: Handwritten Notes.

Final Notes

This ended up lengthy, so thank you to those of you who were patiently waiting for me to get this posted! I suspect this book would work better with CSS Grid, however, there are still so many properties that are not allowed on AO3 (like grid-column-start). So much so, I gravitated toward Flexbox to build the base. I'm sure this will become a working file. Updated and amended as time goes. Hopefully future AO3 allows all the code the current parser snipes so this workaround can be updated with current code.

I enjoy playing with HTML and CSS! Regarding this specific tutorial, if there's streamlining, improvements, suggestions, clarification needed, or corrections to be made, I welcome your thoughts! If there are areas I am being redundant, let me know so I can edit. This tutorial was let loose to roam AO3 so our characters can read a good book, carry around detective notes, write in their personal journal, or anything else you imagine.

If you end up finding any part of this tutorial useful, please let me know before you go! And if you liked this tutorial enough to use it for your work, feel free to link it in the comments or 'inspired by' so I can see! Thank you for reading!

      _______   _______
    // ~ ~~ ~ Y ~ ~~ ~ \\
   // ~~~ ~~~ | ~ ~~ ~~ \\
  // ~ ~~~~ ~ | ~~~~ ~~~ \\
 //‗‗‗‗‗‗‗‗‗‗‗|‗‗‗‗‗‗‗‗‗‗‗\\
 `-----------´ `-----------´