body {
  background-color:black;
  color:#D6D6D6;
  font-family: Georgia, Serif;
  margin: auto;
  line-height: 1.3;
  max-width: 800px;
}
h1 {
  font-family: Cambria, Serif;
  font-size: 135%;
  text-align:center;
  letter-spacing:0.05em;
  word-spacing: 0.15em;
  margin:0;
}
h2 {
  font-size:14px;
  color:#929292;
  margin-top:30px;
  margin-bottom:-4px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, transparent, #929292 5%, transparent);
  margin-left:-10px;
  padding-left:25px;
  letter-spacing:0.01em;
  font-style: italic;
}
a {
  color:#B0C4DE;
}
a:hover {
  color:#D7E1EE;
}
.center {
  text-align:center;
}

/*TOP*/
#top {
  position: absolute;
  top: 0;
}
.header {
  margin-top: 9px;
  height:327px;
  background:url(/images/header3.jpg) no-repeat top center;
}

/*MOBILE TOP*/
@media screen and (max-width: 730px) {
.header {
  background-size:contain;
  /*height: 45vw;*/
  height: calc(100vw * 327 / 710); /*maintain aspect ratio*/
  margin-top:50px;
}}

/*PSEUDO-FLASH NAVIGATION BAR*/
.nav {
  max-width:710px;
  margin:auto;
  min-height:31px;
  background:url(/images/rainbowbar.png) no-repeat bottom center;
  background-size:100% 8px;
}
.nav a {
  width:142px;
  height:23px;
  display:inline-block;
}
.nav a:after {
  content:url('/images/navarrow.png');
  margin-left:115px;
  opacity:0;
}
.nav a:hover:after {
  content:url('/images/navarrow.png');
  margin-left:125px;
  opacity:100%;
}
.nav a {
  -webkit-transition: all 0.05s ease;
  -moz-transition: all 0.05s ease;
  transition: all 0.05s ease;
}
.nav a:after {
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.nav span {
  display:none; /*the text is there so other stylesheets can use the same html*/
}
#nav1 {
  background-image: url(/images/nav1a.png);
}
#nav1:hover {
  background-image: url(/images/nav1b.png);
}
#nav2 {
  background-image: url(/images/nav2a.png);
}
#nav2:hover {
  background-image: url(/images/nav2b.png);
}
#nav3 {
  background-image: url(/images/nav3a.png);
}
#nav3:hover {
  background-image: url(/images/nav3b.png);
}
#nav4 {
  background-image: url(/images/nav4a.png);
}
#nav4:hover {
  background-image: url(/images/nav4b.png);
}
#nav5 {
  background-image: url(/images/nav5a.png);
}
#nav5:hover {
  background-image: url(/images/nav5b.png);
}

/*MOBILE NAVIGATION BAR*/
@media screen and (max-width: 730px) {
.hidemenu {
  /*display:inline-block;
  color:#FFFAB6;*/
  cursor:pointer;
  position:absolute;
  top:5px;
  left:5px;
  font-size:200%;
}
.hidemenu:after {
  /*content: "☰";*/
  content:url('/images/mobilemenu.png'); /*mobile menu button, won't display if removed*/
}
.hidemenu:hover { 
  background:#303030;
}
.nav {
  min-height:8px;
}
.nav a {
  display:none;
}
.mobilenav { /*mobile menu in a seperate iframe*/
  position:absolute;
  top:50px;
  width:100%;
  height:100%;
  border:0;
}}

/*CONTENT*/
.breaddate {
  background-color:#444444;
  background:url(/images/breaddate.png);
  background-size: 100% 100%;
  max-width:624px;
  margin: auto;
  margin-top:4px;
  padding-top:3px;
  padding-bottom:3px;
  padding-left:6px;
  padding-right:6px;
  box-sizing:border-box; /*subtract padding from width*/
}
.bread {
  font-size: 95%;
  max-width:314px;
  float:left;
}
.date {
  font-size: 95%;
  max-width:314px;
  float:right;
  text-align:right;
}
.breaddate:after { /*oldschool column hack*/
  content: "";
  display: table;
  clear: both;
}
.main {
  max-width:624px;
  background-color:#141418;
  margin: auto;
  box-sizing:border-box; /*subtract padding from width*/
  border: 17px solid transparent;
  border-image: url("/images/bumper.png") 17 round;
}
.essay {
  font-size:106%;
  line-height: 1.36;
  padding-left:10px;
  padding-right:10px;
  hyphens:auto;
  text-align:justify;
}
.essay img, .center img {
  max-width:100%; /*shrink large images*/
}

/*BOTTOM*/
.nav2 {
  max-width:708px;
  margin:auto;
  color:grey;
  font-family: monospace;
  font-size:12px;
  text-align:center;
  letter-spacing:0.3em;
  text-transform:lowercase;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, transparent 0%, grey 50%, transparent 100%);
}
.nav2 a {
  color:lightgrey;
  text-decoration:none;
}
.nav2 a:hover {
  color:white;
}
.footer {
  color:grey;
  font-family:monospace;
  font-size:10px;
  letter-spacing:0.08em;
  text-align:center;
  margin-top:48px;
  margin-bottom: 41px;
}
.footer a {
  color:grey;
}
.footer:after {
  content:url('/images/footerbunny.png');
  margin-left:8px;
}

/*MOBILE BOTTOM*/
@media screen and (max-width: 515px) {
.nav2:not(a) {
  color:black;
  text-align:left;
}
.nav2 a {
  font-size:14.5px;
  letter-spacing:0.23em;
  border:1px solid #141418;
  background-color:#212123;
  border-radius:8px;
  display:inline-block;
  width:65%;
}
.nav2 a:first-of-type {
  color:#F79800;
}}