/* Style */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@600&family=Libre+Baskerville&display=swap');
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@1,400;1,700&display=swap");

:root {
    --symbol-fonts: "Arial Unicode", "Apple Symbols", "Symbol", "Symbola_hint";
    --body-family: 'Libre Baskerville', serif;
    --title-family: 'Cabin Condensed', sans-serif;
    --mono-family: "JetBrains Mono", monospace, var(--symbol-fonts);
    
    --background-color: rgb(255, 255, 249);
    --surface-color: #fffff8;
    --primary-color: #7f7f7f;
    --primary-variant-color: #5f5f5f;
    --secondary-color: rgb(148, 66, 36);
    --error-color: #ffafaf;
    --error-border-color: #b00020;
    --on-background-color: #000000;
    --on-surface-color: #000000;
    --on-primary-color: #ffffff;
    --on-primary-variant-color: #ffffff;
    --on-secondary-color: #000000;
    --on-error-color: #000000;
    --enabled-color: rgb(240,240,240);
    --hovered-color: rgb(247, 239, 226);
    --focused-color: rgb(221,221,221);
    --modal-overlay-color: rgba(255,255,255,0.85);

    --border-color: var(--primary-color);
    --header-color: var(--background-color);
    --on-header-color: var(--on-background-color);
}

html {
    background-color: var(--background-color);
    color: var(--on-background-color);
    font-family: var(--body-family);
    font-size: 14pt;
    height: 100%;
    width: 100%;
    line-height: 1.75rem;
    margin-bottom: 0;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

/* https://www.smashingmagazine.com/2020/07/css-techniques-legibility/ */
@supports (font-size-adjust: 1) {
    html {
        font-size-adjust: 0.5;
    }
}

body {
    height: 100%;
    min-height: 100%;
    max-width: 50rem;
    padding: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

article {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

main {
    max-width: 50rem;
    flex-grow: 1;
    padding-bottom: 2rem;
}

header {
    padding-top: 2rem;
}

footer {
    padding-bottom: 1rem;
    border-top: 1px solid var(--focused-color);
    font-size: 80%;
}

footer span {
    display: inline-block;
}

footer .last-update {
    float: right;
}

header, main, footer {
    flex-shrink: 0;
}

img.face {
    width: 200px;
    float: right;
    padding-left: 2rem;
    padding-bottom: 2rem;
}

#homepage img.face {
    padding-top: 3rem;
}

h1 {
    font-size: 228%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-family);
}

h1 {
    margin-left: -3rem;
}

h1 span.home {
    display: inline-block;
    width: 3rem;
}

div.textblock {
    position: relative;
}

dt {
    font-family: var(--title-family);
    font-size: 125%;
}

pre {
    background-color: var(--hovered-color);
    margin-left: 4rem;
    margin-right: 4rem;
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.5rem;
}

code {
    font-family: var(--mono-family);
}

.buttonwidget {
    display: inline-block;
    position: absolute;
    top: 0.5rem;
    right: 4.5rem;
}

.flag {
    font-size: 200%;
    vertical-align: sub;
}

a, a:visited, a:hover {
    color: var(--on-background-color);
}

.index {
    padding-left: 1rem;
    padding-right: 1rem;
    border: 3px solid var(--secondary-color);
    border-radius: 0.5rem;
    background-color: var(--hovered-color);
    margin-bottom: 2rem;
}

.stream {
    margin-bottom: 2rem;
    border-top: 4px dotted var(--secondary-color);
}

.stream .desc {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    font-style: italic;
    margin-left: 3rem;
}

.desc .title {
    font-style: normal;
    font-weight: bold;
}

.desc img {
    max-width: 100%;
}

.stream li {
    clear: both;
}

.tiles {
    height: 100vw;
    width: 26px;
    position: fixed;
    top: 0;
    left: calc(((100% - 50rem) / 2) + 55rem);
    background-image: url("/img/TilesPale.png");
    background-repeat: repeat-y;
    background-size: contain;
}

#thetiles .tiles {
    background-image: url("/img/TileBackground.png");
}

.narrow {
    display: none;
}

.note {
    margin-left: 2rem;
    margin-right: 2rem;
    border: 1px solid var(--secondary-color);
    border-radius: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
}

.keyid {
    font-family: var(--mono-family);
    font-size: 90%;
    color: var(--primary-color);
}

@media screen and (max-width: 80rem) {
    .tiles {
        display: none;
    }
    .narrow {
        display: block;
    }
    .tilesacross {
        text-align: center;
    }
    .tilesacross img {
        padding-right: 1rem;
    }
}

@media screen and (max-width: 68rem) {
    body {
        margin-left: 3rem;
    }

    #homepage {
        margin-left: auto;
    }
}

@media screen and (max-width: 767px) {
    img.face {
        width: 100px;
        float: right;
        padding-left: 1rem;
        padding-bottom: 1rem;
    }
}