/** 
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: #fff;
    --text-color: #333;
    --text-font: sans-serif;
    --title-font: monospace;
    --subtitle-font: sans-serif;
    --message-font: monospace;
    --accent: #16a9b8;
    --accent-dark: #337378;
    --accent-light: #aadadf;
    --blockquote-background: #eee;
    --title-color: #16a9b8;
    --title-size: 2.5em;
    --width: 60em;
    --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 **/
}

* {
    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);
    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);
	-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);
	-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);
}

/* Blockquotes */
blockquote {
    background: var(--blockquote-background);
    padding: 1em;
    margin: 0.5em auto 1em;
}

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

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

/* 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;
        line-height: 150%;
    }

    #preface,
    #chapters,
    #afterword {
        width: 95%;
        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;
    }
}