Enayy's Author Page

Link to article: Enayy's Author Page.

@import url("https://scp-wiki.wikidot.com/local--files/enayy-s-author-page/Avalanche.css");

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

:root {
    --body-font: "Oswald";
    --title-font: 'Avalanche';
    --black: #000000;
    --blue: #121419;
  /*primary*/
    --yellow: #dba14d;
  /*highlight*/
    --red: #833832;
  /* sec prim */
    --white: #f1f1f1;
    --yellowish: #ebe9d1;

  --sp_rate-module-text-color: var(--black);
  --sp_rate-module-background: var(--yellowish);
  --sp_rate-module-sub-color: var(--black);
  --sp_rate-module-button-hover-color: var(--red);
  --sp_rate-module-button-color: var(--black);
  --sp_rate-module-button-background: transparent;
}


.page-rate-widget-box {
  border-radius: 0;
  margin-bottom: 2rem;
  box-shadow: -0.5rem -0.3rem var(--yellow), 0.5rem 0.3rem var(--red);
}

#header {
    background: none;
}

#top-bar {
    background: none;
    padding-top: 0.5rem;
}

#header {
    grid-template-areas: "margin   top-bar   margin2" "margin   title     margin2";
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 2rem max-content;
    position: relative;
}

#header h1 {
    grid-column: 1/6;
}

#header h1 a {
    font-family: var(--title-font);
    margin: 0 1rem;
}

#header h2 {
    display: none;
}

#top-bar {
    height: 100%;
    width: 100%;
    min-width: 60vw;
        grid-area: top-bar;
}

#top-bar a {
    color: var(--yellow);
}

#header::before {
    display: none;
}

body {
    background-color: var(--blue);
    color: var(--white);
    font-family: var(--body-font);
}

#header h1 {
    height: 100%;
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
}

#header h1 a {
    height: 100%;
    width: 100%;
    display: block;
}

#header h1 a ::after {
    content: "Enayy";
    text-align: center;
    width: 100%;
    display: block;
    font-size: 8rem;
    letter-spacing: 0.5rem;
    text-shadow: 0.8rem 0.5rem 0 var(--red), -0.8rem -0.5rem var(--yellow);
    text-shadow: 0.2rem 0rem 0 var(--red), -0.2rem 0rem var(--yellow);
    color: var(--white);
}

#header h1 a::before {
    display: none;
}

#page-title {
    display: none;
}

#content-wrap {
    padding: 0 2rem;
    box-sizing: border-box;
}

#top-bar div[class*="top-bar"] > ul {
    justify-content: space-around;
}

#extrac-div-1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100vw;
    height: 80rem;
    min-height: 80vw;
    background-image: linear-gradient(-232deg, #1e284a 8%, transparent 8.05%), linear-gradient(-243deg, #131b37 12%, transparent 12.05%), linear-gradient(-253deg, #1e284a 14%, transparent 14.05%), linear-gradient(104deg, #131b37 16%, transparent 16.05%), linear-gradient(-241deg, #1e284a 21%, transparent 21.05%), linear-gradient(135deg, #131b37 27%, transparent 27.05%), linear-gradient(-210deg, #131b37 24%, transparent 24.05%);
    background-repeat: no-repeat;
}

#extrac-div-1::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(-232deg, #1e284a 8%, transparent 8.05%), linear-gradient(-243deg, #131b37 12%, transparent 12.05%), linear-gradient(-253deg, #1e284a 14%, transparent 14.05%), linear-gradient(104deg, #131b37 16%, transparent 16.05%), linear-gradient(-241deg, #1e284a 21%, transparent 21.05%), linear-gradient(135deg, #131b37 27%, transparent 27.05%), linear-gradient(-210deg, #131b37 24%, transparent 24.05%);
    background-repeat: no-repeat;
    transform: rotatey(180deg);
}

#footer {
    background-color: var(--red);
    font-size: 0;
}

#footer > a::before {
    content: "Produced By: ";
    font-size: 0.625rem;
}

#footer > a {
    font-size: 0.67rem;
}

#license-area {
    background-color: var(--red);
    color: var(--white);
}

#license-area a {
    color: var(--yellow);
}

#page-content {
    min-height: 80rem;
}

#top-bar .open-menu a {
    background: none;
    border: none;
}

a {
    color: var(--yellow);
}

a:visited {
    color: var(--red);
}

#main-content {
    max-width: 100rem;
}

#content-wrap {
    max-width: 80rem;
    width: 100%;
}

.article-link-container {
    font-weight: 600;
    height: 4rem;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.article-link-container {
    position: relative;
    line-height: 1;
    width: max-content;
    min-width: 50%;
}

.article-link-container p {
    position: relative;
    z-index: 1;
}

.article-description {
    position: absolute;
    left: 50%;
    bottom: 100%;
    background-color: var(--yellowish);
    color: var(--black);
    padding: 0 1rem;
    box-shadow: 0.8rem 0.5rem 0 var(--red), -0.8rem -0.5rem var(--yellow);
    opacity: 0;
    visibility: hidden;
    transition: 0.1s ease-in 0.3s;
    max-width: 100%;
    transform: translatex(-50%);
}

.article-link-container:has(a:hover) .article-description,
.article-description:hover {
    opacity: 1;
    pointer-events: all;
    transition: 0.1s ease-in 0.05s;
    visibility: visible;
}

.article-description::after {
    content: "";
    background-color: var(--yellowish);
    position: absolute;
    bottom: -0.75rem;
    left: 50%;
    transform: rotate(45deg) translateX(-50%);
    height: 1.5rem;
    width: 1.5rem;
}

.tracklist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#top-bar :is(.mobile-top-bar, .top-bar) > ul > li > a {
    color: var(--yellow);
    font-family: var(--title-font);
    font-size: 1.8rem;
    font-weight: bold;
}

#top-bar :is(.mobile-top-bar, .top-bar) > ul {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

#top-bar :is(.mobile-top-bar, .top-bar) > ul > li {
    flex-grow: 1;
}

#header h1 {
    align-items: center;
    flex-wrap: wrap;
}

#header h1::before,
#header h1::after {
    content: "";
    display: inline;
    flex-grow: 1;
    flex-basis: 1rem;
    background-color: var(--white);
    height: 0.3rem;
    max-width: 20vw;
    margin: 0 1rem;
    box-shadow: 0.1rem 0.1rem 0 var(--red), -0.1rem -0.1rem 0 var(--yellow);
}

#top-bar .open-menu a {
    top: 0.3rem;
    left: 0;
    border-radius: 0;
    color: var(--yellow);
    height: 2rem;
    width: 2rem;
}

#extrac-div-1,
#extrac-div-1::after {
    background-position: left -20rem;
}

:root {
    --sp_top-bar-link-hover-color: var(--white);
    --sp_top-bar-link-hover-background: 0;
}

#top-bar :is(.mobile-top-bar, .top-bar) > ul > li:hover > a {
    text-shadow: 1px 0px 0 var(--red), -1px 0px 0 var(--yellow);
}

#top-bar :is(.mobile-top-bar, .top-bar) > ul > li > ul > li > a {
    text-align: center;
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    background-color: var(--yellowish);
    box-shadow: 0.8rem 0.5rem 0 var(--red), -0.8rem -0.5rem var(--yellow);
    border: none;
    top: calc(100% + 0.5rem);
    transition: 0.1s ease-in 0.3s;
}

#top-bar :is(.top-bar, .mobile-top-bar) ul :is(li:hover ul, li ul:hover) {
    transition: 0.1s ease-in 0.05s;
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 50%;
    height: 1rem;
    width: 1rem;
    transform: translateX(-50%) rotate(45deg);
    background-color: var(--yellowish);
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    background: none;
    color: var(--black);
    border: none;
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a:is(:hover, :active, :focus) {
    color: var(--black);
    text-shadow: 1px 0px 0 var(--red), -1px 0px 0 var(--yellow);
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul::after {
    content: "";
    position: absolute;
    top: -1rem;
    height: 1rem;
    width: 100%;
}

.hovertip {
    background-color: var(--yellowish) !important;
    color: var(--black);
    padding: 0 1rem;
    box-shadow: 0.5rem 0.4rem 0 var(--red), -0.5rem -0.4rem var(--yellow);
    border: none !important;
}

.owindow {
    background-color: var(--yellowish);
    color: var(--black);
    border: 0;
    box-shadow: 1rem 0.8rem var(--red), -1rem -0.8rem var(--yellow);
}

.owindow a {
    color: var(--red);
}

.owindow .title {
    background: none;
}

.owindow .button-bar a {
    background: none;
    border: none;
    background-color: var(--white);
    border: double 7px var(--yellow);
}

.owindow img {
    background: 0 !important;
}

.owindow h1 {
    color: var(--black);
}

#login-status {
    grid-row: 1;
    position: absolute;
    top: 0;
    right: 0;
    width: max-content;
}

#login-status {
    padding-right: 0.5rem;
    color: transparent;
}

#login-status .printuser {
    color: var(--white);
}

#account-options {
    opacity: 1;
}

#login-status > *:not(#account-topbutton) {
    clip-path: inset(0 0 0 100%);
    transition: 0.2s ease-in 0.05s;
    opacity: 0.2;
    pointer-events: none;
}

#login-status:is(:hover, :focus, :has(:hover), :focus-within) > *:not(#account-topbutton) {
    clip-path: inset(0);
    opacity: 1;
    pointer-events: all;
}

#account-options {
    text-align: center;
    border: 0;
    background-color: var(--yellowish);
    margin-right: 4rem;
    width: 7rem;
}

#account-options ul li a {
    color: var(--black);
}

#search-top-box {
    align-items: start;
    justify-content: end;
}

#search-top-box-form input[type="submit"] {
    margin-right: 0.5rem;
    border-radius: 0;
    background: var(--yellowish);
    color: var(--black);
    border: 0;
    transition: 0.2s ease-in 0.05s;
    clip-path: inset(0 0 0 100%);
    opacity: 0.2;
}

#search-top-box-form input[type="submit"]:is(:hover, :active, :focus) {
    text-shadow: none;
    color: var(--black);
    background: var(--yellowish);
    border: 0;
    box-shadow: 0.3rem 0.2rem var(--red), -0.3rem -0.2rem var(--yellow);
}

#login-status #account-topbutton {
    background-color: var(--yellowish);
    color: var(--black);
    border: 0;
    transition: 0.2s ease-in 0.05s;
}

#account-topbutton:is(:hover, :focus, :active),
#login-status:hover #account-topbutton {
    box-shadow: 0.3rem 0.2rem var(--red), -0.3rem -0.2rem var(--yellow);
}

#header:has(#login-status:is(:hover, :focus-within)) #search-top-box-form input[type="submit"],
#search-top-box-form input[type="submit"]:is(:hover, :active, :focus) {
    clip-path: inset(0);
    opacity: 1;
}

.audio-player {
    min-width: 50%;
    height: 4rem;
}

.audio-player iframe {
    height: 100% !important;
    width: 100%;
}

.mobile-aim {
    display: none;
}

h1,
h2,
h3 {
    color: var(--white);
    display: flex;
    font-size: 3rem;
    font-family: var(--header-font);
    font-weight: bold;
    text-shadow: 0.2rem 0rem 0 var(--red), -0.2rem 0rem var(--yellow);
    align-items: center;
    justify-content: center;
}

:is(h1, h2, h3)::before,
:is(h1, h2, h3)::after {
    content: "";
    flex-grow: 1;
    height: 0.2rem;
    background-color: var(--white);
    margin: 0.8rem;
    max-width: 40vw;
}

h1::after,
h2::before {
    display: none;
}

#side-bar {
    background-color: var(--blue);
}

:is(#side-bar#side-bar, #interwiki) .side-block {
    background: var(--yellowish);
    border-radius: 0;
    border: 0;
    box-shadow: 0.5rem 0.3rem var(--red), -0.5rem -0.3rem var(--yellow);
    color: transparent;
}

:is(#side-bar#side-bar, #interwiki) a {
    color: var(--red);
}

:is(#side-bar#side-bar, #interwiki) .heading {
    color: var(--red);
    border-color: var(--red);
}

#content-wrap {
    margin: 0.4rem auto 0;
}

.intro, .licensebox blockquote {
    margin: auto;
    width: 80%;
    background-color: var(--yellowish);
    color: var(--black);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    box-shadow: 1rem 0.8rem var(--red), -1rem -0.8rem var(--yellow);
    text-align: center;
        border: 0;
}

.licensebox blockquote  {
    margin-bottom: 1.5rem;
    }

.intro a {
    color: var(--red);
}

#login-status {
    grid-area: margin2;
}

#search-top-box {
    grid-row: 2;
    grid-column: 3;
}

.quotes,
.coming-soon {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0 10%;
}

.row2 {
    grid-column: 2;
}

.quote,
.upcoming {
    width: 80%;
    align-self: center;
    justify-self: center;
    text-align: center;
    background-color: var(--yellowish);
    color: var(--black);
    margin-bottom: 1.2rem;
    box-shadow: 0.8rem 0.5rem var(--red), -0.8rem -0.5rem var(--yellow);
}

.quote a {
    color: var(--red);
}

#page-options-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}

@media (max-width: 1070px) {
    #header h1 a span::after {
    	font-size: 6rem;
    }

    #extrac-div-1,
  #extrac-div-1::after {
    	background-position: left -9rem;
    }

    #extrac-div-1 {
    	background: none;
    }

    #header h1::before {
    	display: none;
    }

    #header h1::after {
    	max-width: 40vw;
    	margin-right: 1rem;
    }

    h1::after,
  h2::before {
    	display: block;
    }

    h2::after,
  h1::before {
    	display: none;
    }

        #top-bar :is(.mobile-top-bar, .top-bar) > ul > li > a {
            font-size: 1.2rem;
            }
}

@media (max-width: 767px) {
    .mobile-aim {
    	display: flex;
    }

    .desktop-aim {
    	display: none;
    }

    .quotes,
  .coming-soon {
    	grid-template-columns: 100%;
    }

    .row2,
  .upcoming {
    	grid-column: 1;
    }
    #login-status, #search-top-box {
  transform: translate(0, 1.9rem);
}

#account-topbutton {
  transform: translate(0, -1.9rem);
  display: inline-block;
}

#login-status :is(.printuser, #my-account) {
  transform: translate(1.5rem, 0);
}

#my-account {
  padding-left: 1rem;
  margin-right: -1.5rem;
}
}

```
margin-top: 2rem;
```
```
font-size: 1.2rem
```
```
margin: 4rem auto;
```

```
intro
```
```
container
```
```
tracklist
```
```
article-link-container
```
```
article-description
```
```
article-link-container
```
```
mobile-aim
```
```
article-description
```
```
article-link-container
```
```
desktop-aim
```
```
article-description
```
```
article-link-container
```
```
article-description
```
```
article-link-container
```
```
mobile-aim
```
```
article-description
```
```
article-link-container
```
```
desktop-aim
```
```
article-description
```
```
quotes
```
```
quote
```
```
quote
```
```
row2
```
```
quote
```
```
quote
```
```
row2
```
```
quote
```
```
quote
```
```
row2
```
```
quote
```
```
quote
```
```
row2
```
```
quote
```
```
coming-soon
```
```
upcoming
```
```
upcoming
```
```
row2
```
```
intro
```
```
intro
```

[[include :scp-wiki:component:sigma-plus]]
[[include :scp-wiki:component:toggle-sidebar]]

=====
[[include component:preview
text="Now, this looks like a job for me! So, everybody, just follow me!" - Me, to you, just now.]]
=====

[[=]]
[[module rate]]
[[/=]]

[[div class="intro"]]
Hi! I'm Enay. I'm a musician who wandered onto a writing site, and enjoyed it enough to stay.

Most of my works are serious or heavy, but I am much less so.

Since we've met now, you can find me on the Site-19 Discord! I'm Enay there, too.
[[/div]]

++ TrackList

[[div_ class="container"]]
[[div class="tracklist"]]
[[div class="article-link-container"]]
[[div class="article-description"]]
10.4K Words | 35min read
[[/div]]
01. [[[SCP-8760 |SCP-8760]]]: A psychological-horror centered around abuse, relapse, and recovery.
[[/div]]

[[include fragment:enayy-s-author-page |src=https://scp-wiki.wikidot.com/local--files/enayy-s-author-page/Remnants%20-%20Author%20Page%20Version.mp3]]

[[div class="article-link-container mobile-aim"]]
[[div class="article-description"]]
6.5K Words | 22min read
[[/div]]
02. [[[SCP-8940 |SCP-8940]]]: A character-driven piece about the therapeutic effects of music.
[[/div]]

[[include fragment:enayy-s-author-page |src=https://scp-wiki.wikidot.com/local--files/enayy-s-author-page/Forgiveness%20-%20Author%20Page%20Version.mp3]]

[[div class="article-link-container desktop-aim"]]
[[div class="article-description"]]
6.5K Words | 22min read
[[/div]]
02. [[[SCP-8940 |SCP-8940]]]: A character-driven piece about the therapeutic effects of music.
[[/div]]
[[div class="article-link-container"]]
[[div class="article-description"]]
3.7K Words | 15min read
[[/div]]
03. [[[SCP-8716 |SCP-8716]]]: A bittersweet multimedia piece about mystery and suicide.
[[/div]]

[[include fragment:enayy-s-author-page |src=https://scp-wiki.wikidot.com/local--files/enayy-s-author-page/Michael%27s%20Piece%20-%20Author%20Page%20Version.mp3]]


[[div class="article-link-container mobile-aim"]]
[[div class="article-description"]]
A slow burn MLM romance focused on what we can't, or shouldn't, do with our lives.
[[/div]]
04. [[[SCP-9690 |SCP-9690]]] 8K Words | 35min read
[[/div]]

[[include fragment:enayy-s-author-page |src=http://scp-wiki.wikidot.com/local--files/enayy-s-author-page/Kyrie%27s%20Performance%20-%20Teaser.mp3]]

[[div class="article-link-container desktop-aim"]]
[[div class="article-description"]]
8K Words | 35min read
[[/div]]
04. [[[SCP-9690 |SCP-9690]]] A slow burn MLM romance focused on what we can't, or shouldn't, do with our lives.
[[/div]]

[[/div]]
[[/div]]

+ Produced By

[[div class="quotes"]]
[[div class="quote"]]
White bot.
- [[*user awhiteboy]]
[[/div]]

[[div class="quote row2"]]
Drink your milk.
- [[*user AstralNavigator]]
[[/div]]

[[div class="quote"]]
Enay's voice is deeply upsetting, he shouldn't sound like that.
- [[*user cptsquid]]
[[/div]]

[[div class="quote row2"]]
His jambalaya will make you break furniture.
- [[*user dr_angell]]
[[/div]]

[[div class="quote"]]
British and a twink -- what more could you ask for?
- [[*user haydensaintpascal]]
[[/div]]

[[div class="quote row2"]]
 I love how Enay's stories explore wild, fantastical concepts, like having free access to high-quality mental healthcare.
- [[*user Jezixo]]
[[/div]]

[[div class="quote"]]
Enay's favourite foods are kangaroo jerky and camel burgers. Feed him some for free music and upvotes.
- [[*user Sinking_Otter]]
[[/div]]

[[div class="quote row2"]]
Enay makes fun of my voice despite the fact I'm the most masculine person on the planet.
- [[*user softseal]]
[[/div]]

[[div class="quote"]]
Tip your landlord!
- [[*user choccoMan]]
[[/div]]
[[/div]]

+++ Coming Soon

[[div class="coming-soon"]]
[[div class="upcoming"]]
[[[https://scp-sandbox-3.wikidot.com/enayy-dance-with-the-devil |Dance with the Devil]]] A procedural crime drama following an undercover agent, who is forced to make a choice between doing what he believes is right, and what's objectively correct.
[[/div]]

[[div class="upcoming row2"]]
[[[https://scp-sandbox-3.wikidot.com/hayden:enay |Sandbox Link]]] description here
[[/div]]
[[/div]]

[[div class="intro" style="margin-top: 2rem;"]]
[[span style="font-size: 1.2rem"]]Other stuff thats #coming soon[[/span]]
**Internal Affairs - Investigations**
**Internal Affairs - A Fine Line**
**Internal Affairs - Relapse**
[[/div]]

[[div class="intro" style="margin: 4rem auto;"]]
[[/div]]



[[include :scp-wiki:component:license-box]]
> **Filename:**  @@--icon@@
> **Name:** pause/play icon
> **Author:** heroicons
> **License:** MIT
> **Source Link:** https://heroicons.com

> **Filename:**  Avalanche.css
> **Name:** Avalanch
> **Author:** Jason Reed
> **License:** OFL
> **Source Link:** https://fontesk.com/avalanche-font/

> **Filename:** Forgiveness - Author Page Version.mp3
> **Name:** Forgiveness - Author Page Version
> **Author:** [[*user Enayy]]
> **License:** CC BY SA 3.0
> **Source Link:** http://scp-wiki.wikidot.com/local--files/enayy-s-author-page/Forgiveness%20-%20Author%20Page%20Version.mp3

> **Filename:** Michael's Piece - Author Page Version.mp3
> **Name:** Michael's Piece - Author Page Version
> **Author:** [[*user Enayy]]
> **License:** CC BY SA 3.0
> **Source Link:** http://scp-wiki.wikidot.com/local--files/enayy-s-author-page/Michael%27s%20Piece%20-%20Author%20Page%20Version.mp3

> **Filename:** Remnants - Author Page Version.mp3
> **Name:** Remnants - Author Page Version
> **Author:** [[*user Enayy]]
> **License:** CC BY SA 3.0
> **Source Link:** http://scp-wiki.wikidot.com/local--files/enayy-s-author-page/Remnants%20-%20Author%20Page%20Version.mp3

[[include :scp-wiki:component:license-box-end]]


@@ @@

[[module css]]
@import url("https://scp-wiki.wikidot.com/local--files/enayy-s-author-page/Avalanche.css");

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

:root {
    --body-font: "Oswald";
    --title-font: 'Avalanche';
    --black: #000000;
    --blue: #121419;
  /*primary*/
    --yellow: #dba14d;
  /*highlight*/
    --red: #833832;
  /* sec prim */
    --white: #f1f1f1;
    --yellowish: #ebe9d1;

  --sp_rate-module-text-color: var(--black);
  --sp_rate-module-background: var(--yellowish);
  --sp_rate-module-sub-color: var(--black);
  --sp_rate-module-button-hover-color: var(--red);
  --sp_rate-module-button-color: var(--black);
  --sp_rate-module-button-background: transparent;
}


.page-rate-widget-box {
  border-radius: 0;
  margin-bottom: 2rem;
  box-shadow: -0.5rem -0.3rem var(--yellow), 0.5rem 0.3rem var(--red);
}

#header {
    background: none;
}

#top-bar {
    background: none;
    padding-top: 0.5rem;
}

#header {
    grid-template-areas: "margin   top-bar   margin2" "margin   title     margin2";
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 2rem max-content;
    position: relative;
}

#header h1 {
    grid-column: 1/6;
}

#header h1 a {
    font-family: var(--title-font);
    margin: 0 1rem;
}

#header h2 {
    display: none;
}

#top-bar {
    height: 100%;
    width: 100%;
    min-width: 60vw;
        grid-area: top-bar;
}

#top-bar a {
    color: var(--yellow);
}

#header::before {
    display: none;
}

body {
    background-color: var(--blue);
    color: var(--white);
    font-family: var(--body-font);
}

#header h1 {
    height: 100%;
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
}

#header h1 a {
    height: 100%;
    width: 100%;
    display: block;
}

#header h1 a ::after {
    content: "Enayy";
    text-align: center;
    width: 100%;
    display: block;
    font-size: 8rem;
    letter-spacing: 0.5rem;
    text-shadow: 0.8rem 0.5rem 0 var(--red), -0.8rem -0.5rem var(--yellow);
    text-shadow: 0.2rem 0rem 0 var(--red), -0.2rem 0rem var(--yellow);
    color: var(--white);
}

#header h1 a::before {
    display: none;
}

#page-title {
    display: none;
}

#content-wrap {
    padding: 0 2rem;
    box-sizing: border-box;
}

#top-bar div[class*="top-bar"] > ul {
    justify-content: space-around;
}

#extrac-div-1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100vw;
    height: 80rem;
    min-height: 80vw;
    background-image: linear-gradient(-232deg, #1e284a 8%, transparent 8.05%), linear-gradient(-243deg, #131b37 12%, transparent 12.05%), linear-gradient(-253deg, #1e284a 14%, transparent 14.05%), linear-gradient(104deg, #131b37 16%, transparent 16.05%), linear-gradient(-241deg, #1e284a 21%, transparent 21.05%), linear-gradient(135deg, #131b37 27%, transparent 27.05%), linear-gradient(-210deg, #131b37 24%, transparent 24.05%);
    background-repeat: no-repeat;
}

#extrac-div-1::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(-232deg, #1e284a 8%, transparent 8.05%), linear-gradient(-243deg, #131b37 12%, transparent 12.05%), linear-gradient(-253deg, #1e284a 14%, transparent 14.05%), linear-gradient(104deg, #131b37 16%, transparent 16.05%), linear-gradient(-241deg, #1e284a 21%, transparent 21.05%), linear-gradient(135deg, #131b37 27%, transparent 27.05%), linear-gradient(-210deg, #131b37 24%, transparent 24.05%);
    background-repeat: no-repeat;
    transform: rotatey(180deg);
}

#footer {
    background-color: var(--red);
    font-size: 0;
}

#footer > a::before {
    content: "Produced By: ";
    font-size: 0.625rem;
}

#footer > a {
    font-size: 0.67rem;
}

#license-area {
    background-color: var(--red);
    color: var(--white);
}

#license-area a {
    color: var(--yellow);
}

#page-content {
    min-height: 80rem;
}

#top-bar .open-menu a {
    background: none;
    border: none;
}

a {
    color: var(--yellow);
}

a:visited {
    color: var(--red);
}

#main-content {
    max-width: 100rem;
}

#content-wrap {
    max-width: 80rem;
    width: 100%;
}

.article-link-container {
    font-weight: 600;
    height: 4rem;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.article-link-container {
    position: relative;
    line-height: 1;
    width: max-content;
    min-width: 50%;
}

.article-link-container p {
    position: relative;
    z-index: 1;
}

.article-description {
    position: absolute;
    left: 50%;
    bottom: 100%;
    background-color: var(--yellowish);
    color: var(--black);
    padding: 0 1rem;
    box-shadow: 0.8rem 0.5rem 0 var(--red), -0.8rem -0.5rem var(--yellow);
    opacity: 0;
    visibility: hidden;
    transition: 0.1s ease-in 0.3s;
    max-width: 100%;
    transform: translatex(-50%);
}

.article-link-container:has(a:hover) .article-description,
.article-description:hover {
    opacity: 1;
    pointer-events: all;
    transition: 0.1s ease-in 0.05s;
    visibility: visible;
}

.article-description::after {
    content: "";
    background-color: var(--yellowish);
    position: absolute;
    bottom: -0.75rem;
    left: 50%;
    transform: rotate(45deg) translateX(-50%);
    height: 1.5rem;
    width: 1.5rem;
}

.tracklist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#top-bar :is(.mobile-top-bar, .top-bar) > ul > li > a {
    color: var(--yellow);
    font-family: var(--title-font);
    font-size: 1.8rem;
    font-weight: bold;
}

#top-bar :is(.mobile-top-bar, .top-bar) > ul {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

#top-bar :is(.mobile-top-bar, .top-bar) > ul > li {
    flex-grow: 1;
}

#header h1 {
    align-items: center;
    flex-wrap: wrap;
}

#header h1::before,
#header h1::after {
    content: "";
    display: inline;
    flex-grow: 1;
    flex-basis: 1rem;
    background-color: var(--white);
    height: 0.3rem;
    max-width: 20vw;
    margin: 0 1rem;
    box-shadow: 0.1rem 0.1rem 0 var(--red), -0.1rem -0.1rem 0 var(--yellow);
}

#top-bar .open-menu a {
    top: 0.3rem;
    left: 0;
    border-radius: 0;
    color: var(--yellow);
    height: 2rem;
    width: 2rem;
}

#extrac-div-1,
#extrac-div-1::after {
    background-position: left -20rem;
}

:root {
    --sp_top-bar-link-hover-color: var(--white);
    --sp_top-bar-link-hover-background: 0;
}

#top-bar :is(.mobile-top-bar, .top-bar) > ul > li:hover > a {
    text-shadow: 1px 0px 0 var(--red), -1px 0px 0 var(--yellow);
}

#top-bar :is(.mobile-top-bar, .top-bar) > ul > li > ul > li > a {
    text-align: center;
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    background-color: var(--yellowish);
    box-shadow: 0.8rem 0.5rem 0 var(--red), -0.8rem -0.5rem var(--yellow);
    border: none;
    top: calc(100% + 0.5rem);
    transition: 0.1s ease-in 0.3s;
}

#top-bar :is(.top-bar, .mobile-top-bar) ul :is(li:hover ul, li ul:hover) {
    transition: 0.1s ease-in 0.05s;
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 50%;
    height: 1rem;
    width: 1rem;
    transform: translateX(-50%) rotate(45deg);
    background-color: var(--yellowish);
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    background: none;
    color: var(--black);
    border: none;
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a:is(:hover, :active, :focus) {
    color: var(--black);
    text-shadow: 1px 0px 0 var(--red), -1px 0px 0 var(--yellow);
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul::after {
    content: "";
    position: absolute;
    top: -1rem;
    height: 1rem;
    width: 100%;
}

.hovertip {
    background-color: var(--yellowish) !important;
    color: var(--black);
    padding: 0 1rem;
    box-shadow: 0.5rem 0.4rem 0 var(--red), -0.5rem -0.4rem var(--yellow);
    border: none !important;
}

.owindow {
    background-color: var(--yellowish);
    color: var(--black);
    border: 0;
    box-shadow: 1rem 0.8rem var(--red), -1rem -0.8rem var(--yellow);
}

.owindow a {
    color: var(--red);
}

.owindow .title {
    background: none;
}

.owindow .button-bar a {
    background: none;
    border: none;
    background-color: var(--white);
    border: double 7px var(--yellow);
}

.owindow img {
    background: 0 !important;
}

.owindow h1 {
    color: var(--black);
}

#login-status {
    grid-row: 1;
    position: absolute;
    top: 0;
    right: 0;
    width: max-content;
}

#login-status {
    padding-right: 0.5rem;
    color: transparent;
}

#login-status .printuser {
    color: var(--white);
}

#account-options {
    opacity: 1;
}

#login-status > *:not(#account-topbutton) {
    clip-path: inset(0 0 0 100%);
    transition: 0.2s ease-in 0.05s;
    opacity: 0.2;
    pointer-events: none;
}

#login-status:is(:hover, :focus, :has(:hover), :focus-within) > *:not(#account-topbutton) {
    clip-path: inset(0);
    opacity: 1;
    pointer-events: all;
}

#account-options {
    text-align: center;
    border: 0;
    background-color: var(--yellowish);
    margin-right: 4rem;
    width: 7rem;
}

#account-options ul li a {
    color: var(--black);
}

#search-top-box {
    align-items: start;
    justify-content: end;
}

#search-top-box-form input[type="submit"] {
    margin-right: 0.5rem;
    border-radius: 0;
    background: var(--yellowish);
    color: var(--black);
    border: 0;
    transition: 0.2s ease-in 0.05s;
    clip-path: inset(0 0 0 100%);
    opacity: 0.2;
}

#search-top-box-form input[type="submit"]:is(:hover, :active, :focus) {
    text-shadow: none;
    color: var(--black);
    background: var(--yellowish);
    border: 0;
    box-shadow: 0.3rem 0.2rem var(--red), -0.3rem -0.2rem var(--yellow);
}

#login-status #account-topbutton {
    background-color: var(--yellowish);
    color: var(--black);
    border: 0;
    transition: 0.2s ease-in 0.05s;
}

#account-topbutton:is(:hover, :focus, :active),
#login-status:hover #account-topbutton {
    box-shadow: 0.3rem 0.2rem var(--red), -0.3rem -0.2rem var(--yellow);
}

#header:has(#login-status:is(:hover, :focus-within)) #search-top-box-form input[type="submit"],
#search-top-box-form input[type="submit"]:is(:hover, :active, :focus) {
    clip-path: inset(0);
    opacity: 1;
}

.audio-player {
    min-width: 50%;
    height: 4rem;
}

.audio-player iframe {
    height: 100% !important;
    width: 100%;
}

.mobile-aim {
    display: none;
}

h1,
h2,
h3 {
    color: var(--white);
    display: flex;
    font-size: 3rem;
    font-family: var(--header-font);
    font-weight: bold;
    text-shadow: 0.2rem 0rem 0 var(--red), -0.2rem 0rem var(--yellow);
    align-items: center;
    justify-content: center;
}

:is(h1, h2, h3)::before,
:is(h1, h2, h3)::after {
    content: "";
    flex-grow: 1;
    height: 0.2rem;
    background-color: var(--white);
    margin: 0.8rem;
    max-width: 40vw;
}

h1::after,
h2::before {
    display: none;
}

#side-bar {
    background-color: var(--blue);
}

:is(#side-bar#side-bar, #interwiki) .side-block {
    background: var(--yellowish);
    border-radius: 0;
    border: 0;
    box-shadow: 0.5rem 0.3rem var(--red), -0.5rem -0.3rem var(--yellow);
    color: transparent;
}

:is(#side-bar#side-bar, #interwiki) a {
    color: var(--red);
}

:is(#side-bar#side-bar, #interwiki) .heading {
    color: var(--red);
    border-color: var(--red);
}

#content-wrap {
    margin: 0.4rem auto 0;
}

.intro, .licensebox blockquote {
    margin: auto;
    width: 80%;
    background-color: var(--yellowish);
    color: var(--black);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    box-shadow: 1rem 0.8rem var(--red), -1rem -0.8rem var(--yellow);
    text-align: center;
        border: 0;
}

.licensebox blockquote  {
    margin-bottom: 1.5rem;
    }

.intro a {
    color: var(--red);
}

#login-status {
    grid-area: margin2;
}

#search-top-box {
    grid-row: 2;
    grid-column: 3;
}

.quotes,
.coming-soon {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0 10%;
}

.row2 {
    grid-column: 2;
}

.quote,
.upcoming {
    width: 80%;
    align-self: center;
    justify-self: center;
    text-align: center;
    background-color: var(--yellowish);
    color: var(--black);
    margin-bottom: 1.2rem;
    box-shadow: 0.8rem 0.5rem var(--red), -0.8rem -0.5rem var(--yellow);
}

.quote a {
    color: var(--red);
}

#page-options-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}

@media (max-width: 1070px) {
    #header h1 a span::after {
    	font-size: 6rem;
    }

    #extrac-div-1,
  #extrac-div-1::after {
    	background-position: left -9rem;
    }

    #extrac-div-1 {
    	background: none;
    }

    #header h1::before {
    	display: none;
    }

    #header h1::after {
    	max-width: 40vw;
    	margin-right: 1rem;
    }

    h1::after,
  h2::before {
    	display: block;
    }

    h2::after,
  h1::before {
    	display: none;
    }

        #top-bar :is(.mobile-top-bar, .top-bar) > ul > li > a {
            font-size: 1.2rem;
            }
}

@media (max-width: 767px) {
    .mobile-aim {
    	display: flex;
    }

    .desktop-aim {
    	display: none;
    }

    .quotes,
  .coming-soon {
    	grid-template-columns: 100%;
    }

    .row2,
  .upcoming {
    	grid-column: 1;
    }
    #login-status, #search-top-box {
  transform: translate(0, 1.9rem);
}

#account-topbutton {
  transform: translate(0, -1.9rem);
  display: inline-block;
}

#login-status :is(.printuser, #my-account) {
  transform: translate(1.5rem, 0);
}

#my-account {
  padding-left: 1rem;
  margin-right: -1.5rem;
}
}
[[/module]]

Enayy's Author Page

Module Styles

Inline Styles

Includes

CSS Classes

Page Source