@font-face{
        font-family: 'Fluoxetine';
        src: url("http://moonset.online/Fluox___.ttf");
    }
@media (prefers-reduced-motion) {
:root { animation: none; }
}
*{
box-sizing: border-box;
scrollbar-width: thin;/* Works on Firefox */
scrollbar-color: #B6B1E0 #000000;
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar{
width: 12px;
}
*::-webkit-scrollbar-track{
background: #000000;
}
*::-webkit-scrollbar-thumb{
background-color: #B6B1E0;
border-radius: 20px;
border: 3px none #000000;
}

body{
background-color: #201D26;
color: white;
font-family: 'SpectralRegular';
font-size: 1.25rem;
margin: 0px;
}

.light-mode{
  background-color: #F8F8FF;
  color: black;
}

::selection{
color: #faf4eb;
background: #DAA0FF;
}

.all{
padding-top: 20px;
width: 90%;
margin: 0 auto;
display: grid;
grid-template-areas:
  "header header"
  "body body";
justify-content: center;
justify-items: right;
align-items: end;
}


/* nav */

#primary-nav ul {
    padding: 0;
    font-size: 1.2em;
    list-style: none !important;
    justify-content: space-evenly;
    font-family: var(--header-font);
}

#primary-nav a:hover {
    text-decoration: underline;
    font-style: normal;
}

#primary-nav a {
    text-decoration: none;
}

#primary-nav ul li {
    margin-bottom: 0;
}

#primary-nav ul li>a {
    padding: 10px;
}

header #primary-nav {
    margin-bottom: 0;
}

header #primary-nav ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

header #primary-nav ul li:first-child>a {
    padding-left: 0;
}

header #primary-nav ul li:last-child>a {
    padding-right: 0;}


/* links */
a {
    text-decoration: underline;
}

a,
a:visited {
    color: var(--link-color);
}

a:hover,
a:focus {
    color: var(--link-color-hover);
    text-decoration: none;
}

a.redlink {
    text-decoration: none;
    font-style: italic;
    color: var(--redlink);
}
a:active {
  text-decoration:none;
  font-style: italic;
  color: var(--link-color-active);}
a.redlink:hover {
    text-decoration: none !important;
    font-style: italic !important;
    
}




.optionstext{
  color:#8AC7C6}
  .light-mode .optionstext{
    color:#007A76}
.main{
grid-area: body;
width: 1000px;
display: grid;
place-items: center;
background-color: black;
background-size: 100%;
background-repeat: repeat-y;
background-position: top;
box-shadow: 0 0 0 5px black,
0 0 0 20px rgba(48, 33, 115, .53),
0 0 0 22px black,
0px 0px 40px 10px black;
border: 2px solid black;
cursor: url('https://www.rw-designer.com/cursor-view/117281.png'), auto
}

.light-mode .main{
background-color: white;
color:black;
box-shadow: 0 0 0 5px white,
0 0 0 20px rgba(48, 33, 115, .53),
0px 0px 40px 10px white;
border: 2px solid white;}

/* MOBILE LAYOUT */
@media only screen and (max-width: 900px){
  .main{
  width: 100%;
  box-shadow: 0 0 0 2px #375e7b,
  0 0 0 17px #f2b923,
  0 0 0 19px #201403,
  0px 0px 37px 7px black;
  border: 1px solid #201403;
  margin-left: auto;
  margin-right: auto;
}
  .cont{
  max-width:100%;
}
  .title{
  display: block;
  padding: 0px;
  font-size: 40px;
}
  .title::first-letter{
  font-size: 55px;
}
  .wide{
  max-width: 95%;
}
  .navlinks{
  font-size: 1rem !important;
}
}

/* FOOTER */

footer div{
  text-align: center;
  margin-top: 25px;}
footer p, footer a{
  color: #faf4eb;
  font-size: 12px;
}

.wide{
margin: 20px 0px 0px 0px;
padding: 2px;
border: 2px solid #342f2c;
width: 750px;
height: 250px;
object-fit: cover;
}

h1{
  color:#C7A5FF;
text-align: center;
font-size: 40px;
font-family: 'Fondamento'!important;
letter-spacing: 2.5px;
font-weight: normal;
}
.light-mode h1{color:#663399;}
.authorname{ color:#C7A5FF;
font-size: 13px;
font-family: 'Atkinson Hyperlegible', sans-serif!important;
font-weight: bold;
text-align: center;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.light-mode .authorname{color:#663399;}
h3{
color: #58180d;
font-size: 20px;
font-family: 'Fondamento'!important;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2.5px;
text-align: center;
}

h4{
color: #8AC7C6;
font-size: 18px;
letter-spacing: 2.5px;
text-align: center;
}
.light-mode h4{
  color:#8F00F1}
.subtitle{
  color:#8AC7C6;
font-size: 13px;
font-family: 'Atkinson Hyperlegible', sans-serif!important;
font-weight: bold;
text-align: center;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.light-mode .subtitle{
  color:#8f00f1;}
.subgreyed{
color: rgb(138, 138, 138);
font-style: italic;
font-size: 13px;
font-family: 'Atkinson Hyperlegible', sans-serif!important;
text-align: center;
letter-spacing: 2.5px;
text-transform: uppercase;
padding-bottom: 0;
margin-bottom: 0;
}

a{
color: #8AC7C6;
text-decoration: none;
}
a:focus{
outline: 3px solid #375e7b;
}
.light-mode a
{color:#8f00f1;}
.link{
color: #375e7b;
text-decoration: underline;
}
.link:hover{
color: #9f5839;
text-decoration: none;
transition: .3s;
}

.special{
color: #faf4eb;
letter-spacing: 2.5px;
background-color:#375e7b;
box-shadow: 3px 3px #000000;
padding: 5px;
margin-top: 2px;
margin-bottom: 20px;
}
.special:hover{
text-decoration: none;
background-color:#000000;
box-shadow: 4px 4px #375e7b;
}

ul{
padding-left: 15px;
}
li{
margin-bottom: 15px;
padding-left: 5px;
}
ul li::marker{
content: '\01F7CE';
}

blockquote{
padding: 5px;
background: #f2b923;
}
blockquote p::before{
content: '\201C';
color: #8AC7C6;
font-size: 50px;
line-height: 0;
}
.light-mode blockquote p:before{
  color:#8f00f1;}
hr{
color: #8AC7C6;
width: 50%;
text-align: center;
}
.light-mode hr{
  color:#8f00f1;}
.hrsmall{
color: #8AC7C6 ;
width: 10%;
text-align: center;
}
.light-mode hrsmall{
  color:#8f00f1;}
.hr{
border: 0px;
height: 60px;
max-width: 150px;
background-image: url(/_imgs/divider.png);
background-size: contain;
background-repeat: no-repeat;
}

p{
font-weight: 400;
}

mark{
color: #f2b923;
background: #342f2c;
padding: 0 3px 0 3px;
}

.buttons{
  max-height: 31px;
  max-width: 88px;
}

.center{
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>

/* DETAILS AND SUMMARY */
summary::-webkit-details-marker{
display: none;
}
details.normal[open] >summary{
text-decoration: underline;
font-weight: bold;
margin: 0 0px 1rem;
box-shadow: 0px 0px 5px white;
}
.normal summary{
list-style: none;
padding: 1rem 0;
color: #8AC7C6;
text-decoration: none;
background: #f2b923;
}
.normal summary:hover{
text-decoration: underline;
font-weight: bold;
cursor: pointer;
}

details.normal{
margin: 1rem auto .4rem;
width: 100%;
outline: 2px solid #201403;
outline-offset: 3px;
}
details.normal[open]{
padding: .4rem 0;
}

.simple summary:after{
font-size: 1em;
content: "+";
float: left;
text-align: center;
margin-right: .25rem;
width: 30px;
}
details.simple[open] > summary:after{
content: "-";
}
details.simple{
border: 1px solid #201403;
border-radius: 4px;
color: #8AC7C6;
text-align: left;
padding: 15px;
cursor: pointer;
}
summary.simple{
list-style: none;
color: #8AC7C6;
text-align: center;
font-weight: 700;
}
details.simple[open] > summary{
list-style: none;
}
details.simple[open]:hover > summary, summary:hover{
color: #8AC7C6;
cursor: pointer;
}

.centerbox{
display: block;
margin-left: auto;
margin-right: auto;
width: 90%;
border: 1px solid #201403;
overflow: auto;
}

.corner{
position: fixed;
bottom: 0px;
right: 0px;
z-index: 10;
cursor: pointer;
transition: all .25s ease-in-out;
}
.corner:hover{
bottom: 20px;
filter: drop-shadow(1px 3px 5px black);
}
.corner:focus{
outline: 2px solid #375e7b;
}

/* STORY PARAGRAPHS */
p.big-letter::first-letter{
  font-size: 4em;
  font-family: 'heavy_rainregular'!important;
  text-transform: uppercase;
  padding-right: 3px;
  float: left;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
p.paragraph{
  text-indent: 25px;
}
.comments{
  color: #342f2c;
  background-color: #f2b923;
  box-shadow: 0px 0px 5px black;
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  margin: 15px 5px;
}

/* TOOLTIPS */
dfn{
  border-bottom: solid 2px rgba(255,255,255,0.8);
  cursor: help;
  font-style: normal;
  position: relative;
}
dfn::after{
  content: attr(data-info);
  display: inline;
  width: 230px;
  padding: 0.5em 0.8em;
  background: black;
  color: white;
  pointer-events: none; /* This prevents the box from apearing when hovered */
  transition: opacity 250ms, top 250ms;
  position: absolute;
  top: 22px;
  left: -210px;
  opacity: 0;
  box-shadow: 0px 5px 15px 3px black;
}
dfn::before{
  content: '';
  display: block;
  position: absolute;
  top: 12px;
  left: 20px;
  opacity: 0;
  width: 0;
  height: 0;
  border: solid transparent 10px;
  border-bottom-color: #23170b;
  transition: opacity 250ms, top 250ms;
}
dfn:hover{z-index: 4;} /* Keeps the info boxes on top */
dfn:hover::after,
dfn:hover::before{opacity: 1;}
dfn:hover::after{top: 39px;}
dfn:hover::before{top: 19px;}

.supnote{
  visibility: hidden;
  height: 0;
  font-size: 0;
}

/* MOBILE TOOLTIPS */
@media only screen and (max-width: 900px){
  dfn{
    cursor: auto;
    border-bottom: none;
    font-style: normal;
    position: relative;
  }
  dfn:hover::after,
  dfn:hover::before{
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .supnote{
  visibility: visible;
  height: auto;
  font-size: initial;
  }
}

.options{
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}
/* FONT PICKER */
select{
color: #8AC7C6;
background-color: rgba(48, 33, 115, .53);
border: 2px solid #23170b;
cursor: url('https://www.rw-designer.com/cursor-view/117281.png'), auto;
border-radius: 10px;
padding: 3px;
width: min-content;
}
.light-mode select{color:gold}
select:hover{
background-color: rgba(48, 33, 115, .53);
color: #8AC7C6;
cursor: url('https://www.rw-designer.com/cursor-view/117281.png'), auto;
border: 2px solid #23170b;
border-radius: 10px;
}
select:focus{
  color: gold;
  cursor: url('https://www.rw-designer.com/cursor-view/117281.png'), auto;
outline: 2px solid #faf4eb!important;
}
.light-mode select:focus{color:#8AC7C6}
/* FONT SIZE */
.fiction_font-size-cont{
line-height: 1.2rem; /*prevents script from changing line-height of ui*/
}
.fiction_line-height-cont{
line-height: 1.2rem;/*prevents script from changing line-height of ui*/
}

.visually-hidden{
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


.fontbutton {
color: #8AC7C6;
background-color: rgba(48, 33, 115, .53);
border: 2px solid #23170b;
cursor: url('https://www.rw-designer.com/cursor-view/117281.png'), auto;
border-radius: 10px;
padding: 3px;
width: min-content;}

.light-mode .fontbutton{color:gold;}


.hidden {
  display: none;
}

/*
 * Assumes "dark" is a class added to your <html> or <body> tag
 * when dark mode is active.
 */
.light-mode .light-mode\:hidden {
  display: none;
}

.light-mode .light-mode\:block {
  display: block;
}