body {
    font-family: sans-serif, Verdana, Geneva;
}


/* The hugo layout templates don't make us of tables, but with the markdown content it's possible to generate tables, so these control the appearance of those. */

.content>table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
}

.content table {
}

.content th,
.content td {
    border: 3px solid DimGray;
}

.content th {
    text-align: center;
    background-color: DimGray;
    color:white;
}
.content td {
    background-color: DimGray;
}

.content th,
.content td {
    padding: 10px;
}

/* page structure and grid layout */
.nav { grid-area: nav; }

.sidebar {
    grid-area: sidebar;
    background-color: gray;
}

.content { grid-area: content; }

.header {
    grid-area: header;
    padding: 20px;
    color: white;
    background-color: DimGray;
    display: flex;
    flex-wrap: wrap;
}

.headertext { flex: auto; }

.logo { flex: none; }

.footer { grid-area: footer; }

.wrapper {
    color: DimGray;
    display: grid;
    grid-template-areas:
    "header"
    "nav"
    "content"
    "sidebar"
    "footer"
}

.nav {
    display: flex;
    flex-wrap: wrap;
    background-color: black;
    flex-direction: row;
}

.nav>* {
    margin: 0 1em 1em 1em;
}

@media only screen and (min-width: 550px)  {
    .content>table {
	width: 80%;
    }

    .wrapper {
	grid-gap: 0 2em;
        grid-template-columns: auto auto;
        grid-template-areas:
	"header   header"
        "nav      nav"
        "content content"
        "sidebar  sidebar"
        "footer   footer";
    }

    .nav {
	flex-direction: row;
    }
}

@media only screen and (min-width: 1010px)   {
    body { margin: 20px; }

    .content>table {
	width: 50%;
    }

    .wrapper {
        grid-template-columns: 150px auto 330px;
        grid-template-areas:
	"header header  header"
        "nav nav nav"
        "content content sidebar"
        "footer  footer  sidebar";
/*        max-width: 600px;  */
    }

    .nav {
	flex-direction: row;
    }
}

.header,
.footer {
/*  background-color: #999; */
}

.tagline {
    color: GreenYellow;
}

figure {
    float: right;
    clear: right;
    min-width: 300px;
    width: 30%;
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
    border: thin midnightblue solid;
    margin: 0.5em;
    padding: 0.5em;
}

img.scaled {
    width: 100%;
}

/* a (anchor), link, and chosen or notchoses classes control how menu
   items display */
a {
  transition: color .4s;
  color: mediumblue /*#265C83*/;
}

:link {
    text-decoration: none;
    font-weight: bold;
}

/*
a:link {
    color: blue;
}
*/
a:visited {
    color: firebrick;
}
a:hover   {
    color: fushia;
}

a:focus,
a:active {
  transition: color .3s;
  color: red;
}

/* links for menu items have different colors */
.menu :link { font-weight: normal; }

.menu.notchosen a:link,
.menu.notchosen a:visited { color: lightgoldenrodyellow; }

.menu.notchosen a:active,
.menu.notchosen a:focus,
.menu.notchosen a:hover { color: gold; }

/* chosen elements do not have <a> elements */
.chosen.menu { color: gold; }

.chosen {
    display: list-item;
    color: black;
    text-decoration-style: 
}