/** 
Name: ao3-style.css
Source: kingdra.net/fan
Author: kingdra.net / aroceu
Description: A stylesheet made for fics from AO3 downloaded as .html files.
You don't have to keep the credit, but it'd be easier for others so they
can steal my code instead of yours P:
**/

/* Reset and base styles */
:root {
    --background: #f0dad1;
    --text-color: #000;
    --accent: #662d39;
    --accent-dark: #4a2b39;
    --accent-light: #dbbdc5;
    --blockquote-background: #c9b5bc;
    --title-color: #4a2b39;
    --darkmode-button: #dbbdc5;

    --text-font: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif;
    --title-font: Georgia;
    --subtitle-font: Georgia, serif;
    --message-font: monospace;

    --title-size: 2.5em;
    --width: 95vw;
    --border-size: 2px;

    --border-style: solid; /** solid, dotted, dashed, double, hidden, none. cannot be wavy **/
    --link-border-style: dotted; /** solid, dotted, dashed, double, wavy, none **/
    --hr-border-style: dotted; /** solid, dotted, dashed, double, hidden, none. cannot be wavy **/
    /** some sizing, which you can change but I highly advise for you to keep the provided units (em, %, and px respectively). smaller than 1 can be used as decimals, e.g. 0.8 **/
		--base-size: 1em;
		--line-height: 150%;
		--main-width: 60em;
		--border-size: 1px;

		/** calculations for sizing, you might not want to touch these **/
		--size-eighth: calc(var(--base-size) / 8);
		--size-quarter: calc(var(--base-size) / 4);
		--size-half: calc(var(--base-size) / 2);
		--size-one-half: calc(var(--base-size) * 1.5);
		--size-double: calc(var(--base-size) * 2);
        --size-triple: calc(var(--base-size) * 3);
		--size-quadruple: calc(var(--base-size) * 4);
}





.darkmode {
    --background: #1c1b1b;
    --text-color: #ebebeb;
    --accent: #cc958f;
    --accent-dark: #ebc1be;
    --accent-light: #332c2b;
    --blockquote-background: #333;
    --title-color: #f0dad1;
    --darkmode-button: #464646;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font: normal 1em/160% var(--text-font);
    color: var(--text-color);
    background: var(--background);
 
}

img{
    max-width: 100%;
}

p{
    padding: 0.5em 0;
}

hr{
    margin: 2em auto 1em;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: var(--border-size) var(--hr-border-style) var(--accent);
    width: 75%;
}

ul, ol{
    margin: 1em;
}

li{
    padding-left: 1em;
}


/* Layout containers */
#preface,
#chapters,
#afterword {
    width: var(--width);
    max-width: 60em;
    margin: 0 auto;
    padding: 0 var(--base-size);
}

#chapters .userstuff {
    margin-top: 2em;
    border-top: var(--border-size) var(--border-style) var(--accent);
    padding: 1em;
}

#afterword {
    margin: 2em auto;
    /* border: var(--border-size) var(--border-style) var(--accent); */
}

#afterword .meta {
    padding: 2em;
    border: var(--border-size) var(--border-style) var(--accent);
}

#afterword .message{
    padding: 2em 2em 2em 2em;
}

#afterword .meta dd { 
    margin: 1em 0 0 1em; 
}

/* Meta and headings */
.meta dl.tags {

    border: var(--border-size) var(--border-style) var(--accent);
    padding-top: 2em; 
    padding-right: 2em;
    padding-bottom: 1em;
    padding-left: 2em;
}

.meta dd {
    margin: -1.6em 0 1em 10em;
}

#preface .meta .tags dd:nth-child(20){
    word-spacing: 0.5em;
}

.meta h1,
.meta h2.heading {
    font-size: var(--title-size);
    text-align: center;
    margin: 1.5em auto 0.5em;
    color: var(--title-color);
    font-weight: normal;
    font-family: var(--title-font);
    line-height: 150%;
}

.byline {
    font-size: 120%;
    font-family: var(--title-font);
    text-align: center;
}

.meta h2 {
    font-size: 1.25em;
    text-align: center;
    page-break-before: always;
}

.meta .endnote-link {
    font-size: 95%;
    font-family: var(--message-font);
}

#preface .meta .endnote-link{
    padding-top: 2em;
}

.meta p {
    display: none;
}

#preface .meta p,
.meta .userstuff p,
.meta #endnotes p {
    display: block;
}

/* Paragraphs and lists */
p {
    padding: 0.5em 0;
}

ul,
ol {
    margin: 1em;
}

li {
    padding-left: 1em;
}

li::marker {
    color: var(--accent);
}



/* Links */
a:link,
a:visited {
	color: var(--accent);
	text-decoration-line: var(--link-border-style);
    -webkit-text-decoration-line: var(--link-border-style);
	text-decoration: underline;
	text-decoration-style: var(--link-border-style);
	text-decoration-thickness: var(--border-size);
	text-decoration-color: var(--accent);
	-webkit-text-decoration-color: var(--accent);
}

a:hover,
a:active,
a:focus {
	color: var(--accent-dark);
    text-decoration-line: var(--link-border-style);
	-webkit-text-decoration-line: var(--link-border-style);
	text-decoration: underline;
	text-decoration-style: var(--main-border-style);
	text-decoration-thickness: var(--border-size);
	text-decoration-color: var(--accent-dark);
	-webkit-text-decoration-color: var(--accent-dark);
	/* box-shadow: inset 0px -5px 0 0px var(--accent-light); */
	

}

#masterlist-link {
    padding: 1em 0 0 1.5em;
    font-size: 0.8em;
}

/* Blockquotes */
blockquote {
    background: var(--blockquote-background);
    padding: 1em;
    margin: 0.5em auto 1em;
	border-left: var(--size-eighth) var(--border-style) var(--accent);
}

.userstuff { 
    padding: 1em; 
}

.userstuff blockquote {
    /* border-top: var(--border-size) var(--border-style) var(--accent);
    border-bottom: var(--border-size) var(--border-style) var(--accent); */
    background: inherit;
}

blockquote.userstuff {
    background: inherit;
    border-left: none;
}

/* applies to blockquotes within the fic summary */
blockquote.userstuff blockquote {
    background: var(--blockquote-background);
    border-left: var(--size-eighth) var(--border-style) var(--accent);
}

.meta #endnotes blockquote.userstuff {
    padding-bottom: 0;
}

/* Messages and notes */
p.message {
    text-align: center;
    padding: 1em;
    font-family: var(--message-font);
}

#endnotes p:first-child, #preface .meta p:nth-child(4), #preface .meta p:nth-child(6) {
    font-weight: 500;
    color: var(--accent);
    padding-bottom: 1em;
    border-bottom: var(--border-size) var(--border-style) var(--accent);
    font-family: var(--subtitle-font);
    font-size: 140%;
}

#preface .meta .userstuff p:nth-child(4),
#preface .meta .userstuff p:nth-child(6),
#endnotes .userstuff p:first-child {
    font-weight: inherit;
    color: inherit;
    border-bottom: none;
    padding-bottom: inherit;
    font-family: inherit;
    font-size: inherit;
}

/* Table of contents */
.toc-heading {
    display: none;
}

/* Endnotes font size */
#endnotes1,
#endnotes2,
#endnotes3,
#endnotes4,
#endnotes5,
#endnotes6,
#endnotes7,
#endnotes8,
#endnotes9,
#endnotes10,
#endnotes11,
#endnotes12,
#endnotes13,
#endnotes14,
#endnotes15,
#endnotes16,
#endnotes17,
#endnotes18,
#endnotes19,
#endnotes20,
#endnotes21,
#endnotes22,
#endnotes23,
#endnotes24,
#endnotes25,
#endnotes26,
#endnotes27,
#endnotes28,
#endnotes29,
#endnotes30,
#endnotes31,
#endnotes32,
#endnotes33,
#endnotes34,
#endnotes35,
#endnotes36,
#endnotes37,
#endnotes38,
#endnotes39,
#endnotes40,
#endnotes41,
#endnotes42,
#endnotes43,
#endnotes44,
#endnotes45,
#endnotes46,
#endnotes47,
#endnotes48,
#endnotes49,
#endnotes50 {
    font-size: 0.9em;
}

.group blockquote.userstuff {
    font-size: 0.9em;
}


/*All CSS regarding the buttons on the bottom of the page*/

.actions {
  padding :0.429em 0.25em 0.25em 0;
  float: right;
  text-align: center;
  list-style: none;
  margin: 0.375em auto;
}

.actions li {
  display: inline-block;
}

.actions a, .actions a:link{
  background: #2e1b1b;
  color: #916a6a;
  box-shadow: inset 0 -8px 4px #2e1b1b, inset 0 8px 7px #b8a0a2;
  text-shadow: none;
  width: auto;
  font-size: 100%;
  line-height: 1.200;
  height: 1.800em;
  vertical-align: middle;
  display: inline-block;
  padding: 0.25em 0.75em;
  white-space: nowrap;
  overflow: visible;
  position: relative;
  text-decoration: none;
  border: 1px solid #5c3c3e;
    border-radius: 0.25em;
}

.actions a:hover {
  color: #8c8c8c;
  border-color: #000;
    box-shadow: inset 2px 2px 2px #000;
}
t
.actions a:active {
  color: #693e3e;
  border-color: #693e3e;
    box-shadow: none;
}

.actions a:visited {
  text-decoration: none;
  color: #8c8c8c;
}



/* styling for darkmode button */
#theme-switch {
    height: var(--size-quadruple);
    width: var(--size-quadruple);
    padding: var(--size-quarter);
    border-radius: 50%;
    background-color: var(--darkmode-button);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; /* change to fixed if you want the button to scroll with the page & always be visible */
    top: 15px;
    right: 15px;
    border: none;
}

#theme-switch svg {
    fill: var(--accent);
}

#theme-switch svg:last-child {
    display: none;
}

.darkmode #theme-switch svg:first-child {
    display: none;
}

.darkmode #theme-switch svg:last-child {
    display: block;
}
/* there are responsive styles for the darkmode button in the @media sections as well */

/* Spoiler */
spoiler {
    color: var(--text-color);
    background: var(--text-color);
}

/* Responsive styles */
@media (max-width: 900px) {
    
    *, html {
        -webkit-text-size-adjust: none;
    }

    #preface,
    #chapters,
    #afterword {
        width: 100%;
        padding-left: 1em;
        padding-right: 1em;
    }
    .meta dl.tags {
        padding: 1em;
    }
    #afterword .meta,
    #afterword .message {
        padding: 1em;
    }
    /* #afterword {
        border-top: var(--border-size) var(--border-style) var(--accent);
        border-bottom: var(--border-size) var(--border-style) var(--accent);
        border-left: none;
        border-right: none;
    } */
}

@media (max-width: 600px) {

    *, html {
        -webkit-text-size-adjust: none;
    }

    html,
    body {
        font-size: 0.95em;
    }
    #preface,
    #chapters,
    #afterword {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
    .meta dd {
        margin-left: 0;
        margin: 0 0 1em 0;
    }
    .meta dl.tags {
        padding: 0.5em;
    }
    blockquote {
        padding: 0.5em;
    }
    .userstuff {
        padding: 0.5em;
    }
    
}
  .actions li {
    margin-top: 10px;
  }
  
 

    /* darkmode button responsive sizing */
    #theme-switch {
        height: var(--size-triple);
        width: var(--size-triple);
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 400px) {
	/* darkmode button responsive sizing */	
    #theme-switch {
        height: var(--size-double);
        width: var(--size-double);
    }
}