/***************
 * colorscheme *
 ***************/
:root {
    --background: #f9f9f9;
    --code-background: #f0f0f0;
    --blockquote-highlight: #d0d0d0;
    --base-text-color: #333333;
    --deemphasized-text-color: #666666;

    --link-color: #526dba;
    --link-hover-color: #526dfa;
}

/**********
 * Global *
 **********/

@media screen {
    body {
        background-color: var(--background);
    }
}

body {
    color: var(--base-text-color);
    font-family: Noto Sans;

    margin-top: 30px;

    display: flex;
    justify-content: center;
}

@media print {
    body {
        margin-top: 0;
    }
}

#root-container {
    width: 40em;
}

@media (max-width: 40em) {
    #root-container {
        width: 95%;
    }
}

a, a:link, a:visited {
    text-decoration: none;
    color: var(--link-color);
}

a:hover, a:active {
    text-decoration: underline;
    color: var(--link-hover-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: Karma
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.2em;
}

.back-link {
    text-align: center;
}

@media print {
    /* These (hopefully?) help avoid an empty final page when printing via Chrome. */
    html, body {
        padding-bottom: 0px;
        margin-bottom: 0px;

        break-after: avoid-page;
        break-before: avoid-page;
    }

    .noprint {
        visibility: hidden;
    }

    .back-link {
        visibility: hidden;
    }
}

/***************
 * Splash Page *
 ***************/
#author-banner {
    text-align: center;
    margin-bottom: 0px;
}

#author-photo {
    display: block;

    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;

    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;

    border: 2px;
    border-style: solid;
    border-color: var(--base-text-color);
}

#author-banner * {
    font-weight: normal;

    margin-top: 0px;
}

#author-banner #author-name {
    font-family: Karma;
    font-weight: 700;
    font-size: 2.0em;
    margin-bottom: 0px;
}

#author-banner #author-intro {
    font-family: Karma;
    font-weight: 700;
    font-size: 1.00em;
    color: var(--deemphasized-text-color);

    margin-bottom: 0px;
}

#author-banner #author-description {
    font-family: Noto Sans;
    font-size: 0.90em;
    color: var(--deemphasized-text-color);
    margin-bottom: 4px;
}

#author-social {
    font-size: 1.5em;
    text-align: center;
}

.fa, .fab, .fas {
    margin-right: 0.5em;
}

#author-about {
    text-align: justify;
}

/***********************
 * Blog Post Page List *
 ***********************/

#blog-post-list-header {
    display: block;
    width: 100%;
}

.blog-post-list {
    list-style-type: none;
    width: 100%;
    padding-left: 0;
}

.blog-post-list-entry {
    margin-bottom: 3em;
}

.blog-post-link {
    margin-bottom: 0em;
}

.blog-post-meta p {
    margin-top: 0em;
    margin-bottom: 0em;
}

.blog-post-date {
    color: var(--deemphasized-text-color);
    font-size: .75em;
}

.blog-post-tags {
    color: var(--deemphasized-text-color);
    font-size: .75em;
}

.blog-post-description {
    color: var(--base-text-color);
    margin-top: 0.5em;
}

/*******************
 * Blog Post Pages *
 *******************/

#blog-post-title {
    margin-bottom: 0em;
}

#blog-post .blog-post-meta {
    margin-bottom: 1em;
}

#blog-post-content {
    text-align: justify;
}

pre {
    overflow: auto;
}

code, pre {
    background-color: var(--code-background);
}

blockquote {
    border-left: 2px solid var(--blockquote-highlight);
    padding-left: 1em;
}