@font-face {
    font-family: FiraCode;
    src: url(/fonts/FiraCode-Regular.woff2);
}

html
{
    background-color: rgb(29, 29, 29); /* match footer */
}

body
{
    width            : 100%;
    margin           : 0 auto;
    padding          : 0;
    font-family      : Georgia, 'Times New Roman', Times, serif;
    font-weight      : normal;
    font-size        : 16px;
    color            : #292727;
    background-color : white;

    /* Required for sticky footer */
    position  : relative;
    min-height: 100vh;
}

/* inline-code blocks with back-ticks */
code
{
    font-family: FiraCode;
    font-size: 85%;
    background-color: rgb(212, 212, 212);
    border-radius: 2px;
    padding: 1px 2px;
}

a
{
    text-decoration: none;
    color: #68ad18;
}

a:hover
{
    color: #e09107
}

a:active
{
    color: #c7064d
}

h1, h2, h3, h4, h5
{
    font-weight: normal;
}

h2
{
    margin-top: 1.5em;
    margin-bottom: 0em;
}

/* Post Preview */
div.post-preview
{
    margin    : 0 auto 3.5em auto;
    text-align: center;
}

div.first-post
{
    margin-top: 4em;
}

h2.post-preview
{
    margin : 0;
    color  : #292727;
    font-size: 200%;
}

div.post-preview-date
{
    margin  : 0 0 0 -3.5em;
    padding : 0;
    color   :#808080;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-size: 80%;
}

p.post-excerpt
{
    font-size: 80%;
    font-style: italic;
    color   :#608080;
}


/* Header & Nav Bar */
#header
{
    padding     : 1em 2em 0 2em;
    margin      : 0 auto;
    overflow    : hidden;   /* correct flow behavior */
    max-width   : 860px;
    /* background-color: teal; */
}

#header a.header-title h1
{
    display: inline;
    font-size: 240%;
}

#header a.header-title
{
    float: left;
    color :#292727;
}

#header a.header-title:hover
{
    color :#94093f;
}


#header ul.nav
{
    float: right;
    list-style-type: none;
    text-align: center;
}

#header ul.nav li
{
    display: inline;
    margin: 0 .25em;

    /* transform    : scaleX( 0 );   */
}

#header ul.nav li:hover
{
    border-bottom: solid 2px #94093f;
    /* transition   : transform 0.25s ease-in-out; */
}

#header ul.nav li a
{
    color :#94093f;
}

#header ul.nav li a:hover
{
    color :#d32266;
}

#header ul.nav li a:active
{
    color :#f849f8;
}

/* Content */

#container
{
    padding-bottom  : 2em;  /* must match out footer */
    margin: 0 2em;
}

#content
{
    margin          : 2em auto 3em auto;
    max-width       : 680px;
    width           : 100%;
    clear           : both;
}

/* Post */
h1.post-title
{
    margin: 0;
}

h4.post-subtitle
{
    color      : rgb(170, 170, 170);
    font-style : italic;
    margin     : .35em 0 0 .5em;
}

div.post-meta
{
    font-family : Arial, Helvetica, sans-serif;
    font-size   : 80%;
    margin      : 1.5em 0 3em 0;
}

div.post-author
{
    
}

div.post-update
{
    margin-top: .5em;
    font-style: italic;
    font-size : 80%;
}

div.post-content
{
    /* margin: 0 .5em; */
    line-height: 22px;
}

/* Code blocks */
pre
{
    margin: 1.3em 1em;
}


/* Footer */
#footer
{
    font-family     : Arial, Helvetica, sans-serif;
    font-size       : 80%;
    text-align      : center;
    background-color: rgb(29, 29, 29);
    color           : rgb(243, 247, 243);

    position    : absolute;
    bottom      : 0;
    width       : 100%;
    height      : 2em;
    margin      : 0;
    padding-top : .75em;
    /* padding-bottom: 4em; */
    overflow    : hidden;
}