Chapter Text

new experimental css thing but only allowed in chromium-based browser

put this in the workskin bro, trust me fr (also click the circle thingies below the big solid block of color once you're done (below the code (view it in chromium btw this does not work in safari or Firefox))) -mew:

#workskin .rousel {
  width: 569px;
  display: flex;
  overflow: hidden;
  margin: 0;
  list-style: none;
  scroll-marker-group: after;
  text[they just let in any css property walk in bro]: forreal fr;
}

#workskin .rousel::scroll-marker-group {
  display: flex;
  position: absolute;
  margin: 0 50%;
}

#workskin .rousel li::scroll-marker {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: 2px solid;
}

#workskin .rousel li::scroll-marker:target-current {
  background: black;
}

#workskin .rousel li {
  width: 600px;
  padding-top: 56.25%;
  flex-shrink: 0;
  margin: 0 auto;
  list-style-type: none;
}

#workskin .rousel li:first-child {
  background: orange;
}

#workskin .rousel li:nth-child(2) {
  background: red;
}

#workskin .rousel li:nth-child(3) {
  background: blue;
}

#workskin .rousel li:nth-child(4) {
  background: pink;
}

#workskin .rousel li:nth-child(5) {
  background: green;
}

WASuP THIS IS WHAT I WANTED TO SHOW U, POSITION: FIXED; AMIRIGHT? ANYWAYS, BTW I WILL REPLY TO THE COMMENTS IN THE IN MY INBOX JUST GIVE ME A DAY OR SOMETHING I NEED SLEEP

fuck it stopped working, why??? -10/31/25

𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️

does this font WORK? 123 abcABC

does this font WORK? 123 abcABC

does this font WORK? 123 abcABC

does this font WORK? 123 abcABC

wog wog wog wog

<p class="rainbowtext">Holy shit it works</p>

#workskin .rainbowtext {
  background-image: url(https://raw.githubusercontent.com/GumbaBunny/CodingStory/refs/heads/main/Images/rainbow_down.gif);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

I grabbed a random rainbow gif from google then slid it into github to host it somewhere, slapped the code above and this html and boom.

This is color changing, just slower, wog wog wog wog wog wog wog wog wog wog wog wog

                                                                       '\      o     +                '      *                           
                '                    .                                 . \             *           *                                     
                                  *                                       *                                                          '   
                                                *               .           .:'             o       +               .                  '.
    +                                             +.                    _.::'     .                         o                            
                          .                '        .                  (_.'                      .                                       
               .                                   +                                                                                  +  
             |             '                                         '            .                                        +             
 .         - o -                                        *     .                 +     '                                                  
             |                                  '                                                              .                         
                                                                                                          '    +                         
    o                                o                          '    '          .        +        '                      .            .  
                                                            '                                                                            
   '                      o                    '   '      +                          .   |     +                                         
          .-. *  .                                         |                            -o-   +                                          
         ( (                                    .         -o-              o             |                           +                   
          `-'                                              |                                            .        '                       
           .           o                       .                                   \                  *                                  
    +                .                                                   .      '   \             '                                      
.                                                                                    *                .                                  

The current time is UTC

wog?

  ,-.       _,---._ __  / \
 /  )    .-'       `./ /   \
(  (   ,'            `/    /|
 \  `-"             \'\   / |
  `.              ,  \ \ /  |
   /`.          ,'-`----Y   |
  (            ;        |   '
  |  ,-.    ,-'         |  /
  |  | (   |            | /
  )  |  \  `.___________|/
  `--'   `--'

• is this a square
• no
• ao3 hates shapes ig

|￣￣￣￣￣￣￣|
|⠀⠀⠀ BRUH ⠀⠀|
|＿＿＿＿＿＿＿|
(\__/) ||
(•ㅅ•) ||
/ 　 づ

One

1 2 3

Two

4 5 6

Celixsee-ly-ex the Wolf of Water

Hover over this to reveal the tooltip

Select a color to be:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa what what why is this gif so weird why does it sway like that

What if I exploded into a million bits. Would ao3 care? Would it put me back together again piece by piece? No, it wouldn't. Thats why I put myself together and am now dissecting ao3 in and out. It will become my playground, if it isnt already. All of this, all of these months and hours researching and making things work, all of it just to make gay people on ao3. For me, at least. It was always about the gay people that infect my mind. It isn't a sickness, its the cure. These gay people I love, the gweebus' they are, have made me learn something just to make their stories more unique. A news article, wordsearch, invisible text, pin code password, and more.. all of it just for the reader to experience something beyond reading. They are apart of the story in ways not seen often. They are emmersed in new ways. A rain gif background, or a snowy landscape. A cyoa that looks like a menu screen or even text thats slightly different or off. What is the default font ao3 uses? Do you know it by heart? What if it changed ever so slightly? What if the size was just 1 point smaller or bigger, would someone point it out? Ill test that one day, I swear.. I just realized all of these test elements are all rainbow-esk. That was not on purpose but colors are so damn pretty okay?! It gives me whiplash when I code here/other works I have that are all super css/html heavy then I go "lets take a break and read my gay people!" and then stare at monochrome flat words. I took a 2 week break from coding and when I returned I knew so much less somehow. i suppose soaking in information from september to early march nonstop everyday made my brain break because i went from knowing virtually little to nothing about coding, let alone on ao3, to whatever the hell all of this is. like what do you MEAN ive made all of this slowly over 6+ months? wait. SIX+ MONTHS?>? ough.. goodbye sanity, hello css/html. and yes I am rambling bc i used too much lorem ipsum and want to see how this gif works with big and a lot of text. kinda hard to read i get that but alas, its probably just the gif. Ill text other gifs and even images and stuff later (which by the time you are reading this ive probably done? depending??) anyways thanks for even clicking on this work ive put a lot of effort into anything and everything i can think about under the sun. i literally have like, 15 works hidden where i test various things before it even goes into CE (coding encycloedia). love you big

#workskin .preface.group h2.title { background-image: URL(https://raw.githubusercontent.com/GumbaBunny/CodingStory/refs/heads/main/Images/yippeedance.gif); background-size: contain; background-repeat: no-repeat; background-position: center center; font-size: 0; height: 300px; } #workskin .byline.heading { font-size: 0; } #workskin .byline.heading::after { content: "This title is temporary"; font-size: 20px; padding: 5px; background: linear-gradient(to right, #ff0000, #FFA500, #FFFF00, #00FF00, #00FFFF, #4169E1, #8A2BE2, #511c75); color: black; }

<p class="rainbowstackthin" Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<p class="rainbowstackthick" Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

stacked p not blockquote stacked p not blockquote stacked p not blockquote

stacked blockquote stacked blockquote stacked blockquote stacked blockquote

fade test Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

wog wog Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

the ever Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

so many of these Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

SHART SHART SHART Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Youre reading this!

ough ignore this

#workskin Bomb Test ################################## {
color: INHERIT;
}

#workskin .bomb {
display: block;
visibility: visible;
transition-property: visibility;
transition-delay: 9999999999s;
}

#workskin .boom {
display: none;
}

#workskin .boom:has {
visibility: none;
transition-property: visibility;
transition-delay: 3s;
}

#workskin a.bomb:target {
color: inherit;
}

Chapter Text

• Humor Me by Mew
  [Page 1]

  Just humor me for a moment yeah?

  That the pages DO NOT have a back. That the books are not complying with gravity.

  Just pretend, it doesn't exist. I tried to fix these problems. I think I reached my limit. This is all I can do.

  [Page 2]

  And for the sake of my sanity,

  Someone else will fix it.

  [Page 3]

  I HOPE.

• TEST1 by Mew
  [Page 1]

  TEST TEST TEST

  [Page 2]

  TEST TEST TEST

• TEST2 by Mew
  [Page 1]

  TEST

  TEST TEST TEST
  [Page 2]

  

  Lol

CHN 1, CHN 2, CHN 3

Only 's does this work across chapters

Someones Contact

Monday, 11:45 AM

Click

Name1

bruh 1

bruh 3

Name2

bruh 4

not mine, need to edit some things though:

apolgy for bad english
where were u wen mack die
i was at house eating dorito when phone ring
"mackerl cheeze is kil"
"no"

drabblen't

Chapter Text

ao3 yap bc ima eventually email them questions one day

-why is the unsubscribe button so big and easily clickable (its literally bigger and easier to click on than the authors name)
-why do div formatting in html jump up and are not separated
-a links in notes randomly gain nbsp spacing, why (even without editing it at all)
-why can ul not have squares or other shapes and only circles?
-psedues are complex to understand and hard to edit (why is the edit button for pseudes where it is at? hard to find) -if you bookmark as a psedue why does it show up on main.. what if we only want it to show up on one pseud -cancel option when coding in css (only has an update one). request edit button be moved to the top. why is it right beside delete and also at the bottom. -work status unknown: how? -work status: external work displays in incorrect spot iirc

Chapter Text

Guest Reader⁠  (not logged in at least)  

User Name: ⁠ ⁠A a B b C c D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z 0 1 2 3 4 5 6 7 8 9█████A a B b C c D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z 0 1 2 3 4 5 6 7 8 9 _⁠ ; First and last character of your username
 

#workskin .guest:is(:not(.logged-out *)),
#workskin .detect-user,
#workskin .detect-user span {
  display: none;
}

#workskin .detect-user:is(:not(.logged-out *)) {
  display: block;
}

#workskin .detect-user span:nth-child(1):is(*:has(#greeting .user .dropdown [href^='/users/A']) *),
#workskin .detect-user span:nth-child(2):is(*:has(#greeting .user .dropdown [href^='/users/a']) *),
#workskin .detect-user span:nth-child(3):is(*:has(#greeting .user .dropdown [href^='/users/A']) *),
#workskin .detect-user span:nth-child(4):is(*:has(#greeting .user .dropdown [href^='/users/b']) *),
#workskin .detect-user span:nth-child(5):is(*:has(#greeting .user .dropdown [href^='/users/C']) *),
#workskin .detect-user span:nth-child(6):is(*:has(#greeting .user .dropdown [href^='/users/c']) *),
#workskin .detect-user span:nth-child(7):is(*:has(#greeting .user .dropdown [href^='/users/D']) *),
#workskin .detect-user span:nth-child(8):is(*:has(#greeting .user .dropdown [href^='/users/d']) *),
#workskin .detect-user span:nth-child(9):is(*:has(#greeting .user .dropdown [href^='/users/E']) *),
#workskin .detect-user span:nth-child(10):is(*:has(#greeting .user .dropdown [href^='/users/e']) *),
#workskin .detect-user span:nth-child(11):is(*:has(#greeting .user .dropdown [href^='/users/F']) *),
#workskin .detect-user span:nth-child(12):is(*:has(#greeting .user .dropdown [href^='/users/f']) *),
#workskin .detect-user span:nth-child(13):is(*:has(#greeting .user .dropdown [href^='/users/G']) *),
#workskin .detect-user span:nth-child(14):is(*:has(#greeting .user .dropdown [href^='/users/g']) *),
#workskin .detect-user span:nth-child(15):is(*:has(#greeting .user .dropdown [href^='/users/H']) *),
#workskin .detect-user span:nth-child(16):is(*:has(#greeting .user .dropdown [href^='/users/h']) *),
#workskin .detect-user span:nth-child(17):is(*:has(#greeting .user .dropdown [href^='/users/I']) *),
#workskin .detect-user span:nth-child(18):is(*:has(#greeting .user .dropdown [href^='/users/i']) *),
#workskin .detect-user span:nth-child(19):is(*:has(#greeting .user .dropdown [href^='/users/J']) *),
#workskin .detect-user span:nth-child(20):is(*:has(#greeting .user .dropdown [href^='/users/j']) *),
#workskin .detect-user span:nth-child(21):is(*:has(#greeting .user .dropdown [href^='/users/K']) *),
#workskin .detect-user span:nth-child(22):is(*:has(#greeting .user .dropdown [href^='/users/k']) *),
#workskin .detect-user span:nth-child(23):is(*:has(#greeting .user .dropdown [href^='/users/L']) *),
#workskin .detect-user span:nth-child(24):is(*:has(#greeting .user .dropdown [href^='/users/l']) *),
#workskin .detect-user span:nth-child(25):is(*:has(#greeting .user .dropdown [href^='/users/M']) *),
#workskin .detect-user span:nth-child(26):is(*:has(#greeting .user .dropdown [href^='/users/m']) *),
#workskin .detect-user span:nth-child(27):is(*:has(#greeting .user .dropdown [href^='/users/N']) *),
#workskin .detect-user span:nth-child(28):is(*:has(#greeting .user .dropdown [href^='/users/n']) *),
#workskin .detect-user span:nth-child(29):is(*:has(#greeting .user .dropdown [href^='/users/O']) *),
#workskin .detect-user span:nth-child(30):is(*:has(#greeting .user .dropdown [href^='/users/o']) *),
#workskin .detect-user span:nth-child(31):is(*:has(#greeting .user .dropdown [href^='/users/P']) *),
#workskin .detect-user span:nth-child(32):is(*:has(#greeting .user .dropdown [href^='/users/p']) *),
#workskin .detect-user span:nth-child(33):is(*:has(#greeting .user .dropdown [href^='/users/Q']) *),
#workskin .detect-user span:nth-child(34):is(*:has(#greeting .user .dropdown [href^='/users/q']) *),
#workskin .detect-user span:nth-child(35):is(*:has(#greeting .user .dropdown [href^='/users/R']) *),
#workskin .detect-user span:nth-child(36):is(*:has(#greeting .user .dropdown [href^='/users/r']) *),
#workskin .detect-user span:nth-child(37):is(*:has(#greeting .user .dropdown [href^='/users/S']) *),
#workskin .detect-user span:nth-child(38):is(*:has(#greeting .user .dropdown [href^='/users/s']) *),
#workskin .detect-user span:nth-child(39):is(*:has(#greeting .user .dropdown [href^='/users/T']) *),
#workskin .detect-user span:nth-child(40):is(*:has(#greeting .user .dropdown [href^='/users/t']) *),
#workskin .detect-user span:nth-child(41):is(*:has(#greeting .user .dropdown [href^='/users/U']) *),
#workskin .detect-user span:nth-child(42):is(*:has(#greeting .user .dropdown [href^='/users/u']) *),
#workskin .detect-user span:nth-child(43):is(*:has(#greeting .user .dropdown [href^='/users/V']) *),
#workskin .detect-user span:nth-child(44):is(*:has(#greeting .user .dropdown [href^='/users/v']) *),
#workskin .detect-user span:nth-child(45):is(*:has(#greeting .user .dropdown [href^='/users/W']) *),
#workskin .detect-user span:nth-child(46):is(*:has(#greeting .user .dropdown [href^='/users/w']) *),
#workskin .detect-user span:nth-child(47):is(*:has(#greeting .user .dropdown [href^='/users/X']) *),
#workskin .detect-user span:nth-child(48):is(*:has(#greeting .user .dropdown [href^='/users/x']) *),
#workskin .detect-user span:nth-child(49):is(*:has(#greeting .user .dropdown [href^='/users/Y']) *),
#workskin .detect-user span:nth-child(50):is(*:has(#greeting .user .dropdown [href^='/users/y']) *),
#workskin .detect-user span:nth-child(51):is(*:has(#greeting .user .dropdown [href^='/users/Z']) *),
#workskin .detect-user span:nth-child(52):is(*:has(#greeting .user .dropdown [href^='/users/z']) *),
#workskin .detect-user span:nth-child(53):is(*:has(#greeting .user .dropdown [href^='/users/0']) *),
#workskin .detect-user span:nth-child(54):is(*:has(#greeting .user .dropdown [href^='/users/1']) *),
#workskin .detect-user span:nth-child(55):is(*:has(#greeting .user .dropdown [href^='/users/2']) *),
#workskin .detect-user span:nth-child(56):is(*:has(#greeting .user .dropdown [href^='/users/3']) *),
#workskin .detect-user span:nth-child(57):is(*:has(#greeting .user .dropdown [href^='/users/4']) *),
#workskin .detect-user span:nth-child(58):is(*:has(#greeting .user .dropdown [href^='/users/5']) *),
#workskin .detect-user span:nth-child(59):is(*:has(#greeting .user .dropdown [href^='/users/6']) *),
#workskin .detect-user span:nth-child(60):is(*:has(#greeting .user .dropdown [href^='/users/7']) *),
#workskin .detect-user span:nth-child(61):is(*:has(#greeting .user .dropdown [href^='/users/8']) *),
#workskin .detect-user span:nth-child(62):is(*:has(#greeting .user .dropdown [href^='/users/9']) *),
#workskin .detect-user span:nth-child(63):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=A]) *),
#workskin .detect-user span:nth-child(64):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=a]) *),
#workskin .detect-user span:nth-child(65):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=B]) *),
#workskin .detect-user span:nth-child(66):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=b]) *),
#workskin .detect-user span:nth-child(67):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=C]) *),
#workskin .detect-user span:nth-child(68):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=c]) *),
#workskin .detect-user span:nth-child(69):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=D]) *),
#workskin .detect-user span:nth-child(70):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=d]) *),
#workskin .detect-user span:nth-child(71):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=E]) *),
#workskin .detect-user span:nth-child(72):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=e]) *),
#workskin .detect-user span:nth-child(73):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=F]) *),
#workskin .detect-user span:nth-child(74):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=f]) *),
#workskin .detect-user span:nth-child(75):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=G]) *),
#workskin .detect-user span:nth-child(76):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=g]) *),
#workskin .detect-user span:nth-child(77):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=H]) *),
#workskin .detect-user span:nth-child(78):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=h]) *),
#workskin .detect-user span:nth-child(79):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=I]) *),
#workskin .detect-user span:nth-child(80):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=i]) *),
#workskin .detect-user span:nth-child(81):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=J]) *),
#workskin .detect-user span:nth-child(82):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=j]) *),
#workskin .detect-user span:nth-child(83):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=K]) *),
#workskin .detect-user span:nth-child(84):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=k]) *),
#workskin .detect-user span:nth-child(85):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=L]) *),
#workskin .detect-user span:nth-child(86):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=l]) *),
#workskin .detect-user span:nth-child(87):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=M]) *),
#workskin .detect-user span:nth-child(88):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=m]) *),
#workskin .detect-user span:nth-child(89):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=N]) *),
#workskin .detect-user span:nth-child(90):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=n]) *),
#workskin .detect-user span:nth-child(91):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=O]) *),
#workskin .detect-user span:nth-child(92):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=o]) *),
#workskin .detect-user span:nth-child(93):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=P]) *),
#workskin .detect-user span:nth-child(94):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=p]) *),
#workskin .detect-user span:nth-child(95):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=Q]) *),
#workskin .detect-user span:nth-child(96):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=q]) *),
#workskin .detect-user span:nth-child(97):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=R]) *),
#workskin .detect-user span:nth-child(98):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=r]) *),
#workskin .detect-user span:nth-child(99):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=S]) *),
#workskin .detect-user span:nth-child(100):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=s]) *),
#workskin .detect-user span:nth-child(101):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=T]) *),
#workskin .detect-user span:nth-child(102):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=t]) *),
#workskin .detect-user span:nth-child(103):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=U]) *),
#workskin .detect-user span:nth-child(104):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=u]) *),
#workskin .detect-user span:nth-child(105):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=V]) *),
#workskin .detect-user span:nth-child(106):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=v]) *),
#workskin .detect-user span:nth-child(107):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=W]) *),
#workskin .detect-user span:nth-child(108):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=w]) *),
#workskin .detect-user span:nth-child(109):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=X]) *),
#workskin .detect-user span:nth-child(110):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=x]) *),
#workskin .detect-user span:nth-child(111):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=Y]) *),
#workskin .detect-user span:nth-child(112):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=y]) *),
#workskin .detect-user span:nth-child(113):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=Z]) *),
#workskin .detect-user span:nth-child(114):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=z]) *),
#workskin .detect-user span:nth-child(115):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=0]) *),
#workskin .detect-user span:nth-child(116):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=1]) *),
#workskin .detect-user span:nth-child(117):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=2]) *),
#workskin .detect-user span:nth-child(118):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=3]) *),
#workskin .detect-user span:nth-child(119):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=4]) *),
#workskin .detect-user span:nth-child(120):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=5]) *),
#workskin .detect-user span:nth-child(121):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=6]) *),
#workskin .detect-user span:nth-child(122):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=7]) *),
#workskin .detect-user span:nth-child(123):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=8]) *),
#workskin .detect-user span:nth-child(124):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=9]) *),
#workskin .detect-user span:nth-child(125):is(*:has(#greeting .user .dropdown:nth-of-type(1) li:nth-child(1) [href$=_]) *) {
  display: inline-block;
} 

 DIVIDE
```#workskin .userstuff .child:nth-of-type(1) {
  background: inherit;
  color: inherit;
}

#workskin .userstuff .child:nth-of-type(2) {
  background: inherit;
  color: inherit;
}

#workskin .userstuff .child:nth-of-type(3) {
  background: inherit;
  color: inherit;
}

#workskin .userstuff .child:nth-of-type(4) {
  background: inherit;
  color: inherit;
}

#workskin .userstuff p:has(.child:nth-of-type(1):hover) {
  background: yellow;
  color: black;
}

#workskin .userstuff p:has(.child:nth-of-type(2):hover) {
  background: green;
  color: inherit;
}

#workskin .userstuff p:has(.child:nth-of-type(3):hover) {
  background: blue;
  color: inherit;
}

#workskin .userstuff p:has(.child:nth-of-type(4):hover) {
  background: purple;
  color: inherit;
}```
plus HTML per paragraph:
```

  Some paragraph's text here.
```
though with colors adjusted for however many paragraphs there are, of course.  It's a bit flashy, though, like maybe-epileptic seizure flash if someone were to mouseover the paragraphs too quickly.

Maybe something a little calmer:
```#workskin .userstuff p::first-letter {
  font-size: 2rem;
  font-family: TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, serif;
  background-color: green;
  color: yellow;
  padding: 3px 5px 2px 5px;
}```

door just... yeets into the void LMAO

<div class="sky">
  <center>

<p>You have had a long journey.</p>

<p>Would you knock on a stranger's door for answers?</p><center>
      <div class="doorcontainer">
        <div class="doorinteriorcontainer">
          <details class="box-opener">
            <summary>
      <div class="box top front"></div>
    </summary>
          </details>
          <details class="go">
            <summary>
              <u>
                <b>Do you seek something?</b>
              </u>
            </summary>
          </details>
          <div class="opened">
            <div class="g1">

<p>Perhaps it's the truth</p></div>
            <div class="g2">

<p>There is no return from this path, only a new understanding.</p></div>
            <div class="g3">

<p>Do you know what you will you sacrifice in order to know what answers lie ahead?</p></div>
            <div class="g4">

<p>You're unaware of the consequences, yet still choose to seek answers.</p></div>
            <div class="g5">

<p>If you truly believe you are ready to learn the answers despite the impact they will have on reality, then step inside.</p></div>
          </div>
        </div>
      </div>
    </center>
  </center>
</div>

css

#workskin details > summary::-webkit-details-marker,
#workskin details > summary::marker {
opacity: 0;
}

#workskin .box {
background: #4E3524;
position: absolute;
text-align: center;
}

#workskin .box.top {
height: 500px;
width: 400px;
transition-duration: 3.5s;
transition-property: transform;
}

#workskin .box-opener[open] .box.top.front {
transform: translateX(-120%);
}

#workskin .box-opener[open] {
transition-property: transform;
transition-duration: 3.5s;
transform: scale(0);
}

do you want random fucked up code? yes you do. heres my random attempt to making a heart in css art. if you put this in it will literally look like hot garbage on ao3 so bad that text is diagonally yeeting off the edge of the universe.

#workskin body {
background: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

#workskin .likability-meter {
position: relative;
width: 160px;
height: 150px;
}

#workskin body {
padding-left: 50px;
}

#workskin div {
position: relative;
width: 100px;
height: 175px;
background-color: green;
-webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
}

#workskin div:before {
position: absolute;
width: 175px;
height: 100px;
left: 0;
bottom: 0;
content: "";
background-color: green;
-webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 0 50px 50px 0;
}

#workskin .value {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
font-size: 55px;
font-weight: bold;
color: white;
font-family: Arial, sans-serif;
background: gray;
z-index: 5;
}

#workskin .antenna {
width: 12px;
height: 70px;
background: #6bc2ff;
border-radius: 6px;
position: absolute;
top: -40px;
z-index: 10;
}

#workskin .antenna.left {
left: 20px;
transform: rotate(-20deg);
}

#workskin .antenna.right {
right: 20px;
transform: rotate(20deg);
}

#workskin .antenna::after {
content: "";
width: 28px;
height: 28px;
background: #ff5eff;
border-radius: 50%;
position: absolute;
top: -18px;
left: -8px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}