/* Global Reset ***********************************************/
html, body, h1, h2, h3, h4, h5, h6, form, fieldset, input, abbr,
img, table, object, iframe, a img,
#sidebar nav ul, #sidebar nav li, #archive ul,#archive ul li {
  border:0px;           /* old opera: units even for 0 values */
  border-collapse:collapse;
  font-weight:normal;
  list-style-type:none; /* old ie: list-style unsupported */
  margin:0px;
  padding:0px;
  vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, 
hgroup, main, menu, nav, section { display:block }

:root {
  --bg-color: #45191C;
  --color1: #861933;
  --darker-color1: #2F0D10;
  --color2: #84AB7A;
  --color3: #507858;
  --sub-color: #fef9dd;
  --default-width: 726px;
}

/* Palette ****************************************************/
html {
  background: var(--bg-color);
  color:#ffffff;
}

table th, a { color:var(--color2)}
a, a:hover, a:visited { 
  text-decoration:none
}
table tr { border-bottom:1px solid #fde9da }
input {
  background:#fef9dd;
  color:var(--darker-color1);
}
input[type=text] { line-height:2; }
input:focus { outline:none; }
.hide, .skip-link, .accessibility { display:none }

.skip-link {
  z-index: 999;
  position: absolute;
  opacity: 0;
  display: block;
  top: -100px;
}
.skip-link:focus {
  opacity:1;
  top:0px;
}

/* Top ********************************************************/
html {
  height:100%;        /* persistent vertical scrollbars */
  overflow-y:scroll;  /* persistent vertical scrollbars */
  text-align:center;  /* ie6: centering */
  font-size:14px;
  font-family:"Open Sans", "Helvetica Neue", "Source Sans Pro", Arial, "Liberation Sans", sans-serif;
}
body { text-align:left;  /* ie6: centering */ }
.wrapper, footer {
  margin:0px auto;
  width: var(--default-width);
}
.wrapper {
  padding:60px 0px 0px 0px;
}
footer {
  padding: 0px 0px 60px 0px;
}
h1 { 
  font-size:32px;
  line-height:28px;
   font-family: "Satisfy", cursive;
   font-weight: 400;
   font-style: normal;
   border-bottom: var(--color1) 5px solid;
   padding: 0px 0px 5px 5px;
   color:var(--sub-color);
}
h2 {
  padding:13px 0px;
  font-size:24px;
}
h3 {
  font-size:20px;
  padding-bottom:8px;
}
h2, h3 {
  /* margin-top:20px; */
  border-bottom:var(--color2) 1px solid;
}
a:hover { color: var(--color3); }
img { display:inline; /* mozilla: fix default behaviour */ }
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--color2);
  margin: 1em auto;
  padding: 0;
  width:80%;
}

/* header */

header .header {
   padding:13px 0px;
   text-align: center;
   margin:0px;
   font-size: 62px;
   line-height: 25px;
   margin-top: 50px;
   font-family: "Satisfy", cursive;
   font-weight: 400;
   font-style: normal;
}

/* navbar */

.site-navigation > div {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   width: 726px;
   position: relative;
   margin: 0 auto;
}
.site-navigation ul {
   display: flex;
   flex-wrap: wrap;
   border: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}
.site-navigation {
   background-color: var(--color1);
}
.site-navigation li:hover, .site-navigation li:active {
   background-color: var(--color2);
}
.site-navigation li.active {
   background-color: var(--darker-color1);
}
.site-navigation a {
   display: block;
   padding: 1em 2em;
   color: var(--sub-color);
}
.site-navigation a:active {
   color: var(--sub-color);
}

/* search bar */

.search input[type=search] {
  width: 2em;
  height: 2.125em;
  border-radius: 0.5em;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg fill=%27%23333%27%3E%3Cpath d=%27M4,13c0-5,4-9,9-9c5,0,9,4,9,9c0,5-4,9-9,9C8,22,4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z%27/%3E%3Cpath d=%27M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.75,2.25S25,28,25,28l-4.5-4.5L17.5,19z%27/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;
   background-size: 2em 2em;
   padding-right: 0;
   padding-left: 2em;
   transition: width 0.2s ease-in-out, border-color 0.2s ease-in-out;
   background-color: var(--sub-color);
   cursor: pointer;
}
.search {
   margin: auto 0;
   padding: 0;
   background: transparent;
}
.search input[type=search]:hover { background-color:white; }
.search input[type=search]:focus {
   width: 16em;
   padding-right: 0.1875em;
   background-color: white;
   cursor: auto;
}

/* article */

article {
   padding-top:100px;
}
article:first-child { padding-top:0px; }
article h1 a {
  text-decoration: none;
  background: #2F0D10;
  padding-right: 20px;
  display: inline-block;
}
time {
  color:var(--sub-color);
  /*letter-spacing: 1px;
  color:var(--sub-color);
  font-style: italic;*/
}
.post-bottom {
   /* background: var(--color1); */
   border-top:2px solid var(--color1);
   border-bottom:5px solid var(--color1);
   padding:10px 0px;
}
.post-bottom strong { padding-right: 6px; }

/* I need a media query for these */

.image {
  display: block;
  margin:0 auto;
  max-width: 600px;
}
.inline, .image {
  height: auto;
}
.inline {
  max-width: 300px;
  float: right;
  padding: 19px 0px 20px 20px;
}
.extrapad {
   /* margin-top:6px; */
}

/* pagination */

.paginator a, .paginator a:visited {
  display: inline-block;
  background-color: var(--sub-color);
  padding: 8px 12px;
  min-width: 60px;
  text-align: center;
}
.paginator a:first-child {
  margin-right: 6px;
}
.paginator a:nth-child(2) {
  float:right;
}
.paginator a:hover, .paginator a:active {
  background-color: var(--color2);
  color: var(--sub-color);
}

/* footer */
footer { margin-top:40px; }
footer p { margin:0px }
footer .pad {
   display: inline-block;
   padding-top: 6px;
}

/* other */

.highlight {
  color: var(--sub-color);
  padding: 15px;
  background-color: var(--color1);
}
.tophighlight {
  padding: 10px;
  text-align: center;
  border: 1px solid var(--sub-color);
  background-color: var(--color1);
}
.bottomhighlight {
  line-height:1.4em;
  padding: 15px;
  margin-top:25px;
  /* background-color: var(--color2); */
  background-color: var(--color1);
}
/* .bottomhighlight span { padding-right:6px; }
.bottomhighlight a, .bottomhighlight a:visited { color: var(--color1); }
.bottomhighlight a:active, .bottomhighlight a:hover { color: var(--darker-color1); } */


.search-results {
   padding:15px 0px;
}


@media screen and (max-width: 800px) {

:root {
  --default-width: 90%;
}
.site-navigation > div {
  width: 90%;
}
.search input[type=search]:focus, .search input[type=search]:active {
   width: 7em;
}
.image {
  max-width:95%;
}

}

@media screen and (max-width: 700px) {
  header .header {
     z-index: 1;
     position: relative;
  }
}

@media screen and (max-width: 500px) {

.site-navigation > div {
  width: 100%;
}
.site-navigation ul {
  /*display: block;*/
  width: 100%;
}
.site-navigation ul li {
  width: 50%;
  text-align: center;
}
.site-navigation ul li:first-child, .search  {
  display: none;
}
/*.search { padding: 8px 0px; }
.search input[type=search] {
  width: 16em;
  margin-left: 2em;
  padding-right: 0.1875em;
}
.search input[type=search]:focus {
   width: 16em;
   background-color: white;
   cursor: auto;
}*/
.inline {
  float: none;
  padding:0px;
  max-width: 95%;
  display: block;
  margin: 0 auto;
}

}