/* LIGHT & DARK */
:root {
    --background: white;
    --text: black;
    --accent: #888;
    --navButton: #888;
    --navButtonAccentHover: black;
    --actionButtonBackground: rgba(0,0,0,0.1);
    --actionButtonText: #777;
    --actionButtonHoverText: white;
    --archiveButtonHover: green;
    --removeButtonHover: red;
    --starButtonHover: yellow;
    --starredButton: orange;
    --navBackground: #eee;
    --navBorder: #ccc;
    --navHighlight: #ddd;
    --viewProgress: #c8c8c8;
    --viewBackground: #f8f8f8;
    --viewText: #222;
    --quoteEditorToggleBackground: #c8c8c8;
    --quoteEditorToggleText: #444;
    --quoteEditorToggleBackgroundHover: #eee;
    --quoterButton: #ccc;
    --quoterButtonHover: green;
    --quoterButtonHoverText: white;
    --quoterRemoveButtonHover: red;
    --apiError: red;
    --apiErrorText: white;
    --rowsHover: rgba(0,0,0,.07);
    --quoteBackground: rgb(225, 245, 214);
    --mark: yellow;
    --loginLogoInvert: 0;
}
@media (prefers-color-scheme: dark) {
    :root {
        --background: #080808;
        --text: #eee;
        --accent: #888;
        --navButton: #777;
        --navButtonAccentHover: white;
        --actionButtonBackground: rgba(128,128,128,0.3);
        --actionButtonText: #999;
        --actionButtonHoverText: white;
        --archiveButtonHover: green;
        --removeButtonHover: red;
        --starButtonHover: yellow;
        --starredButton: orange;
        --navBackground: #222;
        --navBorder: #333;
        --navHighlight: #444;
        --viewProgress: #5d5d5d;
        --viewBackground: #111;
        --viewText: #c8c8c8;
        --quoteEditorToggleBackground: #666;
        --quoteEditorToggleText: #ccc;
        --quoteEditorToggleBackgroundHover: #2d2d2d;
        --quoterButton: #444;
        --quoterButtonHover: green;
        --quoterButtonHoverText: white;
        --quoterRemoveButtonHover: red;
        --apiError: red;
        --apiErrorText: white;
        --rowsHover: rgba(255,255,255,0.1);
        --quoteBackground: rgb(25, 46, 21);
        --mark: yellow;
        --loginLogoInvert: 1;
    }
}

/* GENERAL */
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    font-size: 14px;
}
body {
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.articlespertimegraph {
    height: 20rem;
    position: fixed;
    z-index: -1;
    bottom: 0;
    width: 100%;
}
.icon {
    vertical-align: baseline;
}

/* LOGIN (more see search bar styles) */
.login {
    max-width: 300px;
    padding: 2rem;
    margin: 3rem auto 0;
}
.login h1 {
    margin-bottom: 2.2rem;
}
.login h1 img {
    width: 100%;
    filter: invert(var(--loginLogoInvert));
}

/* HEADER */
header {
    z-index: 10;
    position: fixed;
    top: 0;
    width: 100%;
    opacity: .95;
    backdrop-filter: blur(0.2rem);
    -webkit-backdrop-filter: blur(0.2rem);
}

/* nav */
nav {
    display: inline-block;
    font-size: 0;
    float: left;
}
nav a {
    height: 6rem;
    padding: 2rem;
    font-size: 1.6rem;
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
}
nav .read svg,
header .back svg {
    height: 0.8em;
}
nav.pages {
    float: right;
}
nav.pages a {
    border-right: none;
}

/* search bar */
header form {
    width: 100%;
    display: inline-block;
}
header .query,
.login input {
    height: 4rem;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    font-family: inherit;
    outline: none;
    border: none;
    width: 100%;
    -webkit-appearance: none;
    border-radius: 0;
}
header .submit,
.login .submit {
    display: none;
}
header .clearbutton,
header .submitbutton,
header .newerbutton,
header .olderbutton {
    position: fixed;
    right: 0;
    padding: 1.12rem;
    font-size: 1.6rem;
    text-decoration: none;
}
header .submitbutton {
    display: none;
}
header .olderbutton {
    left: 0;
    right: auto;
}

/* stats */
nav.stats {
    width: 100%;
    display: inline-block;
    height: 4rem;
    font-size: 0;
}
nav.stats a {
    border: 0;
    background: transparent;
    height: 4rem;
}
nav.stats select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 1.6rem;
    border: 0;
    height: 4rem;
    padding: 0 2rem;
    width: 100%;
    text-align: center;
    text-align-last: center;
    outline: none;
    background-color: transparent;
}
nav.stats a + form select {
    padding: 0 4rem;
}
nav.stats select option {
    text-align: left;
}

/* view */
header hr {
    border: 0;
    height: 3rem;
    width: 100%;
}
header hr.progress {
    width: 0;
    margin-top: -3rem;
}
header .back {
    margin-top: -3rem;
    padding: 0.7rem;
    line-height: 1.5rem;
    font-size: 1.5rem;
}
header .back a {
    text-decoration: none;
    font-weight: bold;
}
header .viewfinish {
    height: 0;
}
header .viewfinish button {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
    font: inherit;
    font-size: 1.5rem;
    padding: 0 0.8rem 0 1.2rem;
    height: 3rem;
    border: 0;
    color: inherit;
    cursor: pointer;
}

/* MAIN */
main {
    display: block;
    margin: 10rem 0 .5rem;
    padding: .5rem 0;
    word-wrap: break-word;
}
main .words {
    font-size: 1.3rem;
    font-weight: bold;
    padding: .7rem 2rem 0;
}
main .words a {
    text-decoration: none;
}
main .random {
    background-color: var(--rowsHover);
    margin: 0.5rem 1rem;
}
main .random p {
    margin-bottom: 0.5rem;
    padding: .7rem 0 0 1rem;
}
main .random td:first-child {
    padding-left: 1rem !important;
    min-width: 4rem;
    width: 4rem;
}
main .random td:last-child {
    padding-right: 1rem !important;
}
main table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
main tr {
    vertical-align: baseline;
}
main td {
    padding: .5rem 0;
}
main td:first-child {
    padding-left: 2rem;
}
main td:last-child {
    padding-right: 2rem;
}
main td.left {
    min-width: 5rem;
    width: 5rem;
}
main td.left abbr {
    text-decoration: none;
}
main td .text {
    margin-right: .5rem;
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: none;
}
main td .info {
    line-height: 1.3rem;
}
main td .info a {
    text-decoration: none;
    color: inherit;
}
main td .info .ertlabel {
    font-weight: 500;
    font-size: 0.75rem;
}
main td mark {
    color: inherit;
}
main td .quote,
main .quote-editor .quote {
    display: inline-block;
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
    text-decoration: none;
}

/* actions */
main .actions {
    min-width: 7rem;
    width: 7rem;
    text-align: right;
}
main .actions input {
    -webkit-appearance: none;  /* fix for ios */
    font-size: 1.2rem;
    border: none;
    border-radius: 99rem;
    width: 1.6em;
    height: 1.6em;
    padding-top: 0.03em;
    padding-left: 0.3em;
}
main .actions input[name="remove"] {
    padding-left: 0.25em;
}
main .actions input[name="star"],
main .actions input[name="unstar"] {
    padding-left: 0.15em;
}
main .actions input:hover {
    cursor: pointer;
}

/* stats */
main .stats .words {
    padding-bottom: 0.7rem;
}
main .stats .herotext {
    font-size: 2rem;
    font-weight: normal;
    line-height: 2.5rem;
}
main .stats .herotext p {
    font-size: 1.6rem;
    line-height: 2rem;
    margin-top: 0.7rem;
}
main .stats .words ~ .words { /* every element with this class, except the first */
    margin-top: 0.7rem;
}
main .stats .graph {
    width: 100%;
    height: 20rem;
}
main .stats .graph.large {
    height: 35rem;
}

/* view */
main.main-view .words {
    margin-top: -7.5rem;
}
main .viewheader {
    margin-top: -7.5rem;
    padding: 1.5rem 0 4rem;
    opacity: 0.95;
}
main .viewheader > *,
main .viewcontent {
    margin: auto;
    max-width: 45rem;
}
main .viewheader > * {
    padding: 0 2rem;
}
main .viewheader h1 {
    margin-bottom: 1rem;
    font-size: 2.25rem;
    font-weight: bold;
}
main .viewheader h1 a {
    text-decoration: none;
}
main .viewheader .archive-links {
    margin-top: 1.3rem;
}
main .viewheader .archive-links a {
    text-decoration: none;
    color: var(--accent);
}
main .viewheader .archive-links a:hover {
    color: var(--navButtonAccentHover);
}
main .quote-editor-wrapper {
    margin-top: 1.5rem;
}
main .quote-editor-toggle {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 99rem;
    text-decoration: none;
}
main .quote-editor-toggle .contract {
    display: none;
}
main .quote-editor {
    display: none;
}
main .quote-editor em {
    display: block;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
main .quote-editor .quote-container {
    display: flex;
}
main .quote-editor .quote-container > * {
    margin-top: 0.5rem;
    flex: 1;
}
main .quote-editor .quote {
    display: block;
}
main .quote-editor .quote-container button {
    -webkit-appearance: none;
    max-width: 3rem;
    border: 0;
    padding-left: 0.25em;
    font-size: 1.2rem;
    cursor: pointer;
}
main .quote-editor .add-additional-quotes .quote-container p {
    min-height: 3rem;
    outline: none;
}
main .viewcontent {
    padding: 4rem 2rem;
    font-family: Georgia, "Linux Libertine", serif;
    font-size: 1.5rem;
    line-height: 2.4rem;
}
main .viewcontent pre {
    font-family: inherit;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
main .viewcontent .quote {
    padding: 0.2em 0;
}
.quoter {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
}
.quoter button {
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    font-size: 1.2rem;
    border-radius: 10rem;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
}
.api-error {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    padding: 0.5rem;
}

/* MOBILE */
@media (max-width: 720px) {
    html {
        font-size: 12px;
    }
    nav a {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
    nav .read svg {
        margin-left: -0.8rem;
        margin-right: -0.8rem;
        transform: rotate(-90deg);
    }
    main .random {
        margin: 0 0 0.5rem;
    }
    main:not(.main-stats) td:first-child {
        padding-left: 1rem;
    }
    main:not(.main-stats) td:last-child {
        padding-right: 1rem;
    }
    main:not(.main-stats) td.left {
        min-width: 4rem;
        width: 4rem;
    }
    main:not(.main-stats) .actions {
        min-width: 6rem;
        width: 6rem;
    }
    main td.actions {
        vertical-align: top;
    }
    main td .info:before {
        content: '\A';
        display: block;
    }
    main div.actions {
        display: inline-block;
    }
    main .stats .graph {
        height: 10rem;
    }
    main .stats .graph.large {
        height: 15rem;
    }
}

/* COLORS */
body {
    background-color: var(--background);
}
body,
nav a,
header .back a,
header .query,
.login input,
header select,
main td .text,
main .viewheader h1 a {
    color: var(--text);
}
nav .read svg,
header .back svg {
    fill: var(--text);
}
main td,
main td .text span.notitle,
main .words a,
main .stats .words:last-child,
main .stats .herotext p,
main .viewheader .meta {
    color: var(--accent);
}
header .clearbutton,
header .submitbutton,
header .newerbutton,
header .olderbutton {
    color: var(--navButton);
}
main .actions input {
    background-color: var(--actionButtonBackground);
    color: var(--actionButtonText);
}
main .actions input:hover {
    color: var(--actionButtonHoverText);
}
main .actions input[name="archive"]:hover {
    background-color: var(--archiveButtonHover);
}
main .actions input[name="remove"]:hover {
    background-color: var(--removeButtonHover);
}
main .actions input[name="star"]:hover,
main .actions input[name="unstar"]:hover {
    background-color: var(--starButtonHover);
}
main .actions input[name="unstar"],
main .viewheader .meta .star {
    color: var(--starredButton);
}
header .clearbutton:hover,
header .submitbutton:hover,
header .newerbutton:hover,
header .olderbutton:hover,
main td a:hover,
main .words a:hover {
    color: var(--navButtonAccentHover);
}
main td .quote,
main .quote-editor .quote {
    color: var(--text);
    background-color: var(--quoteBackground);
}
main td a.quote:hover {
    color: var(--quoteBackground);
    background-color: var(--text);
}
header {
    background-color: var(--navBackground);
}
nav a {
    border-right: 1px solid var(--navBorder);
}
nav.pages a {
    border-left: 1px solid var(--navBorder);
}
nav a:hover,
nav a.current,
header .query,
.login input,
header hr,
nav.stats,
main .viewheader {
    background-color: var(--navHighlight);
}
header hr.progress,
header .viewfinish button {
    background-color: var(--viewProgress);
}
header .viewfinish button:hover {
    background-color: var(--archiveButtonHover);
    color: var(--actionButtonHoverText);
}
main .quote-editor-toggle {
    background-color: var(--quoteEditorToggleBackground);
    color: var(--quoteEditorToggleText);
}
main .quote-editor-toggle:hover {
    background-color: var(--quoteEditorToggleBackgroundHover);
}
main .quote-editor .quote-container button {
    background-color: var(--actionButtonBackground);
    color: var(--actionButtonText);
}
main .quote-editor .quote-container button:hover {
    background-color: var(--removeButtonHover);
    color: var(--actionButtonHoverText);
}
.quoter button {
    background-color: var(--quoterButton);
}
.quoter button:hover,
main .quote-editor .quote-container button:hover {
    background-color: var(--quoterButtonHover);
    color: var(--quoterButtonHoverText);
}
.quoter button.remove-quote:hover,
main .quote-editor .quote-container button.remove-quote:hover {
    background-color: var(--quoterRemoveButtonHover);
}
.api-error {
    background-color: var(--apiError);
    color: var(--apiErrorText);
}
.viewcontent .quote {
    background-color: var(--quoteBackground);
}
main tr:hover {
    background-color: var(--rowsHover);
}
main td mark {
    background-color: var(--mark);
    color: black !important;
}
main.main-view {
    background-color: var(--viewBackground);
}
main .viewcontent {
    color: var(--viewText);
}

/* ICONS */
/* and related adjustments */
.icon,
main .actions input {
    font-family: Octicons;
}
nav.pages a {
    width: 5rem;
}
@media (max-width: 720px) {
    nav.pages a {
        width: 2.3rem;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }
    nav.pages a:last-child {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}
nav.pages a.statsicon,
nav.pages a.viewicon {
    width: auto;
}
nav.stats a {
    padding-top: 1.05rem;
}
@media (max-width: 720px) {
    nav.stats a {
        padding-top: 1.2rem;
    }
}
nav.stats a.olderbutton {
    padding-left: 1.3rem;
}
nav.stats a.newerbutton {
    padding-right: 0.8rem;
}
@media (max-width: 720px) {
    main .actions input {
        font-size: 1.4rem;
    }
}