@import 'colors.css';

::selection {
    background-color: var(--bg-hl-alt-intense);
}

html {
    color: var(--fg-main);
    background-color: var(--bg-main);
    font-family: "Iosevka Aile", sans-serif;
}

body {
    border-left: 1px dashed var(--bg-alt);
    padding-left: 1ch;
    margin: 1ch;
    max-width: 80ch;
    line-height: 1.5;
}
@media only screen and (min-width: 600px) { body { margin: 3.2ch; } }
@media only screen and (min-width: 84ch) { body { margin: 4ch auto; } }

h1 { color: var(--fg); }
h2 { color: var(--fg-special-warm); }
h3 { color: var(--fg-special-cold); }
h4 { color: var(--fg-special-mild); }
h5 { color: var(--fg-special-calm); }
h6 { color: var(--yellow-nuanced-fg); }

h1, h2, h3, h4, h5, h6, .title {
    font-family: "Iosevka Etoile", serif;
    border-bottom: 1px solid var(--bg-alt);
}
.outline-3, .outline-4 { margin-left: 1ch; }

.title {
    color: var(--fg-special-cold);
    border-bottom: 1px solid var(--bg-alt);
}

.subtitle {
    font-size: 0.56em;
    font-style: italic;
    font-weight: normal;
    color: var(--fg-special-mild);
    display: block;
    margin-top: 1ch;
    line-height: 1.4;
    font-family: "Iosevka Aile", sans-serif;
}

hr { color: var(--fg-alt); }

a { color: var(--blue-alt-other); }

a:hover, a:focus {
    color: var(--fg-dim);
    background-color: var(--blue-subtle-bg);
}

a:visited { color: var(--cyan); }

a:visited:hover, a:visited:focus {
    color: var(--fg-dim);
    background-color: var(--cyan-subtle-bg);
}

img {
    display: block;
    max-width: 100%;
    border: 2px solid var(--bg-special-mild);
}

#org-div-home-and-up { float: right; padding-top: 1ch; }

pre {
    color: #ffffff;
    padding: 0.6em;
    display: block;
    overflow-x: auto;
    white-space: pre;
    word-break: break-all;
    background-color: #100f10;
    font-family: "Iosevka", monospace;
}
pre:before {
    right: 8px;
    display: none;
    color: #ffffff;
    padding: 0 0.4ch;
    position: absolute;
    background-color: #000000;
}
.o-src-container ::selection,
pre ::selection { background-color: #282e46; }

pre.src { position: relative; }
pre.src:hover:before { display: inline; }
pre.src-c:before { content:"C" }
pre.src-sh:before { content:"sh" }
pre.src-go:before { content:"Go" }
pre.src-org:before { content:"Org" }
pre.src-perl:before { content:"Perl" }
pre.src-raku:before { content:"Raku" }
pre.src-python:before { content:"Python" }
pre.src-emacs-lisp:before { content:"Emacs Lisp" }

code {
    font-size: 1rem; /* code size should be same as body */
    padding: 0 0.4ch;
    color: var(--fg-special-calm);
    background-color: var(--bg-alt);
}

table {
    width: 100%;
    margin-bottom: 1em;
    border-collapse: collapse;
}
tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th {
    background-color: var(--bg-dim);
}
td, th { padding: .25em .5em; border: 1px solid var(--bg-alt); }

#text-writings td, th {
    border: 2px solid var(--bg-main);
}

.underline { text-decoration: underline; }

#table-of-contents {
    border-bottom: 1px solid var(--bg-alt);
    margin-bottom: 2ch;
}

#postamble {
    margin-top: 1.6em;
    border-top: 0.1em solid var(--fg-special-cold);
}

.note {
    background-color: var(--cyan-subtle-bg);
    padding: 0 0.4ch;
}

form, input {
    color: var(--fg-main);
    background-color: var(--bg-main);
    margin: .25em;
    padding: .25em;
}