/** 
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: #e4e4eb;
    --text-color: #333;
    --text-font: sans-serif;
    --title-font: monospace;
    --subtitle-font: sans-serif;
    --message-font: monospace;
    --accent: #9e9ecf;
    --accent-dark: #5f5195;
    --accent-light: #c4c4f2;
    --blockquote-background: #f7f7f9;
    --title-color: #9e9ecf;
    --title-size: 2.5em;
    --width: 60em;
    --border-size: 2px;
    --border-style: solid; /** solid, dotted, dashed, double, hidden, none. cannot be wavy **/
    --link-border-style: solid; /** solid, dotted, dashed, double, wavy, none **/
    --hr-border-style: solid; /** solid, dotted, dashed, double, hidden, none. cannot be wavy **/
}

[data-theme="dark"] {
		--background: #0D0D3B;
		--text-color: #E4E9F2;
		--accent: #9e9ecf;
		--accent-dark: #c4c4f2;
		--accent-light: #7F7FBA;
		}

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

html,
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);
    margin: 0 auto;
}

#chapters {
    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,
#afterword .message {
    padding: 2em 2em 0 2em;
}

#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-light);
    border-radius: 5px;
    padding-top: 2em; 
    padding-right: 2em;
    padding-bottom: 1em;
    padding-left: 2em;
}

.meta dd {
    margin: -1.6em 0 1em 10em;
    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);
    text-transform: inherit;
}

.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);
}

.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-dark);
    padding: 2px;
}

a:hover,
a:active,
a:focus {
		color: var(--highlight-color);
		-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(--highlight-color);
		-webkit-text-decoration-color: var(--highlight-color);
		/** box-shadow: inset 0px -5px 0 0px var(--accent-light); **/
        background-color: var(--accent);
}

.tags a,
.tags a:visited,
.tags a:link {
  padding: 4px 7px;
  line-height: 2.3em;
  border: 2px solid var(--accent-light);
  border-radius: 5px;
}

#footer,
a:hover,
a.tag:hover {
  background-color: var(--accent);
}

#footer,
a:hover,
a.tag:hover,
a:visited:hover {
  color: #f7f7f9;
}

/* Blockquotes */
blockquote {
    background: var(--blockquote-background);
    padding: 1em;
    margin: 0.5em auto 1em;
    border-left: var(--size-half) solid 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);
    border-left: none;
    border-right: none;
    background: inherit;
}

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

blockquote.userstuff blockquote {
    background: var(--blockquote-background);
    border: none;
}

.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: bold;
    color: var(--accent);
    padding-bottom: 1em;
    border-bottom: var(--border-size) var(--border-style) var(--accent);
    font-family: var(--subtitle-font);
    font-size: 120%;
}

#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;
}

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

/* 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;
}

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

/* Responsive styles */
@media (max-width: 900px) {
    :root {
        --width: 95vw;
    }

    *, 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;
    }
}

/** custom user styles **/

.meta dd a {
  word-spacing: 0.05em;
}

h5 {
  font: bold 2em var(--h1-font);
  color: var(--accent-dark);
  text-align: center;
  box-shadow: 0px -8px 0px 0px var(--accent-light) inset;
  margin: 3em 15% 1em 15%;
}