:root {
  --c-white: #fff;
  --c-black: #222;
  --c-grey: #668;
  --c-pastel-pink: #e7b1bb;
  --c-pastel-blue: #aabbcc;

  --f-body: 'Open Sans', Arial, sans-serif;

  --m-width: 900px;

  --c-bg: var(--c-white);
  --c-fg: var(--c-black);
  --c-nav-bg: var(--c-pastel-blue);
  --c-nav-fg: var(--c-black);
  --c-nav-active-bg: var(--c-white);
  --c-nav-active-fg: var(--c-black);
  --c-fg-faint: var(--c-grey);
}

body {
  margin: 0;
  padding: 0;
  position: relative;
  background: var(--c-bg);
  color: var(--c-fg);
  font: normal normal 12pt/1.5  var(--f-body);
  text-rendering: optimizeLegibility;
}

div {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
}

figure {
  /*display: inline-block;*/
  /*margin: 0 auto;*/
  text-align: center;
  max-width: 95%;
}
figure img {
  max-width: 100%;
}
figcaption {
  font-size: 0.9em;
}

h1 {
  font-family: 'Playwrite PE', cursive;
}

.head-container {
}
.head {
  max-width: var(--m-width);
  margin: 0 auto;
  padding: 0.5em 0;

  font-size: 5em;
  line-height: 2;
  text-align: center;

  font-family: 'Playwrite CU', cursive;
}
.logo {
  vertical-align: middle;
}

.nav-container {
  background: var(--c-nav-bg);
  background-image: linear-gradient(to bottom, var(--c-nav-bg) 20%, var(--c-bg) 100%);
}
ul.nav {
  list-style-type: none;
  max-width: var(--m-width);
  margin: 0 auto;
  padding: 0;
  display: block;
  line-height: 3em;
}
.nav li {
  display: inline-block;
  margin: 0;
  padding: 0 0.25em;
}
.nav a {
  display: block;
  height: 100%;
  padding: 0.25em;
  text-decoration: none;
  color: var(--c-nav-fg);
}
.nav a:link, .nav a:visited {
  text-decoration: none;
  font-weight: bold;
  color: var(--c-nav-fg);
}
.nav a:hover, .nav a:focus {
  text-decoration: none;
  color: var(--c-nav-active-fg);
  background: var(--c-nav-active-bg);
  background-image: linear-gradient(to bottom, var(--c-nav-bg) 7%, var(--c-nav-active-bg) 7%);
}
.nav .current a:link,
.nav .current a:visited,
.nav .current a:hover,
.nav .current a:focus {
    text-decoration: underline;
}

.body-container {
  max-width: var(--m-width);
  margin: 0 auto;
}
.body {
  padding: 1em;
  margin-right: 250px;
}

.item {
  padding: 2em 0;
  border-bottom: 1px solid var(--c-fg);
}
.item:first-of-type {
  padding-top: 0;
}
.item:last-of-type {
  border-bottom: none;
}

.sidebar {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 250px;
  font-size: 0.8em;
  line-height: 1.4;
}

.foot-container {
  max-width: var(--m-width);
  margin: 0 auto;
  line-height: 1.5em;
  padding-bottom: 1em;
}
.foot {
  padding: 0 1em;
  font-style: italic;
  font-size: 0.8em;
  color: var(--c-fg-faint);
}
.foot p {
  margin: 0;
  padding: 0;
}

.lg-fixed {
  /*position: fixed;*/
}

.i4x3 {
    /*width: 300px;*/
    /*height: 400px;*/
}

@media only screen and (max-width:900px) {
  .body {
    margin-right: 0;
  }
  .head > * {
    display: block;
    text-align: center;
  }
  .sidebar {
    border-top: 3px solid var(--c-pastel-blue);
    position: relative;
    margin: 0 auto;
  }
  .foot {
    text-align: center;
  }
}