@import url(https://fonts.googleapis.com/css?family=Titillium+Web&display=swap);

html { 
    margin-bottom: 1px;
}

body {
    margin: 0px;
    font-size: 12pt;
    font-family: sans-serif;
    font-family: 'Titillium Web', sans-serif;
}

header, main {
    backdrop-filter: blur(4px);
    z-index: 1;
}

footer {
    position: fixed;
    right: 0;
    bottom: 0;
    text-align: right;
    padding: 0.5em;
}

/* Header */
header {
    position: relative;
    height: 140px;
    border-bottom-width: 2px;
    border-bottom-style: dotted;
}

header > div {
    width: 100%;
}

header h1 {
    text-align: right;
}

header h1 a {
    border-bottom: none;
}
header a:hover {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
header div {
    position: absolute;
    right: 5px;
}

header div span { 
    position: relative;
    top: -10px;
    font-variant: small-caps;
}


header a#header {
    text-decoration: none;
}

header h1 {
    margin-top: 0.25em;
    font-variant: small-caps;
    font-size: 3.5em;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Main */

main {
    margin-left: auto;
    margin-right: auto;
    max-width: 8.2in;

    border-radius: 0 0 2em 2em;
    padding: 1em;
}

/* Blogger Posts */

div.post-body pre,
div.post-body code {
    overflow-x: auto;
}

.post_title {
}

.post-footer {
    font-size: 9px !important;
}

div.post-body p {
    text-align: justify;
}
div.reader-publisher-module {
}
div.reader-publisher-module ul li {
}
div.reader-publisher-module ul li a.i {
    margin-left: 10px; 
    font-family: serif;
    font-style: italic; 
    font-weight: 900;
}
div.reader-publisher-module ul li div.s {
    font-size: smaller;
    text-align: right;
    width: 100%;
}
div.reader-publisher-module div.f {
    text-align: right;
    width: 100%;
}

div#categories {
    position: absolute;
    right: 20px;
    margin: 60px 40px 0 0;
}

div#categories > ul {
    list-style-image: url("https://${domain}/images/${folder}/00.png");
    margin-top: 3px;
    padding-left: 10px;
}

a.rss-icon {
    border-bottom: none;
}

a.rss-icon > img {
    width: 10px;
}

#comment-editor, .comment-form {
    max-width: 92vw;
}

/* Miscellaneous */

img {
    max-width: 92vw;
}

pre, blockquote {
    margin-left: 15px;
    border-left-width: 2px;
    border-left-style: solid;
    padding-left: 3px;
}

div.quotee {
    text-align: right;
    margin-top: -1em; 
}
div.quotee:before {
    content: "~";
}

div.overflow {
    overflow-x: auto;
}


main a:link,
main a:active,
main a:visited,
main a:hover {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    text-shadow: 1px 1px 3px black; /* default colour, override it */
}

/* Tables */


/* NOTE: table should set border attribute, "<table border='1'>"
         May also want to wrap a table in a div.overflow tag for mobile users. */
table.kosmo-table {
    border-collapse: collapse;
    text-align: left;
}
table.kosmo-table tr td {
    white-space: nowrap;
    padding: 0 0.5em;
    vertical-align: top;
}

/* NOTE: content of rotated headers should be nested in a DIV, so <th><div>Desc</div></th> */
table.rotate-header th {
    text-align: left;
    position: relative;
    white-space: nowrap;
    min-width: 2em;
    height: 7em; /* override */
    border: 0;
}
table.rotate-header thead tr th div {
    transform: translate(0em,-1.5em) rotate(-30deg);
    position: absolute;
    width: 10em; /* override */
}


/* Stars */

div#starfield-top,
div#starfield-left {
    position: absolute;
    z-index: -1;
    overflow: hidden;
}

div#starfield-top {
    top: 0;
    width: 100%;
}

div#starfield-left {
    left: 0;
    height: 100%;
    width: 100%;
}

.star {
    position: absolute;
    opacity: 0;
    box-shadow: 0px 0px 100px 2px rgba(128,0,255,0.9); /* default colour, override it if you want */
}

div#starfield-left .star {
    transition: opacity 2s linear;
}