.flex {
  padding: 2em 4em;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 3em);
  }
.flexbox { flex: 0 1 auto; }
.flexbody { flex: 1 1 auto; }
.flexhead { flex-shrink: 0; }
.flexend { flex-shrink: 0; }

@font-face { font-family:Merriweather-Regular; src:url(fonts/Merriweather-Regular.ttf); }
@font-face { font-family:Vollkorn-Regular; src:url(fonts/Vollkorn-Regular.ttf); }

body {
  background: #fff;
  font-family: "Merriweather-Regular", "Vollkorn-Regular", "Times New Roman", Times, serif;
  font-size: 12pt;
  color: #444;
  line-height: 1.25em;
  }

a {
  color: #000;
  text-decoration: none;
  }
a:hover {
  color: #008;
  }

.menu {
  font-family: "Merriweather-Regular", "Vollkorn-Regular", "Times New Roman", Times, serif;
  background: #fff;
  }
.menu button {
  min-width: 5em;
  background: #cfc;
  }
.menu button:hover {
  background: #fcc;
  }
img.menu
  {
  border-radius: 0;
  height: 100px;
  }

.dropdown {
  color: #666;
  margin-top: 16px;
  padding-left: 0.25em;
  padding-right: 0.25em;
  position: relative;
  display: inline-block;
  font-variant: small-caps;
}
.dropdown-content {
  display: none;
  text-align: left;
  left: -1em;
  right: auto;
  width: auto;
  position: absolute;
  padding-left: 0.25em;
  padding-top: 1em;
  color: #666;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  white-space: nowrap;
}
.dropdown a, .dropdown-content a {
  padding: 0.25em;
  text-decoration: none;
  display: block;
  color: #666;
}
.dropdown a:hover, .dropdown-content a:hover { color: #000; }
.dropdown:hover { color: #000; }
.dropdown:hover > .dropdown-content {display: block; }

.header {
  flex-shrink: 0;
  background: #fff;
  margin-bottom: 1em;
  }

.footer {
  flex-shrink: 0;
  padding: 0;
  padding-bottom: 1em;
  margin-top: 2em;
  background: #fff;
  text-align: center;
  font-size: smaller;
  }

h1 { font-size: 200%; font-weight: normal; font-variant: small-caps; line-height:initial; }
h2 { font-size: 150%; font-weight: normal; font-variant: small-caps; line-height:initial; }
.big { font-size: 200%; }
.font32 { font-size: 32pt; }
.font20 { font-size: 20pt; }
.font16 { font-size: 16pt; }
.small { font-size: smaller; }
.smcap { font-variant: small-caps; }
.round { border-radius: 5px; }
.biground { border-radius: 10px; }
.block { display:inline-block; }
.center { text-align:center; }
.middle { vertical-align:middle; }
.indent { margin-left: 2em; margin-top: 1em; margin-bottom: 1em; }
.imglink { border: 1px solid #fff; }
.imglink:hover { border: 1px solid #008; }

.black { color:#000; }
.gray { color:#888; }

.figright
  {
  float:right;
  display: inline-block;
  max-width: 25%;
  margin: 1em;
  }

.figrightbig
  {
  float:right;
  display: inline-block;
  max-width: 50%;
  margin: 1em;
  }

.figleft
  {
  float:left;
  display: inline-block;
  max-width: 25%;
  margin: 1em;
  }

.fig
  {
  display: inline-block;
  margin: 1em;
  }

.figbig
  {
  max-width: 50%;
  }

.fig p, .figleft p, .figright p {
  text-align: left;
  font-size: 75%;
  }

img {
  max-width:100%;
  min-width: 100px;
  height:auto;
  }

.society6 { display: inline-block; vertical-align:top; }
.society6 img { max-height: 300px; border: 1px solid #fff; }
.society6 a img { max-height: 300px; border: 1px solid #fff; }
.society6 a img:hover { max-height: 300px; border: 1px solid #88f; }

.tutorials { display: inline-block; vertical-align:top; }
.tutorials img { max-height: 300px; border: 1px solid #000; margin:0.25em; }
.tutorials a img { max-height: 300px; border: 1px solid #000; }
.tutorials a img:hover { max-height: 300px; border: 1px solid #88f; }

.ebooks { display: inline-block; margin:0.25em; vertical-align:top; }
.ebooks img { max-height: 300px; border: 1px solid #000; }
.ebooks a img { max-height: 300px; border: 1px solid #000; }
.ebooks a img:hover { max-height: 300px; border: 1px solid #88f; }

.list li { margin-top: 0.5em; margin-bottom: 0.5em; }

.submitbutton, .shopbutton a {
  text-transform: uppercase;
  background: #000;
  color: white;
  padding: 0.5em;
  }
.submitbutton:hover, .shopbutton a:hover {
  background: #444;
  }

.reset { all: initial; }

::placeholder { color: #bbb; opacity: 1; }