body{
		margin:1em auto;
		max-width:90%;
		padding:0 .62em;
    color: #FFFFFF;
    background-color: #828282;
		font:1.2em/1.62 sans-serif;
}

h1,h2,h3 {
	line-height:1.2;
}

a {
	color: #FFFFFF;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	  max-width:50%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

header {
    text-align:center;
    padding:10px;
    background-color:transparent;
	  width:34em;
    margin-left:auto;
    margin-right:auto;
}

header a  {
    color:#FFFFFF;
    border: 0;
    font-size: 1.3em;
    font-weight: bold;
}

.headerTitle {
    font-size: 1.9em;
    font-weight: bold;
}

.headerSubtitle {
    font-size:0.85em;
    font-style:italic;
    width:100%;
}

#navlist a {
    padding-left: 1em;
    padding-right: 1em;
    color: #DBDBDBDB;
}

nav a.thisPage {
    font-weight: bold;
    color: white;
}

footer {
    font-size:0.8em;
    background-color:transparent;
    text-align:center;
    margin:auto;
    padding:.2em;
    width:50%;
    border-top:1px solid #333 ;
}

footer img {
    margin-left:.2em;
    margin-right:.2em;
    vertical-align:middle;
}

main {
    text-align:left;
    margin:auto;
    padding:1em 3em 1em 3em;
    line-height:1.5;
    max-width:60%;
}

main h1 {
    font-size: 1.7em;
}


main p {
    font-size: 0.9em;
}

main h2 {
    font-size: 1.2em;
}

main h3 {
    font-size: 1.0em;
}

main h4 {
    font-size: 1.0em;
    line-height: 1.0;
}


@media (min-width: 75em) {
    header {
	      width: 100%;
    }

    body {
        margin:0.1em auto;
		    max-width:100%;
		    padding:0 .62em;
    }

    .headerTitle {
        font-size:2.6em;
    }

    #article {
        column-count: 2;
    }

}

@media (max-width: 50em) {
    body{
		    margin:0.1em;
		    max-width:100%;
		    padding:0.1em;
    }

    header {
	      width:90%;
    }

    .headerTitle {
        font-size: 1.3em;
    }

    main {
        line-height:1.5;
        max-width:100%;
        padding:1em 0.5em 1em 0.5em;
    }


}