@import "variables";

@font-face {
  font-family: 'Avenir';
  src: url('/fonts/avenir-medium-webfont.woff') format('woff');
}

* {
  box-sizing: border-box;
}

html {
  padding: 1em;
}

.root {
  margin: 0 auto;
  padding-top: 8em;
  font-family: Avenir, Helvetica, sans-serif;
  background-attachment: fixed;
  background-image: url(/images/background.png);
  background-color: @offwhite;
}

@media (min-width: 48em) {
  .root {
    padding-top: 4em;
    max-width: 768px;
  }
}

.unread-icon {
  position: relative;
  margin-left: 0.5em;
  opacity: 0;
  color: @highlight;
}
.is-unread .unread-icon {
  opacity: 1;
}

.is-hidden {
  display: none;
}