Chapter Text

This is a heading

Chapter 1

YEAR 30,000

ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST

THIRD MONTH OF AUTUMN

-

YEAR 30,000

ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST

THIRD MONTH OF AUTUMN

ROAN

YEAR 10,302

FIRST YEAR UNDER THE REIGN OF QUEEN ZELDA THE LIBERATOR

THIRD MONTH OF SPRING

WOLF

YEAR 11,669

SEVENTEENTH YEAR UNDER THE REIGN OF QUEEN ZELDA THE RESURGENT

SECOND MONTH OF SPRING

ADLER

YEAR 10,572

432ND YEAR IN THE AGE OF PIRACY

SECOND MONTH OF SUMMER

LUCIEL

HTML Coding (In Text)

<p class="goldtitle" align="center"><strong>Chapter 1</strong></p>

<p class="blueheader" align="right"><strong>YEAR 30,000</strong></p>
<p class="blueheader" align="right"><strong>ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST</strong></p>
<p class="blueheader" align="right"><strong>THIRD MONTH OF AUTUMN</strong></p>

<p class="blueheader5" align="right"><strong>YEAR 30,000</strong></p>
<p class="blueheader5" align="right"><strong>ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST</strong></p>
<p class="blueheader5" align="right"><strong>THIRD MONTH OF AUTUMN</strong></p>

CSS Coding (Workskin)

#workskin .blueheader {
  text-shadow: 1px 1px 2px black, -1px -1px 4px #191a1d;
  color: #489ab8;
  font-size: 1.1em;
  font-family: Georgia,Times,Times New Roman,serif;
  border-radius: 2px;
  border-right: 10px solid #fad384;
  padding-right: 15px;
  padding: 11px;
  transform: skewY(-.3deg);
  margin: 0px auto;
}

#workskin .blueheader5 {
  text-shadow: 1px 1px 2px black, -1px -1px 4px #191a1d;
  color: #489ab8;
  font-size: 1.1em;
  font-family: Georgia,Times,Times New Roman,serif;
  border-radius: 2px;
  border-right: 10px solid #fad384;
  padding-right: 15px;
  padding: 10px;
  background: linear-gradient(90deg, #1d718200 98%, rgba(242,190,84,1) 100%);
  transform: skewY(-.3deg);
  margin: 0px auto;
}

#workskin .goldtitle {
  color: #f2be54;
  font-weight: bold;
  font-size: 30px;
  font-family: Georgia,Times,Times New Roman,serif;
  text-align: center;
  text-shadow: -1px 1px 3px #191a1d, 1px -1px 3px #191a1d;
  transform: skewY(-.3deg);
}

Chapter Text

I don't know what I did, but there needs to be a space before, and only one.

HTML Code (In Text)

<p class="handleextrabottombox"> </p>

<p class="handleextratopbox"> </p>

<p class="handlebox">  </p>

<p class="screenbox">  </p>

<p class="blackbox">  </p>

CSS Code (In Work Skin)

#workskin .blackbox {
  position: relative;
  margin: 0 auto;
  margin-left: 20%;
  overflow: hidden;
  border: 10px solid #402e26;
  border-radius: 50px;
  border-top: 10px solid #3a2c32;
  border-right: 20px solid #2c2126;
  border-bottom: 10px solid rgb(23, 15,  23);
  border-left: 20px solid rgb(20, 10, 20);
  background: linear-gradient(42deg, rgba(23,15,23,1) 34%, rgba(44,33,38,1) 88%);
  box-shadow: -10px 5px 3px rgb(31, 20, 20, 20);
  width: 70%;
  height: 250px;
}

#workskin .screenbox {
  position: absolute;
  margin: 0 auto;
  margin-left: 35%;
  margin-right: 30%;
  top: 7em;
  z-index: 1;
  border: 10px solid #402e26;
  border-radius: 25px;
  border-top: 5px solid rgb(23, 15,  23);
  border-right: 5px solid rgb(20, 10, 20);
  border-bottom: 5px solid #2c2126;
  border-left: 5px solid #3a2c32;
  background: linear-gradient(42deg, rgba(22,17,22,1) 34%, rgba(10,5,10,1) 88%);
  box-shadow: -10px 5px 3px #2c2126;
  max-width: 50%;
  width: 60%;
  height: 175px;
  cursor: not-allowed;
}

#workskin .screenbox:hover {
  position: absolute;
  margin: 0 auto;
  margin-left: 35%;
  margin-right: 30%;
  top: 7em;
  z-index: 1;
  border: 10px solid #402e26;
  border-radius: 25px;
  border-top: 5px solid #12d3d3;
  border-right: 5px solid #12d3d3;
  border-bottom: 5px solid #0ea4a4;
  border-left: 5px solid #0ea4a4;
  background: rgba(112,255,251,1);
  box-shadow: -10px 10px 6px #0a7676,  7px -7px 6px #0a7676;
  max-width: 50%;
  width: 60%;
  height: 175px;
  cursor: not-allowed;
  transition: 2.5s ease;
}

#workskin .handlebox {
  position: absolute;
  margin: 0 auto;
  margin-left: 5%;
  margin-right: 60%;
  overflow: hidden;
  border: 10px solid #402e26;
  border-radius: 50px;
  border-radius-right: 5px;
  border-top: 10px solid #3a2c32;
  border-right: 10px solid #2c2126;
  border-bottom: 10px solid rgb(23, 15,  23);
  border-left: 20px solid rgb(20, 10, 20);
  background: rgba(23,15,23,1);
  width: 7%;
  height: 250px;
  box-shadow: -10px 5px 3px rgb(31, 20, 20, 20);
}

#workskin .handleextratopbox {
  position: absolute;
  z-index: 2;
  margin: 0 auto;
  margin-left: 11%;
  margin-right: 50%;
  overflow: hidden;
  border: 10px solid #402e26;
  border-radius: 0px;
  border-top: 10px solid #3a2c32;
  border-right: none;
  border-bottom: none;
  border-left: none;
  background: rgba(23,15,23,1);
  width: 20%;
  height: 50px;
}

#workskin .handleextrabottombox {
  position: absolute;
  z-index: 2;
  margin: 0 auto;
  margin-left: 10%;
  margin-right: 50%;
  top: 270px;
  overflow: hidden;
  border: 10px solid #402e26;
  border-radius: 0px;
  border-top: none;
  border-right: none;
  border-bottom: 10px solid rgb(23, 15,  23);
  border-left: none;
  background: rgba(23,15,23,1);
  box-shadow: 0px 5px 3px rgb(31, 20, 20, 20);
  width: 20%;
  height: 50px;

}

HTML

<p></p><div class="triforce-container">

<p></p><div class="triforce-container-tophalf">

<p> </p></div>

<p></p><div class="triforce-container-bothalf">

<p> </p></div>

<p></p><div class="triforce-container-bothalf2">

<p> </p></div>

<p> </p></div>

CSS

-Am I nerdy yet?

#workskin .triforce-container {
  position: relative;
  margin: 0 auto;
  height: 300px;
  width: 300px;
  font-size: 0;
}

#workskin .triforce-container-tophalf {
  position: relative;
  margin: 0 auto;
  top: 0;
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 150px solid gold;
  transition: 2s;
  transition-delay: 2s;
}

#workskin .triforce-container-bothalf {
  position: relative;
  margin: 0 auto;
  left: -75px;
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 150px solid gold;
  transition: 2s;
  transition-delay: 2s;
}

#workskin .triforce-container-bothalf2 {
  position: absolute;
  margin: 0 auto;
  top: 150px;
  left: 150px;
  width: 0px;
  height: 0px;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 150px solid gold;
  transition: 2s;
  transition-delay: 2s;
}

#workskin .triforce-container-bothalf2:hover {
  border-bottom: 150px solid #9efc72;
  transition: 2s;
}

#workskin .triforce-container-bothalf:hover {
  border-bottom: 150px solid #72cefc;
  transition: 2s;
}

#workskin .triforce-container-tophalf:hover {
  border-bottom: 150px solid #fc8972;
  transition: 2s;
}

Chapter Text

Hover and Unorganized Lists

CSS

#workskin .opacity5 {
  transition: 2s;
  opacity: 5%;
}

#workskin .opacity5:hover {
  opacity: 20;
  transition: opacity 10s;
}

#workskin .blueglow {
  transition: 2s;
  opacity: 20%;
}

#workskin .blueglow:hover {
  text-shadow: 1px 1px 0px black , -1px -1px 0px black;
  color: #00FFFF;
  opacity: 80%;
  transition: opacity .5s;
}

#workskin .bluetoredglow {
  text-shadow: 1px 1px 0px black , -1px -1px 0px black;
  color: #00FFFF;
  transition: 2s;
  opacity: 80%;
}

#workskin .bluetoredglow:hover {
  color: #ff0066;
  opacity: 100%;
  transition: color 3s, opacity 2s;
  text-shadow: 1px -1px 0px #fcba03, -1px 1px black;
}

#workskin .redglow:hover {
  color: #fcba03;
  font-weight: bold;
  font-family: Georgia,Times,Times New Roman,serif;
  text-shadow: 1px 1px 0 black, 0 0 4px #fff019;
  transition: 1s;
  opacity: 100%;
}

#workskin ul {
  list-style: none;
  padding-left: 0;
}

HTML ("Rich Text" will erase any "Ul" class tags)

<div class="opacity5">

<p>Despite this, he attempted to stand. The liquid fell away from him and pooled back into the container with echoing slaps. His efforts were met with a hard knock to the head and his foot slipping on slick grime.&nbsp;</p>

<p>Now on the floor, he could see nothing even with his eyes wide open. The distortion of black around him was inherently unnerving.&nbsp;</p>

<p>Something with small, moving legs touched his foot and the boy&rsquo;s cries assaulted his ears. In an effort to flee, his hand walked onto something smooth that immediately lit the small rocky cavern and decorated tub in <span class="blueglow">blue light</span>!</p>

<ul class="blueglow">

<p>He didn&rsquo;t know what it was but he stole the small object&rsquo;s light and kept it near his beating chest.&nbsp;</p>

<p>Something like water crawled down from his damp hair and onto his back.</p>

<p>&nbsp;The blue light flickered and the boy decided he didn&rsquo;t want to be in a place where his toes were red and numb, and his breaths reverberated like the world&rsquo;s only noise.&nbsp;</p>

<p>His fingers slid over jagged edges and bled raw but he followed the tantalizing scent of fresh air through the cave&rsquo;s crevasses.&nbsp;</p>

<ul class="bluetoredglow">

<p>The rocks relaxed into an open cave mouth where the boy craned his neck at the red night sky. It bathed the wilting forests in blood like light and dyed their leaves a muddy brown. He stared fervently at the pale face mocking him with its height and presence.&nbsp;</p>

<p>In this moment, the boy would come to recognize the red moon as the first of many things in this world as utterly and irrecoverably wrong.</p>

<p>The sky should be filled with a navy so deep the stars shone through like lanterns in a forest. A blue like the deepest lakes and the richest dyes.&nbsp;</p>

<p>Not weeping with<span class="redglow"> bloody light</span>.</p>

</ul>
</ul>

<p> </p></div>

Jump to Inspired by: How to Make a "Choose Your Own Adventure" Fic by La_Temperanza

Chapter 1

YEAR 30,000

ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST

THIRD MONTH OF AUTUMN

CSS

#workskin .blueglowlink {
  text-shadow: .5px .5px 1px #0033cc , -.5px -.5px 1px #0033cc;
  text-size: 100em;
  color: #00FFFF;
}

#workskin .storycontainer {
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  height: 1000px;
  margin-bottom: 50px;
}

#workskin .page {
  margin-top: 25px;
  height: 1000px;
  overflow-y: auto;
}

#workskin .page::-webkit-scrollbar {
  -webkit-appearance: none;
  display: none;
}

#workskin .page::-webkit-scrollbar:vertical {
  width: 12px;
}

#workskin .page::-webkit-scrollbar:horizontal {
  height: 12px;
}

#workskin .page::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 10px;
  border: 2px solid #ffffff;
}

#workskin .page::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff;
}

HTML

<div class="storycontainer">

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<div class="page">

<p>
      <a name="pageone" rel="nofollow" id="pageone"></a>
    </p>

<p align="center">
      <span class="blueglowlink"><strong> <a href="#pagetwo" rel="nofollow"> Wake up.</a> </strong> </span><br />
<br />
</p></div>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<div class="page">

<p><a name="pagetwo" rel="nofollow" id="pagetwo"></a> </p>

<p align="center">His body sensed the oppressive cold before anything else. It lapped at his body in a viscous liquid while frosty air caressed his face.</p>

<p class="blueglowlink" align="center">
      <strong><a href="#pagethree" rel="nofollow"> Wake up!</a> </strong>
    </p>

<p class="blueglowlink" align="center">
      <strong> <a href="https://ao3-rd-8.onrender.com/" rel="nofollow">Sleep...</a> </strong>
    </p></div>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<div class="page">

<p>
      <a name="pagethree" rel="nofollow" id="pagethree"></a>
    </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p></p><div class="opacity5">

<p>Despite this, he attempted to stand. The liquid fell away from him and pooled back into the container with echoing slaps. His efforts were met with a hard knock to the head and his foot slipping on slick grime. </p>

<p>Now on the floor, he could see nothing even with his eyes wide open. The distortion of black around him was inherently unnerving. </p>

<p>Something with small, moving legs touched his foot and the boy’s cries assaulted his ears. In an effort to flee, his hand walked onto something smooth that immediately lit the small rocky cavern and decorated tub in <span class="blueglow">blue light</span>!</p><ul class="blueglow">

<p>He didn’t know what it was but he stole the small object’s light and kept it near his beating chest. </p>

<p>Something like water crawled down from his damp hair and onto his back.</p>

<p> The blue light flickered and the boy decided he didn’t want to be in a place where his toes were red and numb, and his breaths reverberated like the world’s only noise. </p>

<p>His fingers slid over jagged edges and bled raw but he followed the tantalizing scent of fresh air through the cave’s crevasses. </p><ul class="bluetoredglow">

<p>The rocks relaxed into an open cave mouth where the boy craned his neck at the red night sky. It bathed the wilting forests in blood like light and dyed their leaves a muddy brown. He stared fervently at the pale face mocking him with its height and presence. </p>

<p>In this moment, the boy would come to recognize the red moon as the first of many things in this world as utterly and irrecoverably wrong.</p>

<p>The sky should be filled with a navy so deep the stars shone through like lanterns in a forest. A blue like the deepest lakes and the richest dyes. </p>

<p>Not weeping with<span class="redglow"> bloody light</span>.</p></ul>
</ul></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

<p class="goldtitle" align="center">
  <strong>Chapter 1</strong>
</p>
<p> </p>
<p> </p>

<p>INSERT WORDS HERE</p>

<p> </p></div>

</div>

Chapter Text

Inspired by/From: How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) by La_Temperanza

 I've put the return1 bookmark right here.

(This is a personal reference for me. It's from their fic ^^^)

<a name="return1" id="return1"></a>       (Creates a link name. Return1 can be changed to anythig.

<a href="#return1" class="hovertext1"> <span class="hide">Text with Creator's Style turned off</span></a> 

                                                                   ( a href creates a link address, a URL so to speak.) 

                                                                   ( Class="" determines what this link looks like)

..................................

<span class="hide">^{[ <a href="#note1">Click this if hover effect is disabled</a> ]}</span>

                                                                   (Creates an invisible link that looks like a footnote. Only visible on "hide creator's style")

<p class="hide">

           <a name="note1" id="note1"><Instead of a hover-over, this creates an extra footnote with a return to text link. Make sure the hrefs match their locations.^{[<a href="#return1" title="return to text">return to text</a>]}

</p>                                                              

Changing Text on Hover

HTML+Example

<p class="Ch-13-bluheader-change"></p>

THIRD MONTH OF AUTUMN

<a name="return1" id="return1"></a><a href="#return1" class="hovertext1">

<a name="return1" id="return1"></a><a href="#return1" class="hovertext2">

<a name="return1" id="return1"></a><a href="#return1" class="hovertext3">

<a name="return1" id="return1"></a><a href="#return1" class="hovertext4">

<a name="return1" id="return1"></a><a href="#return1" class="hovertext5">

CSS

#workskin .Ch-13-blueheader-change:after {
  content: "THIRD MONTH OF AUTUMN";
  color: #4bbec4;
  text-shadow: 0px .5px 0px black;
  text-align: right;
  font-weight: bold;
  font-size: 1.1em;
  font-family: Georgia,Times,Times New Roman,serif;
  border-radius: 2px;
  border-right: 10px solid #fad384;
  padding-right: 15px;
  transform: skewY(-.3deg);
  margin: 0px auto;
  transition: .2s;
  transition-delay: 2s;
}

#workskin .Ch-13-blueheader-change:hover:after {
  content: "TOMORROW...";
  transition: .1s;
}

#workskin a.hovertext1:after { content: 'Hovertext1.'; } #workskin a.hovertext1:hover:after, #workskin a.hovertext1:focus:after { content: 'Base and hover uses after'; display: inline; background-color: #FFF; color: #2a2a2a; border-bottom: 1px solid #FFF; position: relative; margin: 0px; padding: 0px; }





#workskin a.hovertext2:before { content: 'Hovertext2'; } #workskin a.hovertext2:hover:after, #workskin a.hovertext2:focus:after { content: 'Base class uses before, Hover class uses after'; display: inline; background-color: #FFF; color: #2a2a2a; border-bottom: 1px solid #FFF; position: relative; margin: 0px; padding: 0px; }





#workskin a.hovertext3:after { content: 'Hovertext3'; } #workskin a.hovertext3:hover:before, #workskin a.hovertext3:focus:after { content: 'Base class uses after, Hover class uses before'; display: inline; background-color: #FFF; color: #2a2a2a; border-bottom: 1px solid #FFF; position: relative; margin: 0px; padding: 0px; }





#workskin a.hovertext4:after { content: 'Hovertext4'; } #workskin a.hovertext4:hover:after, #workskin a.hovertext4:focus:after { content: 'This uses the bare minimum of just a content change.'; }







#workskin a.hovertext5:after { content: 'Hovertext5'; }

#workskin a.hovertext5:hover:after,
#workskin a.hovertext5:focus:after {
  content: 'Propeller';
  display: block;
  position: relative;
  color: red;
  font-weight: bold;
  font-size: 5em;
  text-decoration: none;
  text-align: center;
  margin: auto;
  background: radial-gradient(circle, rgba(0,180,255,1) 18%, rgba(0,161,255,1) 52%, rgba(255,0,0,1) 77%, rgba(70,243,252,1) 100%);
  border-radius: 50px;
  max-width: 75%;
  box-shadow: 5px 5px 10px yellow, -5px -5px 10px yellow;
  transition-delay: color 7s;
  transition-timing-function: ease-in-out;
  transition: text-align 2s, font-size 2s, color 3s, font-size 5s, background 5s, -webkit-transform 30s, -moz-transform 30s, -ms-transform 30s, -o-transform 30s;
  -webkit-transform: rotate(-360000deg);
  -moz-transform: rotate(-360000deg);
  -ms-transform: rotate(-360000deg);
  -o-transform: rotate(-360000deg);
}

#workskin .hide {

display: none;

}

Changing Pictures on Hover

HTML- Make sure imagecontainer has font-size: 0; or else Ao3 will fuck up it's placement with its addiction to spaces.

<div class="imagecontainer">

<div class="imagebase">
       <p><img class="mobileimage400"        src="https://live.staticflickr.com/65535/49729101013_b8f888ac2a_z.jpg" width="400" /></p>
</div>

<div class="imagechange">
          <p><img class="mobileimage400" src="https://live.staticflickr.com/65535/49729102168_883503486b_z.jpg" width="400" /></p>
</div>

</div>

CSS

#workskin .imagecontainer {
  position: relative;
  font-size: 0;
}

#workskin .imagebase {
  position: relative;
}

#workskin .imagechange {
  position: absolute;
  top: 0;
  opacity: 0%;
  transition: 1s;
}

#workskin .imagechange:hover {
  opacity: 100%;
  transition: .5s;
}

#workskin .mobileimage400 {
  width: 400px;             (Needs to be the same width as the picture in HTML)
  max-width: 100%;
}

 OR

HTML

<p class="frownandsmile">&nbsp;</p>

CSS- This method fucks with the spacing of the image between text.

#workskin .frownandsmile {
  background: url(https://live.staticflickr.com/65535/49729101013_b8f888ac2a_z.jpg)  no-repeat;
  background-size: contain;
  min-height: 600px;
}

#workskin .frownandsmile:hover {
  background: url(https://live.staticflickr.com/65535/49729102168_883503486b_z.jpg)  no-repeat;
  background-size: contain;
  min-height: 600px;
}

Chapter Text

If you want to change how the "visited" link appears, a similar element also has to exist on a.link . This is so the visited page has something to change from.

#workskin a.link {         (This changes ALL links, anywhere in your fic)

  (display: none;    is also an option)
  position: relative;
  left: 5px;
  background: radial-gradient(circle, rgba(0,180,255,1) 18%, rgba(70,243,252,0.7729885057471264) 25%);
  border-radius: 10%;
  border-color: red;
  border-width: 10px;
  font-size: 2em;
  font-weight: bold;
  font-family: Candera;
  text-shadow: 2px 2px 5px yellow;
  box-shadow: 5px 5px 5px black;
  padding: 10px;
  padding-left: 10px;
  padding-right: 10px;
  transition: 2s;
}

#workskin a:visited {    (Links that have been visited)
  color: gold;
  border-color: pink;
}

#workskin a:link:hover {
  color: red;
  font-size: 2.5em;
  transition: 1s;
}

#workskin a:active {     (Liks that are being hold-clicked)
  color: white;
  transition: color 2s;
}

Inspired by/from "How to Override the Archive's Automated Chapter Headers" by C Ryan Smith (AiedailEclipsed)

Removes ALL Chapter Names (Ie: Changing Ao3's Preset Headers)

#workskin .chapter.preface.group .title {
  visibility: hidden;
  line-height: 0;
}



or



#workskin h3.title {          (Why is this different? CSS has different ways or identifying/addressing certain things. This is just another route.

display: none;

}

Removes Specific Chapter Names

#workskin #chapter-2 .chapter.preface.group .title {  (Important to know the specified #chapter-number. It corresponds directly to the number you think it does, but if you're curious you can see this number in a web browser's "Inspect" mode.))
  visibility: hidden;
  line-height: 0;
}

or

#workskin #chapter-1 h3.title {
diplay: none;
}

After Removing Chapter Names, They Can Be Replaced with:

#workskin #chapter-2 .chapter.preface.group .title::after {             (Note that the most important aspect of this is ::after and content: "";  They go hand in hand)
  content: "This is an example.";
  visibility: visible;                 (In CSS, there are a bunch of ways to make somethin invisible. Some include: opacity; font-size: 0; display: none; )
  line-height: 1em;
  display: block;
}



(Note, that you can also change most visual aspects about the text, backgrounds/colors/etc.)

Some other things you might want to change

Changes All Author/Username Links to Profile (Add #chapter-? to specify which)

Ie: InfinitysWraith

#workskin .preface.group .byline.heading a {
}

Changes All Chapter Names (Add #chapter-?)

Ie: "Changing Ao3's Preset Fic Headers"

#workskin .chapter.preface.group .title {
}

Changes All Chapter Links (Add #chapter-?) 

 (Note: this is not the same as chapter title/name. This refers specifically to the linkable Chapter 1-? Links have to be treated differently and are referred to as "a")

#workskin .chapter.preface.group a {
}

Changes the Fic Title:

IE: CSS in testing. (Only applicable to all chapters. Unconfirmed).

(Note: The Fic title is a bit more finicky to work with than other things. I found it didn't really work with ::after+content: ""; ?)

#workskin h2.title {
}





OR:

#workskin .preface.group h2.title {
}

Mine: Note, I use archive.org and AO3 doesn't like there to be "spaces" in the uploaded picture's name? They get replaced with %  and I guess Ao3 won't accept them? If you work with Archive, be prepared to do some fiddling to get the URL(); to work. (I'm not sure what the exact problem is, but to counteract this, when I'm filling out their description/title/tags etc I make everything one word.)

#workskin .preface.group h2.title {
  background-image: URL(https://archive.org/download/bleedgoldylarge/BleedGoldYLarge.png);    
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  font-size: 0;
  height: 150px;
  transition: 5s;
}

#workskin .preface.group h2.title:hover {
  background-image: URL(https://archive.org/download/bleedgoldblarge/BleedGoldBLarge.png);
  transition: 1s;
}

Changes ALL Fic Summaries 

#workskin .summary.module {

(



MINE:



#workskin .summary.module {
  position: absolute;
  height: 400px;
  color: gold;
  letter-spacing: -7px;
  writing-mode: vertical-lr;
  text-orientation: upright;
  transform: skew(10deg, 0deg);
}

Changes the word "Summary" (You can put this in the same code separated by a comma.)

#workskin .summary.module h3.heading {
}

Changes the text in the summary sections

#workskin .summary.module .userstuff {
}

Note: As far as I can tell the Chapter 1 fic summary is NOT the same as summaries in other chapters. In the code it is located BEFORE #chapter-?. This means we can not write "#workskin #chapter-1 .summary.model" . In order to effect Chapter 1, we must change ALL the summaries. Hence the code above. 

What if you want different summaries for each chapter? Well, you'll have to change them individually.

we can do something like :

#workskin #chapter-2 .summary.module, #workskin #chapter-3 .summary.module, #workskin #chapter-4 .summary.module {
  position: relative;
  height: 300px;
  color: green;
  letter-spacing: 0px;
  writing-mode: horizontal-lr;
  text-orientation: sideways;
  transform: none;
}

But keep in mind that chapters 5,6,7---? will still look like chapter 1. Also, for them to look completely different, you have to counteract all the code foud in ".summary.model".

Changes both "See end of chapter for more notes"  (Add #chapter-? to both)

#workskin .notes.module .userstuff+p,
#workskin .notes.module .userstuff+p a {
  font-size: 0;    (I've chosen to "remove" mine)
}

Changes the "(See end of chapter for    )"

#workskin .notes.module .userstuff+p {       (Note: .userstuff+p in css says to select any paragraphs that occur AFTER the user's stuff.)

}

Changes the "more notes"  (It's a link so it needs to be treated separately)

#workskin .notes.module .userstuff+p a {

}

Changes the text within the Notes Section

#workskin .notes.module .userstuff {
  color: red;
}

Changes the word "Notes" in all chapters  (This is just if you want to change the colors etc.)

#workskin h3.heading {

}

Changes/Replaces the Word "Notes"   (I've replaced it with an image.) 

#workskin .notes.module h3.heading {     (This is the same location as the one above, just more specific.)
  visibility: hidden;
}

#workskin .notes.module h3.heading::after {
  display: block;
  height: 30px;
  width: 250px;
  max-width: 100%;
  background-image: URL(https://archive.org/download/Kooloolimpah/Kooloolimpah.png);
  content: "";
  border: 0;
  visibility: visible;
  margin: 0 auto;
}

Changing the word "Notes" in Top Notes and End Notes separately (add #chapter-?)

(Just using .notes.module will select both top and bottom. To counteract this both .notes.module and .end.notes.module must selected. In this case I'v chosen to remove the top "Notes" but keep the bottom "Notes".)

#workskin .notes.module h3.heading {
  display: none;
}

#workskin .end.notes.module h3.heading {
  display: block;
}

Changes the Background on All Chapters (Add #chapter-?)

#workskin .userstuff.module {   
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(156,112,72,1) 13%, rgba(79,162,168,0.4885057471264368) 36%, rgba(10,103,111,0) 77%);
}

Changing Section dividers 

HTML: Name the classes whatever

<hr class="hry" />

<hr class="hr" />

CSS: 

#workskin .hr {
  height: 30px;
  width: 250px;
  max-width: 100%;
  background-image: URL(https://archive.org/download/Kooloolimpah/Kooloolimpah.png);
  border: 0;
  top: 0;
}

#workskin .hry {
  height: 30px;
  width: 250px;
  max-width: 100%;
  background-image: URL(https://archive.org/download/kooloolimpah-y/KooloolimpahY.png);
  border: 0;
}

Bonus if you feel like cursing yourself XP

#workskin ul.chapter.actions {
  display: none;
}

Bonus, an off-white "Rich Text Editor. Place this into your "Site Skin" NOT the "Work Skin"

#content_ifr {
  background: #f2f0e4;
}

.tox-toolbar {
  background: #8a887b !important;
}

As with most things, you can add your own colors an alterations to these areas. a:links has the most rigidity in what can be changed. If you want to locate specific areas to change you can go on a desktop browser, right-click, hit inspect, and it'll bring up the codes used. Everything from below the tags and stats box, to just above the kudos and comments buttons can be changed. You can even change backgrounds for .preface.group

Chapter Text

Extra words

Create space

This was needed so there'd be enough "space" for the "doors" to slide away into.

Also, In order for the animation to work on desktop, you have to actually follow the doors with your mouse. Haven't yet figured out something that counteracts this.

HTML

<div class="doorcontainer">

<div class="doorinteriorcontainer">

<p align="center">
    <span class="goldtitle"> <strong>Words!</strong></span>
  </p>

<p align="center">His body sensed the oppressive cold before anything else. It lapped at his body in a viscous liquid while frosty air caressed his face.</p>

<p class="blueglowlink" align="center">
      <strong><a href="#ThisPageDoesNotExist" rel="nofollow"> Wake up!</a> </strong>
    </p>

</div>

<div class="rightdoor"> </div>

<div class="leftdoor"> </div>

<div class="middledoor">

<p><br />
<img class="mobileimage400" src="https://archive.org/download/testing-lip-sync/Animation%20Test%20Words.gif" width="400" />
    </p>

</div>

</div>

CSS

This creates the general size constraints.



#workskin .doorcontainer {
  position: relative;
  background-color: rgba(114,193,195,1);
  border: 1px solid black;
  height: 500px;
  width: 400px;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
}



This allows there to be a margin inside the container.

#workskin .doorinteriorcontainer {
  position: absolute;
  vertical-align: top;
  top: 0px;
  left: 0px;
  border: 1px dashed black;
  overflow: auto;
  margin: 15%;
}

#workskin .leftdoor {
  position: absolute;
  vertical-align: top;
  top: 0px;
  left: 0px;
  border: 1px solid black;
  border-radius: 1px;
  border-color: black;
  background: rgb(102, 102, 153);
  box-shadow: 1px 1px 2px black;
  max-width: 50%;
  width: 200px;
  height: 490px;
  transition: 5s;
  transition-delay: 20s;
  z-index: 3;
}

#workskin .leftdoor:hover {
  background: #52527a;
  cursor: progress;
  top: -10px;
  left: -45%;
  transition: top .5s, left 4s;
  transition-delay: left 4s;
}

#workskin .rightdoor {
  position: absolute;
  vertical-align: top;
  top: 0px;
  right: 0px;
  border: 1px solid black;
  border-radius: 1px solid black;
  background: rgb(102, 102, 153);
  box-shadow: -1px 1px 2px black;
  max-width: 50%;
  width: 200px;
  height: 490px;
  transition: 3s;
  transition-delay: 20s;
  z-index: 2;
}

#workskin .rightdoor:hover {
  top: -5px;
  width: 10px;
  background: #52527a;
  transition: ease-in-out 2s;
  transform: skewY(40deg);
  cursor: progress;
}

#workskin .middledoor {
  position: absolute;
  vertical-align: top;
  top: 0px;
  right: 0px;
  border: 1px solid rgba(255, 255, 0, 0);
  border-radius: 1px solid black;
  background: rgb(202, 202, 153);
  box-shadow: -1px 1px 2px black;
  max-width: 100%;
  width: 400px;
  height: 490px;
  transition: 4s;
  transition-delay: 20s;
  z-index: 1;
}

#workskin .middledoor:hover {
  background: #ffffe6;
  cursor: progress;
  border-bottom: 300px solid #ffff00;
  top: -780px;
  transition: 4s;
}





Transform: translate(0px, 0px,); can also be used to move things, but I've had some trouble with the timeing features.



Transition-delay: ?s; can be exaggerated to some inane amount of seconds. Why do this? AO3 said I couldn't create "click events", so I said fuck that. Setting transition-delay on the return/base element to something like 10min can effectively "fake" a permanent action.

Backgrounds can also be replaced with images as:

background-image: URL(https///wwaofugiwrihnjdhuoaf);

Chapter Text

#workskin .grid {       (This is used to round up all the grid containers, and make a buffer between the text.)
  position: relative;
  height: 300px;        (Set height and Width to whatever)
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  font-size: 0;         (This is important!. Ao3 has a tendency to add unnessesary spaces in the HTML. To proactively counter this, I've marked the font-size as 0/nothing so that the extra spaces are invisible. If you want to add text, you must add a new font-size somewhere else.)
}

#workskin .gridcontainer {   (This is a "Row". It's set as a grid with 3 columns.)
  display: grid;
  width: 300px;
  max-width: 100%;
  height: 100px; 
  grid-template-columns: 1fr 1fr 1fr;           (This creates the columns. 1 fraction. Add more for more columns)
}





.

.

.
(These make up the individual "cells" for each grid column. 1 is the left most and 3 is the right most cell, with 2 in the middle.)

#workskin .gridcontainer1 {
  display: grid;
  grid-column: 1;
  height: 100px;
  background-image: URL(https://live.staticflickr.com/65535/49729642111_a6a93ab167_z.jpg);
  background-size: contain;
  border: solid white;
  transition: 1s;
}
#workskin .gridcontainer1:hover {
  background-image: URL(https://live.staticflickr.com/65535/49819940893_9bcab2f940_z.jpg);
  background-repeat: no-repeat;
  border: solid black;
  transition: 0s;
}

#workskin .gridcontainer1bot {   (Creating a "bottom" row is technically unnessesary. However, if you want distinctly different cells then you need a new .class for whatever you want.
  display: grid;
  grid-column: 1;
  height: 100px;
  background: orange;
  border: solid white;
  transition: 1s;
}

#workskin .gridcontainer1bot:hover {
  background: blue;
  border: solid black;
  transition: 0s;
}


.......

#workskin .gridcontainer2 {
  display: grid;
  grid-column: 2;
  height: 100px;
  background: pink;
  border: solid yellow;
  transition: 1s;
}

#workskin .gridcontainer2:hover {
  background: green;
  border: solid blue;
  transition: 0s;
}

#workskin .gridcontainer2bot {
  display: grid;
  grid-column: 2;
  height: 100px;
  background: lavender;
  border: solid yellow;
  transition: 1s;
}

#workskin .gridcontainer2bot:hover {
  background: purple;
  border: solid blue;
  transition: 0s;
}


..........


#workskin .gridcontainer3 {
  display: grid;
  grid-column: 3;
  height: 100px;
  border: solid red;
  background: crimson;
  transition: 1s;
}

#workskin .gridcontainer3:hover {
  border: solid green;
  background: purple;
  transition: 0s;
}

#workskin .gridcontainer3bot {
  display: grid;
  grid-column: 3;
  height: 100px;
  border: solid red;
  background: red;
  transition: 1s;
}

#workskin .gridcontainer3bot:hover {
  border: solid green;
  background: coral;
  transition: 0s;
}

Chapter Text

#workskin .webcontainer {
  position: relative;
  display: inline-block;
  font-size: 0;
  width: 100%;
  height: 800px;
  border: 1px solid black;
  background-color: cyan;
  overflow: hidden;
}

#workskin .webheader {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 115px;
  max-height: 15%;
  background-color: #5f6d78;
  vertical-align: top;
  top: 0px;
}

#workskin .minimize {
  position: absolute;
  height: 15px;
  width: 19px;
  top: 0px;
  vertical-align: top;
  border: 1px solid #8396a6;
  border-radius: 3px;
  background: #5f6d78;
  transition: .2s;
}

#workskin .minimize::before {
  position: absolute;
  vertical-align: top;
  top: -5px;
  right: 5px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: white;
  content: "_" !important;
}

#workskin .minimize:hover {
  box-shadow: inset 1px 1px 1px #a7bfd1;
  background: #8396a6;
  transition: .1s;
}





....

#workskin .fullscreen {
  position: absolute;
  height: 15px;
  width: 19px;
  left: 20px;
  top: 0px;
  vertical-align: top;
  border: 1px solid #8396a6;
  border-radius: 1px;
  background: #5f6d78;
  transition: .2s;
}

#workskin .fullscreen::before {
  position: absolute;
  vertical-align: top;
  top: 0px;
  right: 5px;
  font-size: 12px;
  text-align: center;
  color: white;
  content: "O" !important;
}

#workskin .fullscreen:hover {
  box-shadow: inset 1px 1px 1px #a7bfd1;
  background: #8396a6;
  transition: .1s;
}



.....

#workskin .close {
  text-align: center;
  position: absolute;
  display: block;
  height: 15px;
  width: 29px;
  vertical-align: top;
  top: 0px;
  right: 0;
  border: 1px solid #8396a6;
  border-radius: 3px;
  background: #5f6d78;
  transition: .2s;
}

#workskin .close::before {
  position: absolute;
  vertical-align: top;
  top: 0px;
  right: 35%;
  font-size: 12px;
  text-align: center;
  color: white;
  content: "X" !important;
}

#workskin .close:hover {
  background: #e03019;
  box-shadow: inset 1px 1px 1px #d17569;
  transition: .1s;
}

#workskin .webheadercustom {
  position: absolute;
  display: inline-block;
  vertical-align: bottom;
  bottom: 0px;
  width: 100%;
  height: 80px;
  background-color: #3dc9d9;
}



.................

#workskin .tabsbox {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  left: 7px;
  top: 10px;
  width: 450px;
  max-width: 60%;
  height: 20px;
  font-size: 12px;
  color: black;
}

#workskin .tab1 {
  position: absolute;
  vertical-align: top;
  display: inline-block;
  top: 0px;
  left: 0px;
  width: 150px;
  max-width: 30%;
  height: 20px;
  background: #3dc9d9;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: 1px 1px 3px black, -1px, -1px, 3px black;
  text-align: top;
  padding: 5px;
  font-size: 12px;
  color: black;
  z-index: 1;
}

#workskin .tab1::before {
  position: absolute;
  vertical-align: top;
  top: 5px;
  left: 15px;
  font-size: 12px;
  text-align: center;
  color: black;
  width: 130px;
  height: 15px;
  max-width: 70%;
  overflow: hidden;
  content: "Left Most Tab Box";
}



....

#workskin .tab2 {
  position: absolute;
  vertical-align: top;
  display: inline-block;
  left: 33%;
  top: 0px;
  width: 150px;
  max-width: 33%;
  height: 25px;
  background: #1c6670;
  border-right: 3px solid #123f45;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transition: .2s;
  font-size: 12px;
  color: black;
}

#workskin .tab2::before {
  position: absolute;
  vertical-align: top;
  top: 5px;
  left: 15px;
  font-size: 12px;
  text-align: center;
  color: black;
  width: 130px;
  height: 15px;
  max-width: 70%;
  overflow: hidden;
  content: "Middle Tab Box";
}

#workskin .tab2:hover {
  background: #2c8e9c;
  transition: .1s;
}

.....



#workskin .tab3 {
  position: absolute;
  vertical-align: center;
  display: inline-block;
  top: 0px;
  right: 0px;
  width: 150px;
  max-width: 33%;
  height: 25px;
  background: #1c6670;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transition: .2s;
  font-size: 12px;
  color: black;
}

#workskin .tab3::before {
  position: absolute;
  vertical-align: top;
  top: 5px;
  left: 15px;
  font-size: 12px;
  text-align: center;
  color: black;
  width: 130px;
  height: 15px;
  max-width: 70%;
  overflow: hidden;
  content: "Far Right Tab Box";
}

#workskin .tab3:hover {
  background: #2c8e9c;
  transition: .1s;
}



....

#workskin .tab4 {
  position: absolute;
  display: inline-block;
  vertical-align: right;
  top: 2px;
  right: -25px;
  width: 20px;
  height: 20px;
  background: #1c6670;
  border-radius: 50%;
  transition: .2s;
}

#workskin .tab4::before {
  position: absolute;
  vertical-align: top;
  top: -2px;
  right: 3px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: black;
  content: "+" !important;
}

#workskin .tab4:hover {
  background: #2c8e9c;
  transition: .1s;
}

#workskin .appandsearchbox {
  position: relative;
  top: 10px;
  height: 27px;
  left: 1.5%;
  width: 97%;
  overflow: hidden;
}

#workskin .movebar {
  position: relative;
  vertical-align: top;
  padding-left: 5px;
  width: 115px;
  height: 25px;
}

#workskin .searchbar {
  position: absolute;
  vertical-align: top;
  top: 0px;
  left: 120px;
  right: 125px !important;
  text-align: left;
  max-width: 60%;
  height: 25px;
  background: #b3eef5;
  border-radius: 25px;
}

#workskin .searchbar:hover {
  background: #ffffff;
  box-shadow: inset 1px 1px 1px #ebc334, inset -1px -1px 1px #ebc334;
  cursor: text;
}

#workskin .searchbartext {
  position: absolute;
  vertical-align: top;
  left: 35px;
  right: 60px;
  top: -12px;
  font-size: 12px;
  text-align: left;
  color: black;
  max-width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 20px;
}

#workskin .magnifyingglass {
  font-size: 16px;
  position: absolute;
  vertical-align: top;
  display: inline-block;
  top: -18px;
  right: 30px;
  transition: .3s;
  text-align: center;
  width: 25px;
  height: 20px;
  border-radius: 30%;
  background: black opacity 0%;
}

#workskin .magnifyingglass:hover {
  text-align: center;
  width: 25px;
  height: 20px;
  border-radius: 30%;
  background: #00000020;
  transition: .3s;
  cursor: default;
}

#workskin .star {
  font-size: 16px;
  position: absolute;
  vertical-align: top;
  display: inline-block;
  top: -18px;
  right: 5px;
  transition: .3s;
  text-align: center;
  width: 25px;
  height: 20px;
  border-radius: 30%;
  background: black opacity 0%;
  color: gray;
}

#workskin .star:hover {
  text-align: center;
  width: 25px;
  height: 20px;
  border-radius: 30%;
  background: #00000020;
  color: blue;
  transition: .3s;
  cursor: default;
}

#workskin .locked {
  font-size: 16px;
  position: absolute;
  vertical-align: top;
  display: inline-block;
  top: -18px;
  left: 5px;
  transition: .3s;
  text-align: center;
  width: 25px;
  height: 20px;
  border-radius: 30%;
  background: black opacity 0%;
  color: gray;
}

#workskin .locked:hover {
  text-align: center;
  width: 25px;
  height: 20px;
  border-radius: 30%;
  background: #00000020;
  transition: .3s;
  cursor: default;
}

#workskin .app {
  font-size: 16px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  top: -18px;
  text-align: center;
  width: 25px;
  height: 20px;
  border-radius: 100px;
  background: black opacity 0%;
  transition: .3s;
  color: gray;
}

#workskin .app:hover {
  text-align: center;
  width: 25px;
  height: 20px;
  border-radius: 30%;
  background: #00000020;
  transition: .3s;
  cursor: default;
}

#workskin .appbar {
  position: absolute;
  vertical-align: top;
  padding-left: 5px;
  top: 0px;
  right: 0px;
  width: 110px;
  height: 25px;
  border-radius: 25px;
  border: solid #17171700 1px;
  font-size: 12px;
  font-weight: bold;
  background-color: #3dc9d9;
  transition: .3s;
}

#workskin .appbar:hover {
  border: solid #17171720 1px;
  transition: .1s;
}

#workskin .appbarbottom {
  position: relative;
  vertical-align: top;
  padding-left: 5px;
  top: -25px;
  left: 71%;
  height: 25px;
  border-radius: 25px;
  border: solid #17171700 1px !important;
  font-size: 12px;
  transition: .3s;
  overflow: hidden;
}

#workskin .appbarbottom {
  border: solid #17171720 1px;
  transition: .1s;
}

#workskin .topbar {
  position: relative;
  vertical-align: top;
  top: 15px;
  left: 1.5%;
  font-size: 12px;
  width: 97%;
  height: 25px;
}

#workskin .bookmark {
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: -12px;
  left: 0px;
  max-width: 15%;
  height: 20px;
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 30px;
  text-align: center;
  font-size: 12px;
  color: black;
  transition: .3s;
  overflow: hidden;
}

#workskin .bookmark:hover {
  border-radius: 30px;
  background: #00000020;
  text-align: center;
  transition: .3s;
  cursor: default;
}

#workskin .bookmarkside {
  display: inline-block;
  position: absolute;
  vertical-align: top;
  padding-left: 5px;
  top: -3px;
  right: 0px;
  width: 160px;
  height: 25px;
  border-radius: 25px;
  border: solid #17171700 1px;
  font-size: 2px;
  background-color: #3dc9d9;
  z-index: 1;
  transition: .3s;
}

#workskin .otherbookmarks {
  position: relative;
  vertical-align: top;
  left: 10px;
  top: -71px;
  text-align: center;
  font-size: 12px;
  width: 130px;
  height: 20px;
  border-radius: 50px;
  transition: .3s;
  color: black;
  overflow: hidden;
}

#workskin .otherbookmarks:hover {
  border-radius: 30%;
  background: #00000020;
  text-align: center;
  transition: .3s;
  cursor: default;
}

Chapter Text

Positioned Gif

Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisl varius egestas. Donec ultrices convallis erat, quis fermentum nulla lacinia a. Morbi posuere congue eros eget sollicitudin. Ut lacinia pharetra nulla, non maximus ipsum sollicitudin sed. Nullam sit amet scelerisque lorem. Quisque efficitur bibendum mi, nec dictum tortor euismod eget. Curabitur tellus dui, ullamcorp er sed finibus eu, luctus ac lectus. Duis eu dapibus ante. Curabitur massa tellus, maximus nec bibendum eget, dapibus vitae diam. Curabitur dictum ornare eros, a pharetra sapien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

HTML

<p></p><div class="handhovercontainer">

<p class="invisiblelink" align="center">
    <a href="#1" rel="nofollow">Remember rule 34.</a>
  </p>

<p>
    <img class="handhover" src="https://archive.org/download/hand-hover-short/Hand%20Hover%20Short.gif" width="150" align="right" />
  </p>

<p> </p></div>

CSS

This is so I can position the gif where I want. 

#workskin .handhovercontainer {
  position: relative;
  margin: 0 auto;
  max-width: 300px;
}

This helps to position the gif in accordance to the contain. z-index: -; is so the gif is not a clickable element on the page.

#workskin .handhover {
  position: relative;
  vertical-align: top;
  top: -22px;
  right: 0;
  max-width: 100%;
  z-index: 0;
}

Pop-up Text

Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisl varius egestas. Donec ultrices convallis erat, quis fermentum nulla lacinia a. Morbi posuere congue eros eget sollicitudin. Ut lacinia pharetra nulla, non maximus ipsum sollicitudin sed. Nullam sit amet scelerisque lorem. Quisque efficitur bibendum mi, nec dictum tortor euismod eget. Curabitur tellus dui, ullamcorper sed finibus eu, luctus ac lectus.

HTML

<p></p><div class="popup">

<p class="popup-precontent">I need to wake up.</p>

<p></p><div class="popup-content">

<p>
      <a href="#answer" rel="nofollow">Yeah, no. That's not going to happen.</a>
    </p></div>

</div>

CSS

This is the "container" that holds the popup group.

#workskin .popup {
  position: relative;   (this keeps the popup group place within other text)
  top: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
}

This changes the aesthetic of whatever you want the pop-up text to be.

#workskin .popup-content {
  position: absolute;      (this is absolute so that I can specifically move my pop-up where ever I want.
  vertical-align: top;
  font-size: 0;           (This is important because it makes the pop-up text invisible.
  top: -40px;
  width: 100%;
  text-align: center;
  z-index: 1;
}

In MY case, my popup content, "Yeah no that's not going to happen" is a link, so it must be changed separately.

#workskin .popup-content a {
  padding: 20px;
  color: #f2be54;
  font-weight: bold;
  font-family: Georgia,Times,Times New Roman,serif;
  text-align: center;
  text-shadow: 0px .5px 10px black, .5px 0px 10px black;
  border-radius: 25px;
  transform: skewY(-1deg);
  text-decoration: none;
  border: none;
}

This refers to "I need to wake up" It's purely aesthetic.

#workskin .popup-precontent {
  text-align: center;
}

With these ^^ you can change almost any of the aspects, they're all aesthetic. This important thing is that .popup-content is WITHIN the .popup DIV. Also .popup-content needs to be "invisible" before the :hover. To achieve his I've chosen to use font-size: 0; You could also do display: none, opacity: 0, visibility: none. among others. Each of these has different qualities that might work best for your needs.

This is the most important part of making a "pop-up". 

.popup:hover .popup-content {  <<This, in code, says "upon hovering over .popup, the computer will then redirect to .popup-content and activate this next line of code". This is achieved by using a space between the two. 

#workskin .popup:hover .popup-content,
#workskin .popup:hover .popup-content a {
  font-size: 30px;        (This makes the pop-up go form invisible to visible)
  transition: font-size .2s, text-shadow 5s;
  transition-delay: text-shadow 1s;
  text-shadow: 10px 10px 50px #f2be54, -10px -10px 50px #f2be54, 0px .5px 10px black, .5px 0px 10px black;
}

It should also be possible to create pop-ups that use image assets either within the CSS or the HTML.

Praise the Sun

HTML- (FYI, AO3 doesn't like haveing multiple spans next to each other, so when you move to Rich Text it'll "reformat"/remove one.

<p></p><div class="popup-praisethesun">

<p>Filler Text...... Praise the sunFiller Text....

<span class="popup-content-praisethesun">Praise the sun!</span>  
<span class="the-sun"></span>

Filler Text....</p></div>

CSS

#workskin .popup-praisethesun {
  position: relative;
}

#workskin .popup-content-praisethesun {
  position: absolute;
  vertical-align: top;
  left: 0;
  bottom: 0;
  font-size: 0px;
  z-index: 1;
  opacity: 0;
}

#workskin .popup-praisethesun:hover .popup-content-praisethesun {
  left: 20%;
  bottom: 200px;
  width: 200px;
  max-width: 60%;
  color: gold;
  opacity: 100%;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  text-shadow: 10px 10px 100px #f2be54, -10px -10px 100px #f2be54, 0px .5px 10px black, .5px 0px 10px black;
  transition-delay: text-shadow 1s, opacity 3s;
  transition-timing-function: ease-in-out;
  transition: 7s;
}

#workskin .the-sun {
  position: absolute;
  opacity: 0;
  bottom: 0;
  left: 0;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background: linear-gradient(127deg, rgba(255,253,106,1) 22%, rgba(255,101,0,1) 100%);
}

#workskin .popup-praisethesun:hover .the-sun {
  left: 20%;
  max-width: 60%;
  opacity: 100%;
  bottom: 200px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,253,106,1) 22%, rgba(255,223,0,1) 100%);
  box-shadow: 0px .5px 50px 20px yellow, .5px 0px 50px  20px yellow;
  transition-timing-function: ease-in-out;
  transition-delay: opacity .5s;
  transition: 7s;
}

Invisible Links

HTML- Most of this is the same concept discussed in Ch 3. You can look at that, use the inspect tool to look at the code or ask me questions.

There's various ways of applying classes to text. 

<p class="invisiblelink" align="center">1     2     3     4     5     6    <a href="#answer" rel="nofollow">7</a>    8     9     0</p>

CSS

This just says that no matter what state, the link will not look like a "link.

#workskin .invisiblelink a,
#workskin .invisiblelink a:link,
#workskin .invisiblelink a:visited {
  border: 0;
  color: inherit;
  cursor: text;
}

This changes the highlight color of the text.  Why ::-moz-selection? Cuz Firefox does it's own shit idk. Not all elements are accepted by the various browsers. To counteract this other terms are needed. Usually, there's one for Opera and Explorer/Edge, but I don't know if they need it?

#workskin .invisiblelink a::selection, #workskin .invisiblelink a::-moz-selection  {
  color: white;
  background: #1e25f7;
}

#workskin .popup {
  position: relative;
  top: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
}

#workskin .popup-list {
  position: relative;
  font-size: 0;
  transition: 2s;
  transition-delay: .5s;
}

#workskin .popup-list a {
  text-decoration: none;
  border: none;
}

#workskin .popup:hover .popup-list,
#workskin .popup:hover .popup-list a {
  font-size: inherit;
  transition: .1s;
}

Chapter Text

#workskin .thousandpxcontainer {
  display: block;
  width: 99%;
  border: solid cyan;
  overflow: visible;
}

#workskin .expandingblood-container {
  position: relative;
  width: 100%;
  height: 80px;
  font-size: 0;
  border: solid red;
}

#workskin .expandingblood-touch {
  position: absolute;
  left: 40%;
  top: 0;
  width: 80px;
  height: 80px;
  background: #489ab825;
  border-radius: 70%;
}

#workskin .expandingblood-blood {
  position: absolute;
  top: 0;
  left: 40%;
  height: 80px;
  width: 80px;
  opacity: 0%;
  transition: 1s;
  transition-delay: .3s;
  z-index: 1;
}

#workskin .expandingblood-blood:hover {
  top: -220px;
  left: 5%;
  right: 2%;
  height: 500px;
  width: 90%;
  opacity: 100%;
  transition: 0s;
}

#workskin .bggif-container {
  position: relative;
  width: 99%;
  overflow: hidden;
  border: solid pink;
}

#workskin .bggif {
  position: absolute;
  top: 0;
  opacity: 32%;
  width: 100%;
  height: 100%;
}

Chapter Text

Lolol I can't even edit this chapter with the current CSS on!! XD. Fun fact, if you view your fics as an "infinite scroll" instead of "next chapter", then this bad boy will be completely invisible and it'll be a seamless transition from chapter 10 to 12.  If you view chapter by chapter, then the fic title will still pop up. You can also find this chapter by going to the "chapter index" dropdown.

On a different note, if you only shrink the text or make it transparent, (not display:none) then text is still CTRL+F searchable and will appear in TTS web software.

This one's super easy, does what it says on the tin. 

#workskin #chapter-11 {
  display: none;
}

For some extra saucy stuff I added a hover display option. I couldn't get it to look right with just a height expand so this was my work around.

#workskin #chapter-11 {
  font-size: 0;
  opacity: 0;
  transition: 5s;
  transition-delay: 3s;
}

#workskin #chapter-11:hover {
  font-size: inherit;
  opacity: 100%;
  transition: 5s;
}

Chapter Text

EXTRA TEXT

EXTRA TEXT
.

HTML

I recommend doing any writing and formatting (bold, italics, center, justify) in rich text BEFORE you do the coding. Never trust rich text to be on your side.

[AN:This is the main container box]

<p></p><div class="trifold_letter">  

[AN:This is the cover letter/envelope section]

<p></p><div class="letter_cover">

<p class="letter_cover_stamp"></p>

<p></p><div class="letter_cover_text_top">

<p><b>Full Name</b><br />
123 Random St.<br />
City, ST. 12345
</p></div>

<p></p><div class="letter_cover_text">

<p align="center"><b>Full Name</b><br />
123 Random St.<br />
City, ST. 12345
</p></div></div>

[AN:These are the three segments of page one]

<p></p><div class="letter_top">

<p></p><div class="letter_top_text">

<p><br />
Dear Reader,</p>

<p>
Etiam sodales in ligula a luctus. Donec ullamcorper turpis nec risus finibus, ac consectetur dui rutrum. Curabitur vel condimentum ante. In hac habitasse platea dictumst. Phasellus tincidunt est vel lectus ullamcorper condimentum. Nulla sapien leo, semper finibus lacus sit amet, hendrerit finibus risus. Cras id posuere nisi, non tempor purus. Nunc eget cursus magna.
</p></div></div>

<p></p><div class="letter_mid">

<p></p><div class="letter_mid_text">

<p>
Duis sit amet dapibus dui. Vestibulum finibus pellentesque tincidunt. Vestibulum placerat leo odio, vitae placerat mi pellentesque nec. Etiam sapien dui, pulvinar in lectus non, posuere cursus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque lorem mauris, rutrum et pharetra eleifend, porttitor eu mi. Donec euismod nulla quis tellus dictum, at ultricies massa sodales. Ut sem neque, ullamcorper eu urna ut, tempus luctus eros. Nulla facilisi. Maecenas et ipsum sed leo pretium placerat ut sit amet quam. Phasellus commodo faucibus enim, in vestibulum mauris vestibulum ac. Aenean non faucibus lorem. Maecenas consectetur maximus lobortis.<br />
</p></div></div>

<p></p><div class="letter_bot">

<p></p><div class="letter_bot_text">

<p>Proin id leo sed sapien facilisis lacinia id consectetur mauris. Quisque tempus mauris vel turpis scelerisque sollicitudin. Nunc viverra et dolor ut dictum. Fusce sed ipsum at magna ullamcorper pellentesque. Nulla malesuada fermentum tempus. Morbi et nibh rutrum, fermentum eros vitae, tincidunt velit. In tincidunt laoreet metus, vestibulum maximus nibh volutpat ut. Cras eget sollicitudin nisl. Integer sagittis lorem massa, nec dapibus nisi interdum a. Cras vulputate maximus nunc, id vulputate nibh tristique et. Suspendisse nisi felis, pulvinar aliquet venenatis a, hendrerit ut eros. Donec erat quam, eleifend non consequat nec, laoreet vel mauris. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
</p>

<p align="right">Sincerly,</p>

<p align="right">Author</p></div></div>

[AN:This is page two. Page two hass it's own container box so that all the segments can be selected on :hover. This simulates the "turn page" animation.]

<p></p><div class="trifold_letter2">

<p></p><div class="letter_top2">

<p></p><div class="letter_top_text2">

<p><br />
Dear Reader this IS PAGE 2!!!!!!!!!!!!!!!!!!!!!!!!!!!11,</p>

<p>
Etiam sodales GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGntum. Nulla sapien leo, semper finibus lacus sit amet, hendrerit finibus risus. Cras id posuere nisi, non tempor purus. Nunc eget cursus magna.
</p></div></div>

<p></p><div class="letter_mid2">

<p></p><div class="letter_mid_text2">

<p>
DuiGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGm neque, ullamcorper eu urna ut, tempus luctus eros. Nulla facilisi. Maecenas et ipsum sed leo pretium placerat ut sit amet quam. Phasellus commodo faucibus enim, in vestibulum mauris vestibulum ac. Aenean non faucibus lorem. Maecenas consectetur maximus lobortis.<br />
</p></div></div>

<p></p><div class="letter_bot2">

<p></p><div class="letter_bot_text2">

<p>AHSFEWRGETHRYJUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUuet venenatis a, hendrerit ut eros. Donec erat quam, eleifend non consequat nec, laoreet vel mauris. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
</p>

<p align="right">Sincerly,</p>

<p align="right">Author</p></div></div></div></div>

[AN:Those last two divs close out  .trifold_letter2 and .trifold letter]

CSS

This is just so we don't get an ugly horizontal scroll bar when stuff goes out of bounds.

#workskin #chapter-12 {
  overflow: hidden;
}

This is the main "container" that determines the general max size for the letters. We have it expand height on :hover so that the non-formated text gets pushed down and out of the way. 

#workskin .trifold_letter {
  position: relative;
  margin: 0 auto;
  font-size: 0;
  font-family: Papyrus;
  width: 600px;
  height: 240px;
  max-width: 80%;
  min-width: 50%;
  transition: 2s;
  transition-delay: 2s;
}

#workskin .trifold_letter:hover {
  height: 600px;
  transition: 2s;
}

This is the envelope/cover and it helps to determine the size, appearance, and positioning of its box. Also note that I have Z-index 8 (highest number) so that the cover appears above everything else.  

:Hover class is there to help with the roation animation as well as the Z-index. See how it's 0? That mean's it'll render behind everything else.

#workskin THIS IS THE COVER,
#workskin .letter_cover {
  position: absolute;
  top: -20px;
  left: -20px;
  color: #383C45;
  background: linear-gradient(344deg, rgba(255,254,242,1) 0%, rgba(248,246,224,1) 6%, rgba(244,241,215,1) 37%, rgba(238,235,203,1) 51%, rgba(247,245,222,1) 92%, rgba(255,254,242,1) 100%);
  box-shadow: -2px 1px 5px 1px #00000010, 1px -2px 5px 1px #00000010;
  border: solid #383C4550 1px;
  width: 110%;
  min-height: 240px;
  max-height: 240px;
  transition: 2s;
  transition-delay: 2s;
  z-index: 8;
}

#workskin .letter_cover:hover {
  cursor: wait;
}

#workskin .trifold_letter:hover .letter_cover {
  top: -100px;
  left: 0px;
  background: linear-gradient(344deg, rgba(254,252,231,1) 0%, rgba(251,249,226,1) 6%, rgba(244,241,215,1) 37%, rgba(236,232,195,1) 51%, rgba(249,246,213,1) 92%, rgba(255,253,225,1) 100%);
  transform: rotate(15deg);
  transition: 2s;
  z-index: 0;
}

These refer to the various elements on the cover. Sending address, return address, and stamp. Since I declared font-size: 0; back in .trifold_letter (So that Ao3 doesn't mess with the spacing as much) that mean's I have to REdeclare a new font size anytime I want text to be visible. You'll see mostly font-size: 18px; from here after.

#workskin .letter_cover_text {
  position: relative;
  margin: 0 auto;
  top: 50px;
  max-width: 33%;
  min-width: 30%;
  font-size: 20px;
  overflow: visible;
}

#workskin .letter_cover_text_top {
  position: absolute;
  top: 10px;
  left: 20px;
  max-width: 33%;
  min-width: 30%;
  font-size: 15px;
  overflow: visible;
}

#workskin .letter_cover_stamp {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 75px;
  width: 80px;
  min-width: 10%;
  max-width: 30%;
  background: #f5f5f5;
  background-image: URL(https://archive.org/download/touch_202010/TOUCH.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 3px;
  box-shadow: 1px .5px 0px 0px #00000020, 1px .5px 0px 0px white inset;
}

This is Page ONE top segment. Similar to the cover, we have .letter_top that defines the appearance, .letter_top_text that defines the text (Text has its own class so that we can have blank margins for aesthetics), and .trifold_letter:hover .letter_top (similar logic to the pop-up section) which defines the animation.

Also note that the z-indexs are going to get subsequently smaller. We have 7 here, Mid is 6, and Bot is 5. This was to help the segments overlap properly (visual reasons). 

#workskin THIS IS THE LETTER TOP,
#workskin .letter_top {
  position: absolute;
  top: 0;
  left: 0;
  color: #383C45;
  background: linear-gradient(176deg, rgba(255,251,240,1) 0%, rgba(245,235,207,1) 81%, rgba(255,248,228,1) 100%);
  height: 200px;
  max-width: 100%;
  border-left: solid #383C4550 1px;
  border-right: solid #383C4550 1px;
  border-top: solid #383C4550 1px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  box-shadow: -5px -3px 10px 1px #00000010;
  transition: 2s;
  transition-delay: 2s;
  z-index: 7;
}

#workskin .letter_top_text {
  position: relative;
  margin: 0 auto;
  top: 20px;
  height: 170px;
  max-width: 90%;
  font-size: 18px;
  overflow: auto;
}

#workskin .trifold_letter:hover .letter_top {
  left: -20px;
  transform: skew(5deg);
  transition: 2s;

}

This is the mid segment. You'll notice in many of my .classes, I'll make the appearance class (in this cass .letter_mid) with a transition and a transition-delay. This is so that when you click away, the animation slowly reverts back to its start position. 

#workskin THIS IS THE LETTER MID,
#workskin .letter_mid {
  position: absolute;
  top: 0;
  left: 0;
  color: #383C45;
  background: linear-gradient(169deg, rgba(214,205,179,1) 0%, rgba(233,224,197,1) 52%, rgba(255,248,229,1) 100%);
  height: 200px;
  max-width: 100%;
  box-shadow: -5px -3px 10px 1px #00000010;
  border-left: solid #383C4550 1px;
  border-right: solid #383C4550 1px;
  transition: 2s;
  transition-delay: 2s;
  z-index: 6;
}

#workskin .letter_mid_text {
  position: relative;
  margin: 0 auto;
  top: -20px;
  max-width: 90%;
  height: 210px;
  font-size: 18px;
  overflow: auto;
}

#workskin .trifold_letter:hover .letter_mid {
  top: 200px;
  left: -20px;
  transform: skew(-5deg);
  transition: 2s;

}

And this is the bottom segment.

#workskin THIS IS THE LETTER BOT,
#workskin .letter_bot {
  position: absolute;
  top: 0px;
  left: .1px;
  color: #383C45;
  background: linear-gradient(353deg, rgba(255,251,240,1) 0%, rgba(242,231,201,1) 79%, rgba(255,248,228,1) 100%);
  height: 200px;
  max-width: 100%;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: solid #383C4550 1px;
  border-right: solid #383C4550 1px;
  border-bottom: solid #383C4550 1px;
  box-shadow: -5px -3px 10px 1px #00000010;
  transition: 2s;
  transition-delay: 2s;
  z-index: 5;
}

#workskin .letter_bot_text {
  position: relative;
  top: -20px;
  margin: 0 auto;
  max-width: 90%;
  height: 160px;
  font-size: 18px;
  overflow: auto;
}

#workskin .trifold_letter:hover .letter_bot {
  top: 400px;
  left: -20px;
  transition: 2s;
  transform: skew(5deg);
}

This is PAGE TWO. We have a .trifold_letter2 container here so that we can hover over any part of page two and it'll move all the pieces that are nested within it (in the HTML).

You'll notice that the hover animations have !important next to them. And that's because the second page actually has TWO :hover animations attached. The first one is when we hover over the cover and the pages spread out, and this one is when we hover over page two and it gets brought to the front. This is done by making the z-indexs really high, 11,10, and 9.

#workskin .trifold_letter2 {
  position: relative;
  margin: 0 auto;
  width: 600px;
  height: 240px;
  max-width: 80%;
  min-width: 50%;
  font-size: 0;
  transition: 2s;
  transition-delay: 2s;
}

#workskin .trifold_letter2:hover .letter_top2 {
  left: 10px !important;
  top: -10px !important;
  transition: .5s !important;
  z-index: 11;
}

#workskin .trifold_letter2:hover .letter_mid2 {
  left: 10px !important;
  top: 190px !important;
  transition: .5s !important;
  z-index: 10;
}

#workskin .trifold_letter2:hover .letter_bot2 {
  left: 10px !important;
  top: 390px !important;
  transition: .5s !important;
  z-index: 9;
}

This is the second page's top segment. It's very similar to page one, appearance, text, and animation. Note that segments top, mid, and bot have low z-indexesL 4, 3, and 2. This is so their start position is below page one.

#workskin THIS IS THE LETTER TOP,
#workskin .letter_top2 {
  position: absolute;
  left: 1px;
  top: 0px;
  color: #383C45;
  background: linear-gradient(176deg, rgba(255,251,240,1) 0%, rgba(245,235,207,1) 81%, rgba(255,248,228,1) 100%);
  height: 200px;
  max-width: 100%;
  border-left: solid #383C4550 1px;
  border-right: solid #383C4550 1px;
  border-top: solid #383C4550 1px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  box-shadow: -5px -3px 10px 1px #00000010;
  transition: 2s;
  transition-delay: 2s;
  z-index: 4;
}

#workskin .letter_top_text2 {
  position: relative;
  margin: 0 auto;
  top: 20px;
  height: 170px;
  max-width: 90%;
  font-size: 18px;
  overflow: auto;
}

#workskin .trifold_letter:hover .letter_top2 {
  top: 50px;
  left: 10px;
  transform: skew(5deg);
  transition: 2s;

This is the mid segment.

#workskin THIS IS THE LETTER MID,
#workskin .letter_mid2 {
  position: absolute;
  top: 0px;
  left: 0px;
  color: #383C45;
  background: linear-gradient(169deg, rgba(214,205,179,1) 0%, rgba(233,224,197,1) 52%, rgba(255,248,229,1) 100%);
  height: 200px;
  max-width: 100%;
  box-shadow: -5px -3px 10px 1px #00000010;
  border-left: solid #383C4550 1px;
  border-right: solid #383C4550 1px;
  transition: 2s;
  transition-delay: 2s;
  z-index: 3;
}

#workskin .letter_mid_text2 {
  position: relative;
  top: -20px;
  margin: 0 auto;
  max-width: 90%;
  height: 210px;
  font-size: 18px;
  overflow: auto;
}

#workskin .trifold_letter:hover .letter_mid2 {
  top: 250px;
  left: 10px;
  transform: skew(-5deg);
  transition: 2s;
}

This is the bot section. 

You may have noticed the #workskin THIS IS THE LETTER BOT  and various other "classes" used here. These aren't real classes, they're my notes. Ao3 wipes the typical /*coding notes*/, so adding a comma after some words is a workaround.

#workskin THIS IS THE LETTER BOT,
#workskin .letter_bot2 {
  position: absolute;
  top: 0px;
  left: 0px;
  color: #383C45;
  background: linear-gradient(353deg, rgba(255,251,240,1) 0%, rgba(242,231,201,1) 79%, rgba(255,248,228,1) 100%);
  height: 200px;
  max-width: 100%;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: solid #383C4550 1px;
  border-right: solid #383C4550 1px;
  border-bottom: solid #383C4550 1px;
  box-shadow: -5px -3px 10px 1px #00000010;
  transition: 2s;
  transition-delay: 2s;
  z-index: 2;
}

#workskin .letter_bot_text2 {
  position: relative;
  margin: 0 auto;
  top: -20px;
  max-width: 90%;
  height: 160px;
  font-size: 18px;
  overflow: auto;
}

#workskin .trifold_letter:hover .letter_bot2 {
  top: 450px;
  left: 10px;
  transition: 2s;
  transform: skew(5deg);
}

And this chonker is the scrollbar's appearance. Each text box in each page's segments has to be listed individually. To make sure the .letter_texts actually scroll, set it to overflow: auto;

#workskin THIS IS THE LETTER SCROLL BAR,
#workskin .letter_bot_text::-webkit-scrollbar,
#workskin .letter_mid_text::-webkit-scrollbar,
#workskin .letter_top_text::-webkit-scrollbar,
#workskin .letter_bot_text2::-webkit-scrollbar,
#workskin .letter_mid_text2::-webkit-scrollbar,
#workskin .letter_top_text2::-webkit-scrollbar {
  -webkit-appearance: none;
  display: block;
}

#workskin .letter_bot_text::-webkit-scrollbar:vertical,
#workskin .letter_mid_text::-webkit-scrollbar:vertical,
#workskin .letter_top_text::-webkit-scrollbar:vertical,
#workskin .letter_bot_text2::-webkit-scrollbar:vertical,
#workskin .letter_mid_text2::-webkit-scrollbar:vertical,
#workskin .letter_top_text2::-webkit-scrollbar:vertical {
  width: 8px;
}

#workskin .letter_bot_text::-webkit-scrollbar-thumb,
#workskin .letter_mid_text::-webkit-scrollbar-thumb,
#workskin .letter_top_text::-webkit-scrollbar-thumb,
#workskin .letter_bot_text2::-webkit-scrollbar-thumb,
#workskin .letter_mid_text2::-webkit-scrollbar-thumb,
#workskin .letter_top_text2::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(134,156,149,0) 0%, rgba(187,207,200,1) 48%, rgba(134,156,149,0) 100%);
  border-radius: 8px;
  border: 2px solid #ffffff25;
}

#workskin .letter_bot_text::-webkit-scrollbar-thumb:hover,
#workskin .letter_mid_text::-webkit-scrollbar-thumb:hover,
#workskin .letter_top_text::-webkit-scrollbar-thumb:hover,
#workskin .letter_bot_text2::-webkit-scrollbar-thumb:hover,
#workskin .letter_mid_text2::-webkit-scrollbar-thumb:hover,
#workskin .letter_top_text2::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(134,156,149,0) 0%, rgba(140,154,149,1) 48%, rgba(134,156,149,0) 100%);
  border-radius: 8px;
  border: 2px solid #ffffff25;
}

#workskin .letter_bot_text::-webkit-scrollbar-track,
#workskin .letter_mid_text::-webkit-scrollbar-track,
#workskin .letter_top_text::-webkit-scrollbar-track,
#workskin .letter_bot_text2::-webkit-scrollbar-track,
#workskin .letter_mid_text2::-webkit-scrollbar-track,
#workskin .letter_top_text2::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #ffffff25;
}

I think that's it? Theoretically speaking, you could add more pages, though I don't know at what point your computer will catch fire. I also tried to add an opening flap animation, but I couldn't figure out how to do that with just CSS. It's definitely possible if you make your own art asset though.

Chapter Text

Let's say you're writing a chapter here, right? You finish, click the next page and...

#workskin .hidden-link a {
  display: none;
}

#workskin .text-container {
  display: none;
}

#workskin a:target ~ .text-container {
  display: block;
  content: "";
}

#workskin .paragraph1,
#workskin .paragraph2,
#workskin .paragraph3 {
  content: "";
  display: inline-block;
  margin-bottom: 18px;
  color: red;
}

  
  #workskin .paragraph1:after {
  content: " Bam. New Text. This wasn't here before, nor is it available in the 'hide author's style' option. This is done not by using HTML text, but by using the content:after property that we also used to change  the title. All this text is actually written in my Workskin CSS sheet. The link on Chapter 14, is just that. A Link that I copy pasted from the URL. I've technically made that link and its corresponding bookmark invisible because there's nothing actually written for it. But writing like this is a little finicky because the content property doesn't allow for a lot of 'symbols'. For example, since I used double quotations to contain this paragraph in the workskin, I'm forced to use single quotations if I want to make contractions or dialogue quotes. Not only that, but 'paragraphs' have to be faked. In this case, I used a combination of 3 spans for 3 paragraphs and margins to fake paragraph spacing.";
}

#workskin .paragraph2:after {
  content: "But what makes this really work relates to that URL I mentioned. If you look in your search bar, at the end you'll see a 'hashtag activatehiddentext'. I made up the name, but this is what's called a 'state'. I'll be honest, I don't get it too well, but it's like a slightly different version of this page. This case, that version has red text. To access that text we use 'a:target ~ .text-container'. the tilde can also be replaced with a +, but it basically tells the CSS to select the adjacent or directly after thing and change it.  In other words it reads, 'when we've found a link and its targeted state, we'll then go to find .text-container. I think technically you could name the a:link something more specific, like if you assign the link a class, but this works for me for what it can do right now.";
}

#workskin .paragraph3:after {
  content: "As always you can change the appearance of the text to suit your needs, but with this specific trick you can only change the 'red', not the original, unaltered text. It's also always going to load the page at the start of the red text because that's where the link book mark is. I tried moving it around so I could give myself better positioning, but it didn't work. I also tried making two separate sections, like one red and one blue, but I couldn't get that to work. I think it has to do with how these three paragraphs are spans, key word spans, nothing else wanted to work..., of the same paragraph located right next to the link book mark. IDK your best bet is to do some fiddling yourself, but I'll post the CSS and HTML in the 'hide creator's style' section.";
}
  

Chapter Text

You click this here link and it takes you back to Ch 13 but with....

Hello World

Chapter Text

Irrelevant Text

Irrelevant Text

Irrelevant Text

Irrelevant Text

CSS

This could literally have any element, it just needs to exist as a container around the base text.

#workskin .overlappingtexttop {
  position: relative;
}

All this does is reposition the transparent text up about one line. 

#workskin .overlappingtextbottom {
  position: absolute;
  opacity: 15%;
  bottom: -9px;
  left: 20px;
}

HTML

<p>Irrelevant Text</p>

<p></p><div class="overlappingtexttop">

<p>The taste of guilt is hauntingly distinct. It settles at the back of the throat, taunting the uvula, and is quite potent when warmed by the wheezing breath of a dying friend. It’s what blue tastes like, he thinks distantly, shaking his maw until her life is dissolved by saliva and only the bones in her neck kept her head attached. It was the corpse of Queen Zelda that slumped from his jaw as the only option he told himself. The aftertaste of corrupted magic being the justification that stayed his humanity. </p>

<p></p><div class="overlappingtextbottom">

<p>“I think I know who’s responsible,” said the haunted child.</p>

</div>

</div>

I won't do the whole thing but it's a simple "box withing box" design. "Overlappingtexttop" is required to make an artificial box around one of the paragraphs so that "overlappingtextbottom" has some frame of reference to position itself around.

This is a decidedly ugly design IMO. If anyone uses a resized text skin I imagine the spacing will be ruined. You could designate the size of the text but then you'll be screwing over people with resized text so, meh...Not to mention the main thing I noticed was that if the overlappingtextBOTTOM is different in length from the overlappingtextTOP then the texts tend to collide. I think that's what's happening in the first paragraph. Shrugs. Hover effects could absolutely be applied to this as well as different design choices, but I can't think of any positioning techniques that don't rely on relative pixel spacing... I've also chosen not to use font-size: 0 here because I this was pretty simple to edit, but mark my words, Ao3 will take advantage of you the moment you slip up.

Chapter Text

Birb

Birb

HTML

Do not change the order in which the shapes are written. The code loads from top to bottom, so anything at the bottom, such as the tail, will appear on top of the image. Like photoshop layers.

    <div class="MainContainer">
  
   <p class="RavenHead1"> </p>
    <p class="RavenHead1-1"> </p>
    <p class="RavenHead2"> </p>
    
   <p class="RavenEye1"> </p>
    <p class="RavenEye1-1"> </p>
    
   <p class="RavenBeak1"> </p> 
      <p class="RavenBeak1-1"> </p>
     <p class="RavenBeak2"> </p>
      <p class="RavenBeak2-1"> </p>
  
     
   
   <p class="LRavenLeg1"> </p>
    <p class="LRavenLeg1-1"> </p>
    
   <p class="LRavenLeg2"> </p>
   <p class="LRavenLeg3"> </p>
    <p class="LRavenLeg3-1"> </p>
   <p class="LRavenLeg4"> </p>
   <p class="LRavenLeg5"> </p>
   
   <p class="LRavenStick"> </p>
    <p class="LRavenStick1"> </p>
   
   <p class="LRavenLeg6"> </p>
    <p class="LRavenLeg6-1"> </p>
   
   <p class="RavenBody1"> </p>
     <p class="RavenBody1-1"> </p>
    
   
   
   <p class="RavenLeg1"> </p>
    <p class="RavenLeg1-1"> </p>
    
   <p class="RavenLeg2"> </p>
   <p class="RavenLeg3"> </p>
    <p class="RavenLeg3-1"> </p>
   <p class="RavenLeg4"> </p>
   <p class="RavenLeg5"> </p>
   <p class="RavenLeg6"> </p>
    <p class="RavenLeg6-1"> </p>
   
    <p class="RavenTail1"> </p>
    <p class="RavenTail1-1"> </p>
       <p class="RavenTail1-2"> </p>
    
    <p class="RavenBody2"> </p>

    </div>

CSS

The size of the image cannot be changed though if you'd like to move it around you can change the position|top|left|right|bottom of .MainContainer

I've labeled some of the shapes, but I wouldn't mess around with them too much unless you wanna fiddle with pixel positions for hours.

.MainContainer {  The border can be removed, it's just for show.
 position: relative;
width: 300px;
height: 250px;
border: solid black 1px;
font-size: 0px;
}

.RavenHead1 {
 position: absolute; 
 top: 10px;
 left: 65px;
 width: 65px;
 height: 50px;
 background: #14141f;
 border-top-left-radius: 60%;
 border-top-right-radius:80%;
 border-bottom-left-radius:80%;
 
}
.RavenHead1-1 {
 position: absolute; 
 top: 30px;
 left: 75px;
 width: 55px;
 height: 40px;
 background: #14141f;
 border-top-right-radius:100%;
 border-bottom-left-radius:60%;
}
.RavenHead2, back neck {
 position: absolute; 
 top: 40px;
 left: 100px;
 width: 55px;
 height: 40px;
 background: #17202A;
 border-bottom-left-radius:100%;
 transform: rotate(50deg);
}

.RavenEye1 {
 position: absolute; 
 top: 22px;
 left: 88px;
 width: 6px;
 height: 5px;
 background: #14141f;
 border-radius: 50%;
 border: solid slategray 2px;
 
}
.RavenEye1-1 {
 position: absolute; 
 top: 23px;
 left: 93px;
 width: 3px;
 height: 3px;
 background: snow;
 border-radius: 50%;
}

.RavenBody1 {
 position: absolute;
 top: 50px;
 left: 80px;
 width: 75px;
 height: 100px;
 background: #14141f;
 border-bottom-left-radius: 100%;
 border-top-right-radius: 70%;
 
}
.RavenBody1-1, back {
 position: absolute;
 top: 30px;
 left: 120px;
 width: 75px;
 height: 135px;
 background: #14141f;
 border-bottom-left-radius: 130%;
 border-top-right-radius: 50%;
 transform: rotate(145deg);
 
}

.RavenBeak1 {
 position: absolute;
 top: 25px;
 left: 30px;
 width: 40px;
 height: 15px;
 background: tan;
 border-top-left-radius: 150%;
}
.RavenBeak1-1 {
 position: absolute;
 top: 25px;
 left: 70px;
 width: 7px;
 height: 15px;
 background: tan;
 border-top-right-radius: 120%;
}

.RavenBeak2 {
 position: absolute;
 top: 40px;
 left: 30px;
 width: 40px;
 height: 8px;
 background: rosybrown;
 border-bottom-left-radius: 150%;
}
.RavenBeak2-1 {
 position: absolute;
 top: 40px;
 left: 70px;
 width: 10px;
 height: 8px;
 background: rosybrown;
 border-bottom-right-radius: 100%;
 border-top-right-radius:100%;
}

.LRavenLeg1, thigh {
 position: absolute;
 top: 115px;
 left: 120px;
 width: 20px;
 height: 60px;
 background: #1B2631;
 border-bottom-left-radius: 100%;
  transform: rotate(10deg);
 
}
.LRavenLeg1-1 {
 position: absolute;
 top: 118px;
 left: 137px;
 width: 18px;
 height: 60px;
 background: #1B2631;
 border-bottom-right-radius: 100%;
  transform: rotate(10deg);
 
}
.LRavenLeg2, calf {
 position: absolute;
 top: 150px;
 left: 110px;
 width: 8px;
 height: 40px;
 background: tan;
 border-bottom-right-radius: 100%;
 border-top-left-radius: 100%;
  transform: rotate(100deg);
 
}
.LRavenLeg3, index1 {
 position: absolute;
 top: 160px;
 left: 88px;
 width: 5px;
 height: 20px;
 background: rosybrown;
 border-top-right-radius: 100%;
  transform: rotate(45deg);
 
}
.LRavenLeg6, index2 {
 position: absolute;
 top: 170px;
 left: 88px;
 width: 5px;
 height: 20px;
 background: rosybrown;
border-bottom-left-radius:120%;
  transform: rotate(-50deg);
 
}

.LRavenLeg3-1, middle-1 {
 position: absolute;
 top: 158px;
 left: 85px;
 width: 5px;
 height: 20px;
 background: tan;
 border-bottom-left-radius: 100%;
  transform: rotate(65deg);
 
}
.LRavenLeg6-1, middle-2 {
 position: absolute;
  top: 168px;
 left: 88px;
 width: 5px;
 height: 20px;
 background: tan;
border-top-right-radius:100%;
  transform: rotate(120deg);
 
}

.LRavenLeg4, thumb {
 position: absolute;
 top: 165px;
 left: 100px;
 width: 5px;
 height: 15px;
 background: tan;
 border-bottom-right-radius: 100%;
  transform: rotate(-30deg);
 
}
.LRavenLeg5, thumb2 {
 position: absolute;
 top: 175px;
 left: 95px;
 width: 5px;
 height: 15px;
 background: tan;
 border-top-left-radius:100%;
  transform: rotate(-125deg);

}

.LRavenStick {
  position: absolute;
 top: 155px;
 left: 85px;
 width: 10px;
 height: 40px;
 background: sienna;
 border-top-left-radius:150%;
  transform: rotate(-130deg);
}

.LRavenStick1, circle {
  position: absolute;
 top: 158px;
 left: 100px;
 width: 10px;
 height: 10px;
 background: rosybrown  ;
 border-radius:150%;
  transform: rotate(-130deg);
}

.RavenLeg1, thigh {
 position: absolute;
 top: 130px;
 left: 140px;
 width: 20px;
 height: 60px;
 background: #14141f;
 border-bottom-left-radius: 100%;
  transform: rotate(-20deg);
 
}
.RavenLeg1-1 {
 position: absolute;
 top: 124px;
 left: 157px;
 width: 18px;
 height: 60px;
 background: #14141f;
 border-bottom-right-radius: 100%;
  transform: rotate(-20deg);
 
}
.RavenLeg2, calf {
 position: absolute;
 top: 180px;
 left: 155px;
 width: 8px;
 height: 40px;
 background: tan;
 border-top-right-radius: 30%;
 border-top-left-radius: 30%;
  transform: rotate(20deg);
 
}
.RavenLeg3, index1 {
 position: absolute;
 top: 200px;
 left: 140px;
 width: 5px;
 height: 20px;
 background: rosybrown;
 border-bottom-right-radius: 100%;
  transform: rotate(130deg);
 
}
.RavenLeg6, index2 {
 position: absolute;
 top: 200px;
 left: 125px;
 width: 5px;
 height: 20px;
 background: rosybrown;
border-bottom-left-radius:100%;
  transform: rotate(50deg);
 
}

.RavenLeg3-1, middle-1 {
 position: absolute;
 top: 200px;
 left: 145px;
 width: 5px;
 height: 20px;
 background: tan;
 border-bottom-right-radius: 100%;
  transform: rotate(135deg);
 
}
.RavenLeg6-1, middle-2 {
 position: absolute;
 top: 200px;
 left: 135px;
 width: 5px;
 height: 20px;
 background: tan;
border-bottom-left-radius:100%;
  transform: rotate(45deg);
 
}

.RavenLeg4, thumb {
 position: absolute;
 top: 207px;
 left: 160px;
 width: 5px;
 height: 15px;
 background: tan;
 border-top-right-radius: 100%;
  transform: rotate(70deg);
 
}
.RavenLeg5, thumb2 {
 position: absolute;
 top: 205px;
 left: 170px;
 width: 5px;
 height: 15px;
 background: tan;
 border-top-left-radius:100%;
  transform: rotate(125deg);
 
}

.RavenTail1 {
 position: absolute;
 top: 80px;
 left: 220px;
 width: 30px;
 height: 130px;
 background: #14141f;
 border-top-left-radius: 140%;
 transform: rotate(110deg);
 
}

.RavenTail1-1, underside {
 position: absolute;
 top: 125px;
 left: 215px;
 width: 30px;
 height: 100px;
 border-bottom-left-radius: 70%;
 border-top-right-radius: 40%;
 transform: rotate(110deg);
   box-shadow: -10px 0px 0px 0 #14141f;
 
}
.RavenTail1-2, underside butt {
 position: absolute;
 top: 125px;
 left: 180px;
 width: 30px;
 height: 50px;
 background: #14141f;
 border-top-right-radius: 100%;
 transform: rotate(110deg);
   }

.RavenBody2, wing {
 position: absolute;
 top: 20px;
 left: 145px;
 width: 70px;
 height: 130px;
 background: ;
 box-shadow: #17202A 20px 10px 0px 0px;
 border-top-right-radius: 150%;
 border-bottom-right-radius: 90%;
 transform: rotate(120deg);
 
}

E