html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    border: 0;
    outline: 0;
    /*font-size: 100%;*/
    vertical-align: baseline;
    background: transparent;
    margin: 0;
    padding: 0;
}
html {
    /*font-size: calc(17px + (29 - 17) * ((100vw - 300px) / (1920 - 300)));*/
    font-size:17px
}
body {
    font-family: 'Roboto', sans-serif;
    /*font-family: 'Roboto Condensed', sans-serif;*/
    line-height:1.5em
}
header {
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 2rem;
}
header h1 {
    white-space: nowrap;
    text-decoration: none;
}
header h1 a {
    text-decoration: none;
}
/* {{{ FONT SIZES */
.font-65 {
    font-size:0.65rem;
}
.font-70 {
    font-size:0.7rem
}
.font-75 {
    font-size:0.75rem;
}
.font-100 {
    font-size:1rem;
}
.font-125 {
    font-size:1.25rem;
}
.font-150 {
    font-size:1.5rem;
}
/* }}} */

/* Site-Specific */

/* {{{ General Stuff */
body {
    position:relative
}
p, h1, h2, h3, h4, h5 {
    margin-bottom:1rem;
    font-family: 'Roboto Condensed', sans-serif;
}
h1 {
    font-size:2.5rem
}
h2 {
    font-size:2rem;
    line-height:2rem
}
h3 {
    font-size:1.5rem;
    line-height:1.5rem
}
h4 {
    font-size:1rem
}
ul, ol {
    margin-left:1rem;
    margin-bottom:1rem
}
blockquote {
    border-left:2px solid var(--accentColor);
    font-size:1.25rem;
    opacity:0.75;
    padding-left:1rem;
    font-style:italic
}
code {
    background-color: #eee;
}
code.block {
    border-radius: 0.5em;
    margin-bottom:1em;
    font-size:0.75em;
    white-space: pre;
    overflow:scroll;
    padding:1em;
    display:block;
}
p.ender {
    text-align:center;
    margin-bottom:1em
}
/* }}} General Stuff */


/* {{{ Colors */
:root {
    --linkColor: #4E878C;
    --headerLinkColor:black;
    --backgroundColor:white;
    --foregroundColor:black;
    --darkModeLinkColor:#B5FFE1;
    --accentColor:#FF312E
}
a {
    color:var(--linkColor);
}
body {
    background-color:var(--backgroundColor);
    color:var(--foregroundColor)
}
@media (prefers-color-scheme: dark) {
    :root {
        --linkColor: var(--darkModeLinkColor);
        --headerLinkColor:white;
        --backgroundColor:black;
        --foregroundColor:white
    }
}
/* }}} */
/* {{{ Layout */
div#Main {
    display:grid;
    grid-template-columns: repeat(16,1fr);
}

nav {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    padding-top:1rem;
    padding-bottom:1rem
}
nav a {
    font-size:1.5rem;
    text-decoration: none;
    font-weight: bold;
}
nav a:hover {
    text-decoration: underline;
}
main {
    display:block;
}
main h2 {
    margin-top:2rem;
    margin-bottom:2rem;
    opacity:0.75
}
header {
    margin-top:2rem
}
header h1 a {
    display:inline;
    text-decoration: none;
    color:white;
    /*text-shadow: -1px -1px 0 #314445,*/
    /*1px -1px 0 #314445,*/
    /*-1px 1px 0 #314445,*/
    /*1px 1px 0 #314445;*/
}
header, main, footer {
    grid-column:2 / span 14;
}

@media (min-width: 500px) {
    header, main, footer {
        grid-column:4 / span 10;
    }
}
@media (min-width: 820px) {
    header, main, footer {
        grid-column:5 / span 8;
    }
}
@media (min-width: 1270px) {
    header, main, footer {
        grid-column:5 / span 8;
    }
}
@media (min-width: 1400px) {
    header, main, footer {
        grid-column:6 / span 6;
    }
}
/* }}} Layout */

/* {{{ App Container */
.app {
    display:grid;
    grid-template-columns:78px 1fr;
    grid-template-rows: 78px 1fr;
    margin-bottom:1rem;
    padding:2rem;
    border-radius:18px
}
.app img {
    width:76px;
    border-radius: 18px;
}
.app p {
    font-size:1rem;
    grid-column:1 / span 2;
    margin-bottom: 0;
}
.app .pub {
    opacity: 0.4;
    text-align:center;
    font-size:0.75rem;
    vertical-align: text-top;
    grid-row: 2;
}
.app .desc {
    grid-row:1 / span 2;
    padding-left:1rem;
}
.note {
    border:1px solid #eee;
    border-radius: 16px;
    padding: 20px;
    background-color: rgba(255, 245, 181, 0.45);
    margin-bottom:1rem
}
/* }}} App Container */
/* {{{ Footer */
footer {
    position:relative;
    text-align:center;
    padding:0.5em 0 0.5em 0;
    font-size:0.75rem;
    width:100%;
    background-color:var(--backgroundColor);
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    margin-top:1rem
}
footer .c1 {
    text-align:right;
}
footer .c3 {
    text-align: left;
}
footer .foot {
    grid-column: 1 / span 3;
    padding-bottom:0.5em;
}
footer span, footer a {
    /*margin:0 1em 0 1em*/
}
footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--foregroundColor);
    opacity:0.5
}
/* }}} */