html {
font:100% /1.15 serif;
}


body {
max-width: 60rem;
padding: 0 1em 0 1em;
margin-left: auto;
margin-right: auto;
}

/*font*/
body{
  font-family: times, serif;
  padding: 0 3.5%;
  padding: 1.2rem;
  margin: 0 auto;
}



h1{
  font-family: Didot, serif;
  margin-top: .25em;
  margin-bottom: .05em;
  font-size: 4em;
  color: #9A2A12;
}

h2{
  font-family: Didot, serif;
  margin-top: .75em;
  margin-bottom: .55em;
  font-size: 1.75em;
  color: #9A2A12;
}

h3{
  font-family: Roboto Slab, serif;
  font-size: 1.25em;
  color: #498A08;
}

h4{
  font-family: Didot, serif;
  margin-top: 1em;
  margin-bottom: .55em;
  font-size: 1.75em;
  color: #9A2A12;
}

h5{
  font-family: Roboto Slab, serif;
  font-size: 1.25em;
  color: #498A08;
}

h6{
  font-family: Didot, serif;
  margin-top: 1em;
  margin-bottom: .75em;
  font-size: 1.75em;
  color: #9A2A12;
}



/* links */
a {
  color:#498A08;
}
a:hover {
  color: #CAC548;
}
a:focus,
a:active{
  color:#9A2A12;
}


/* typographic details */
  p {
    font-size: 1em;
    line-height: 1.25; /*unitless, please */
  }
  p.byline {
    display: inline;
    font-weight: bold;
  }

  /* ---responsive images */
  img {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  /* hero figure image */
  figure.hero {
    margin:1em -1em;
  }

  figure.hero figcaption {
    margin: 0em .5em;
  }

  .headshot {
  width: 6em;
  height: 6em;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 1em;
}

main,
nav,
section {
  padding-top: 1rem;
}


/* lists */
dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
}

dd {
  margin-left: 0;
}

dl {
  color: #9A2A12;
}

ol,
ul {
  padding-left: 1.4em;
}

li {
  margin-top: .5em;
}

dl {
  margin-top: .5em;
  margin-bottom: .5em;
}

/* navigation / menu */

nav {
  padding: 1rem;
  border: 1px solid #000;
  margin-top: 1rem;
}

nav ul {
  list-style: none;
  padding-left:0;
}


nav li, p {
  margin-top: 1em;
  list-style: none;
  padding-left: 1em;
  line-height: 1.25;
}


nav li:first-child {
  margin-top:0;
}

/* text details*/

.fractions{
  font-size: 100%;
  font-family: sans-serif;
  line-height: 1;
  vertical-align: middle;
}

mark{
  background-color: #cfc;
}

/* recipe lists*/

.info dt{
  margin-top: 1rem;
}

.info dd {
  margin-top: .5rem;
}

.list {
  list-style-position: inside;
  padding-left: 0;
  border-top: 1px dashed #000;
  border-bottom: 1px dashed #000;
}

.list li {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px dashed #000;
}

.list li:first-child{
  border-top:0;
}

/* breakpoint for wider width layout*/
@media (min-width: 60em) {

  body {
    font-size: 125%;
  }