/** 
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: #000;
    --text-color: #fff;
    --text-font: sans-serif;
    --title-font: monospace;
    --subtitle-font: sans-serif;
    --message-font: monospace;
    --accent: teal;
    --accent-dark: #337378;
    --blockquote-background: teal;
    --title-color: teal;
    --title-size: 2.5em;
    --width: 60em;
    --border-size: 2px;
    --border-style: solid;
    --footer-color: #fff;
    /** 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;
}

u {
    text-decoration: underline dotted 0.1em;
    text-decoration-color: teal;
    color: teal;
}

mark {
    background-color: inherit;
    color: teal;
}

::selection {
    background: teal;
    color: white;
}

/* Layout containers */
#preface,
#chapters,
#afterword {
    width: var(--width);
    margin: 0 auto;
}

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

#afterword {
    margin: 1em 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;
}

#meow {
    width: var(--width);
    margin: 20px auto;
    font-weight: bold;
}


/* Meta and headings */
.meta dl.tags {
    border-bottom: dotted teal;
    border-top: dotted teal;
    padding-top: 2em;
    padding-right: 2em;
    padding-bottom: 1em;
    padding-left: 2em;
    line-height: 23px
}

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

#preface .meta .tags dd:nth-child(20) {
    word-spacing: 0.5em;
    border-bottom: var(--border-size) var(--border-style) var(--accent);
}

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

.byline {
    font-size: 120%;
    font-family: var(--subtitle-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: 1em;
}

.meta p {
    display: none;
}

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

}

#buttonsection {
    display: flex;
    justify-content: center;
    width: var(--width);
    margin: 0 auto;
    padding: 15px;
}

.buttons {
    margin: 20px;
}

#buttonsection2 {
    display: flex;
    justify-content: center;
    padding: 5px;
}

.buttons2 {
    margin: 10px;
}

/* 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: teal;
    text-decoration: underline dotted 1px;
}

a:hover,
a:active,
a:focus {
    color: deeppink;
    text-decoration: underline wavy 1px;
}

/* 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 {
    border: none;
    border-left: 4px solid teal;
}

.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: teal;
    background: white;
}

/* button style */

label {
    color: teal;
    font-size: 19px;

}

/* color switcher */
body:has(#light:checked) {
    color: black;
    background: bisque;
}

body:has(#dark:checked) {
    color: white;
    background: black;
}

/* Responsive styles */

@media (max-width: 800px) {
    :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;
    }
}