/*
    Stylesheet by Rudolf Winestock
    Copyright © Winestock Webdesign
    All Rights Reserved
    contact: rudolf@winestockwebdesign.com
*/


/*
    I'm flattered that you're taking the time to read my code.  I reserve copyright in order to cover my bases, but feel free to learn from it.
    Reading other peoples code was part of the way that I learned.  The Readability addon (http://www.readability.com/) gives much of the inspiration for the design of my essays.
    Since so many people use it to make websites bearable, I figured that I would cut out the middle man.
*/

body {
    color: #AFB0B4;
    background-color: #091435;
    font-family: 'Alegreya', serif;
    font-kerning: normal;
}

h1 {
    text-align: center;
    font-variant: small-caps;
    font-style: italic;
    font-size: 3.5em;
}

h3 {
    text-align: center;
    font-variant: small-caps;
    line-height: .5em;
}

nav {
    max-width: 22em;
    top: 10px;
    position: sticky;
    margin: auto;
    background-color: #132461;
    border-radius: 15px;
}

nav ul {
    list-style-type: none;
    font-size: x-large;
}

nav ul li {
    padding-right: 1em;
    display: inline-block;
}

a {
    text-decoration: none;
    color: #2C7013;
}

a:visited {
    color: #9121ad;
}

a:hover {
    color: #961A3B;
}


/*
    The intro gives some "metadata" about the essay.
    In the intro, I try to grab the kind of audience that would be interested in this essay.
    On the Internet, you never know where your readers could come from.
    Once I have the right audience, I can try to grab their attention with the first line of the essay, proper.
*/

#intro {
    padding-bottom: 1em;
}

#intro p {
    font-size: large;
    max-width: 25em;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

blockquote {
    /* Whether or not I'm the original author, text in block quotes is in a different voice than the main text. */
    /* Therefore, I put the background in a slightly different color as a visual cue to the reader. */
    background-color: #132461;
    border-radius: 15px;
}

blockquote p {
    max-width: 21em;
    text-indent: 0em;
    margin-top: 1em;
    margin-bottom: 1em;
}


/*
    The "main" div and the <p> selectors took a lot of fiddling and are where most of the action occurs.  Ease of readability is paramount.
*/

#main {
    /*The width of the box must be a bit larger than the width of the paragraph.*/
    max-width: 48.5em;
    /*The width setting, along with these margin settings, put the box in the center with the sides hugging the text.*/
    margin-left: auto;
    margin-right: auto;
    padding-top: 1em;
    padding-bottom: 1em;
}

#main hr {
    width: 25%;
}

p {
    /*Short lines mean that the eyes don't travel far in order to read.*/
    max-width: 28em;
    padding-top: 0.12em;
    padding-bottom: 0.12em;
    /*Jagged right edges are unsightly, so I justify paragraphs.  Lines are short, so readability is unaffected.*/
    text-align: justify;
    /*I try to imitate printed copy with the justified and indented paragraphs.*/
    text-indent: 4em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 0;
    /*Between the short lines and the large letters, I'm trying to entice readers to go on.  "Just another line.  It's not much."*/
    font-size: x-large;
}

#main ul, li {
	max-width: 21em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	margin-top: 0;
	font-size: x-large;
}

/*
    The extro tells how the essay was received, who linked to it, and any discussion on it.  I write the extro some time after publishing the essay.
*/

#extro {
    padding-top: 1em;
    padding-bottom: 1em;
}

#extro p {
    font-size: large;
    max-width: 25em;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

footer p {
    padding: none;
    font-size: smaller;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 30em;
}