/*---------------
reset
---------------*/
:root {
  font-size: 62.5%; /* 1rem = 10px */
}
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body, blockquote, figure, footer, h1, h2, header, ol, li, p, ul {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: underline;
}


/*---------------
general
---------------*/
body {
  background: #fff;
  color: #111;
  font: 300 1.7rem/3rem 'Merriweather', serif; /* 1em = 17px, line-height = 30px */
}
blockquote, figure, footer, h1, h2, header, ol, p, ul {
  margin: 3rem auto;
}
li {
  list-style-type: circle;
  margin-left: 3rem;
}
img,
video {
  border: 0;
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}
code {
  background: rgb(254, 238, 255);
  border-radius: 1px;
  color: #222;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: .9em; /* change this to rem */
  padding: .15em .3em .1em;
}
q {
  font-style: italic;
  quotes: "\201C" "\201D" "\2018" "\2019";
}


/*---------------
structure
---------------*/
nav {
  margin: 3.9rem 1% 4.1rem;
  text-align: center;
  transition: margin .25s;
}
main {
  margin: 0 1% 1%;
}


/*---------------
small screens
---------------*/
@media (max-width: 700px) {
  nav {
    margin: 3.4rem 6% 3.6rem;
  }
  main {
    margin: 0 2% 2%;
  }
  blockquote, figure, footer, h1, h2, header, ol, p, ul {
    margin: 2.5rem auto;
  }
}


/*---------------
font - merriweather-300 - latin
---------------*/
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  src: local('Merriweather Light'), local('Merriweather-Light'),
       url('../fonts/merriweather-v21-latin-300.woff2') format('woff2'), /* Everything but IE */
       url('../fonts/merriweather-v21-latin-300.woff') format('woff'); /* IE */
}
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300;
  src: local('Merriweather Light Italic'), local('Merriweather-LightItalic'),
       url('../fonts/merriweather-v21-latin-300italic.woff2') format('woff2'), /* Everything but IE */
       url('../fonts/merriweather-v21-latin-300italic.woff') format('woff'); /* IE */
}