@import url('https://fonts.googleapis.com/css?family=Della+Respira');
@import url('https://fonts.googleapis.com/css?family=Amarante');
@import url('https://fonts.googleapis.com/css?family=Glass+Antiqua');

body {
  font-family: 'Della Respira', serif;
  background: #F8E3D1;
  text-align: center;
  color: #9B5725;
  max-width: 42em;
  margin: 2em auto;
}

h1, h2, h3 { font-family: 'Amarante', cursive; }
h3 { display: inline; }
a h3 { color: #995522; }
a { text-decoration: none; }
a:hover { text-decoration: underline;; }

.content { width: 90%; min-width: 320px; margin: auto; }
.menu a { text-decoration: underline; }
#transcript, ul { text-align: left; }
#wrapper { margin: auto; width: 290px; }
#audio { margin: 1em 0; padding: 0; width: 100%; }
#playlist { margin: 0 0 1em 0; padding: 0; }
#playlist li { margin-left: 0.5em }
#playlist li.active a { background-color: #9B5725; color: #F8E3D1 }

.glass { font-family: 'Glass Antiqua', cursive; font-weight: normal; }
.footer, .info { font-size: 90%; font-style: italic; }
.footer { text-align: right; border-top: 1px solid #9B5725; margin-top: 2em; }
hr { width: 75%; border: 1px inset #9B5725; }

.nm { margin: 0.5em 0; }
h1 a, #playlist a { text-decoration: none; }

a:visited { color: #660000; }
a:hover { color: #C88D41; }
a { color: #440000; }

img.host_photo { max-height: 200px }