/* —————————————————— RESET CODE —————————————————— */

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  /*sup,*/
  tt,
  var,
  b,
  u,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video,
  button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  @font-face {
    font-family: Dejavu Serif;
    src: url(DejaVuSerif.ttf);
    font-style: normal;
  }

  @font-face {
    font-family: Dejavu Serif;
    src: url(DejaVuSerif-Italic.ttf);
    font-style: italic;
  }

  body {
    font-size: 15px;
    font-family: Dejavu serif;
    letter-spacing: 0.02em;
    line-height: 22px;
    background-color: #ffffe6;
  }

  h1 {
    margin-bottom: 22px;
  }

  h2 {
    font-size: 12px;
  }

  strong {
    font-size: 12px;
  }

  p {
    margin-bottom: 22px;
  }

  img {
    width: 100%;
  }

  /*
  .image--default {
    width: calc(100% - 120px);
    padding: 22px 60px 22px 60px;
  }
*/
  figure {
    width: calc(100% - 120px);
    padding: 22px 60px 22px 60px;
  }

  figcaption {
    font-size: 12px;
  }

  .image--narrow {
    width: calc(50% - 60px);
    padding: 22px 60px 22px 60px;
  }

  blockquote {
    width: calc(100% - 120px);
    margin: 0px 60px 0px 60px;
    padding: 22px 0px 22px 0px;
    font-size: 18px;
    line-height: 26px;
  }

  a {
    text-decoration: none;
    color: #4e2ec4;
  }

  a:hover {
    color: #000000;
  }

  .year {
    display: inline-grid;
    font-size: 12px;
    width: 40px;
  }



  .desc {
    font-size: 12px;
  }

  a .year {
    font-size: 12px;
    opacity: 0;
    width: 40px;
  }

  a .desc {
    font-size: 12px;
    display: none;
  }

  a:hover .year {
    opacity: 1;
  }

  a:hover .desc {
    display: inline;
  }

  .meta {
    margin-left: 40px;
  }


  #nav {
    display: block;
    padding: 22px 0px 4px 0px;
    background-color: #ffffe6;
    position: sticky;
    top: 0px;
  }

  .projects {
    margin-bottom: 50px;
  }

  .projtitle {
    display: block;
    position: sticky;
    top: 66px;
    background-color: #ffffe6;
  }

  #pgcontainer {
    width: 80%;
    padding: 0px 0px 100px 0px;
    margin: 0px 10% 0px 10%;
    min-height: calc(100vh - 160px);
  }

  #projcontainer {
    padding: 22px 40px 0px 40px;
    width: calc(100% - 80px);
  }

  #footer {
    width: 80%;
    padding: 0px 60px 40px 40px;
    margin: 0px 10% 0px 10%;
    font-size: 8px;
  }

  /* LESS THAN 1200 width */

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

    #pgcontainer {
      width: 92%;
      margin: 0px 4% 0px 4%;
    }

    #footer {
      width: 92%;
      margin: 0px 4% 0px 4%;
    }
  }

  /* LESS THAN 700 width */

  @media only screen and (max-width: 700px) {
    #pgcontainer {
      width: 94%;
      padding: 0px 0px 100px 0px;
      margin: 0px 3% 0px 3%;
    }

    #footer {
      width: 94%;
      margin: 0px 3% 0px 3%;
    }

    a .year {
      display: inline-block;
      font-size: 12px;
      opacity: 0.5;
    }

    a .desc {
      display: inline;
      font-size: 12px;
      opacity: 0.5;
    }


    #projcontainer {
      padding: 22px 0px 0px 0px;
      width: calc(100% - 0px);
    }

    .image {
      width: calc(100% - 0px);
      padding: 22px 0px 22px 0px;
    }

    .blockquote {
      display: block;
      width: calc(100% - 80px);
      padding: 0px 40px 0px 40px;
      border-bottom: 1px solid black;
      background-color: yellow;
    }

    #nav {
      position: relative;
    }

    .projtitle {
      position: relative;
      top: 0px;
    }


    .projects {
      margin-bottom: 200px;
    }

  }