img.headshot
{
    float: left;
    margin-right: 0.5rem;
}

body
{
    font-family: arial;
    overflow-x:hidden;
}

header
{
    font-family: serif;
}

header, h1, h2
{
    font-variant: small-caps;
}

header p
{
    margin-top:0px;
}

header h1
{
    margin-bottom:0px;
    font-size: 2rem;
}

nav.navbar
{
    display: block;
    margin-top: 1em;
    margin-left: -1em;
    margin-right: -1em;
    background-color:black;
    color: white;
    font-weight: bold;
    padding: 1em 0;
}

nav.navbar ul
{
    list-style-type: none;
    display: inline;
    margin: 0;
}

nav.navbar ul li
{
    display: inline;
    padding: 0.5em;
}

@media (orientation: landscape)
{
    nav.navbar ul li
    {
	margin-left: 10%;
    }
}

nav.navbar ul li.active
{
    background-color: white;
    color: black;
}

nav.navbar ul li a
{
    text-decoration: none;
    color: white;
}

nav.navbar ul li.active a
{
    color:black;
}

nav.navbar ul li a:hover
{
    background-color: #333333;
}

nav.navbar ul li.active a:hover
{
    color:white;
}



@media (orientation: landscape)
{
    ul.content-list
    {
	display: grid;
	list-style: none;
	padding: 0;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    main
    {
	margin-left: 10%;
	width: 80%;
    }
}

@media (orientation: portrait)
{
    ul.content-list
    {
	display: grid;
	list-style: none;
	padding: 0;
	grid-template-columns: 1fr;
    }
}

main section p
{
    text-align: justify;
}


ul.content-list li
{
    border: grey 2px solid;
}

ul.content-list li p
{
    padding: 0.5em;
}

ul.content-list li h3
{
    margin: 0;
    background-color: grey;
    border: grey 4px solid;
}

ul.content-list li h3 a
{
    color: white;
}

p.blogdate
{
    font-size: 0.75rem;
    font-style: italic;
}