/* LAYOUT: */ 
/* 1. BACKGROUND */
/* 2. BODY (contains left nav) */
/* 3. FOOTER */
html {
  background: #26150d;
}

body { 
  background: white;
  color: rgb(0, 0, 0);
  font: 16px "Lucida Grande", Helvetica, Arial, sans-serif;

  /* inspired by julia evans */
  margin: 0 auto;
  position: relative;
  height: auto;

  /* body extends down fully */
  min-height: 100vh;
  /* needed for footer to be at bottom */
  display: flex;
  flex-direction: column;
}

main {
  padding: 0 20px;
  /* padding: 0 5%; */
}

footer {
  padding-bottom: 10px;
  text-align: center;

  /* keep footer at bottom of page: */ 
  /* https://dev.to/inezabonte/how-to-make-footer-stay-at-the-bottom-298b */
  margin-top: auto;
}

/* Non-mobile Settings: */
/* - put width to 70% */
/* - put left-nav in upper left. otherwise, goes on bottom (todo: refine. works for now though.) */
@media all and (min-width:1000px) {
  body { width: 70% }
  /* max-width: 60em; */
  .left-nav {
    position:absolute;
    top:15px;
    left:2px;
  }
  main { margin-left:215px; }
}
/* mobile settings. ideally don't need this. */
@media all and (max-width:1000px) {
  img { width: 70% } /* roughly works. mobile images should be smaller. */
}

a:link, a:visited {
  text-decoration: none;
  color: dodgerblue;
}
a:hover, a:active {
  background-color: pink;
}

/* still tweaking. but long lines feel bad on desktop view (>1000px or so).*/
main { max-width: 800px }

img {
  max-width: 100%;
  height: auto;
  box-shadow:3px 3px 8px 4px silver;
}
iframe[src*="www.youtube.com/"] {
  max-width: 100%;
  max-height: 95vh;
}

section { padding:6px;margin:6px;border:solid 1px black;border-radius:16px;}

blockquote {
  border-left:solid 2px grey;
  padding-left:8px;
  margin-left:16px;

  color: gray;
}

.essay {
  figcaption {
    font-size: 0.8rem;
    color: grey;
  }
}

.nav-panel {
  width:200px;
  border:solid 2px grey;
  border-bottom:solid 5px grey;
  margin-top:5px;
  padding-bottom:40px;
  padding-left:4px;
  border-radius:16px;
  font-size: 1.1em;
}
.nav-panel > ul, .nav-panel > ol { margin-left:-16px;}
.nav-panel > ul > li { margin-left:-16px;margin-bottom:10px;list-style-type:none;border-top:solid thin grey;}
.nav-panel ul > li > a { display:inline-block;vertical-align:top;}
.nav-panel h3, .nav-panel h3 > a{ color: red; }

.back-button > a {
  font-size: 0.9rem;
  color: darkred; 
}

.tagline {
  font-size: 1.2rem;
  color: darkred;
}

.byline {
  font-size: 0.8rem;
}

span.xsignet { font-family:Arial, sans-serif;font-size:3rem;color:red;}
span.xsignetmax { font-family:Arial, sans-serif;font-size:2rem;color:red;}