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,
    i,
    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 {
      margin: 0;
      padding: 0;
      border: 0;
      font: inherit;
      font-size: 100%;
      vertical-align: baseline;
    }

    html {
      line-height: 1;
    }

    ol,
    ul {
      list-style: none;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    caption,
    th,
    td {
      text-align: left;
      font-weight: normal;
      vertical-align: middle;
    }

    q,
    blockquote {
      quotes: none;
    }

    q:before,
    q:after,
    blockquote:before,
    blockquote:after {
      content: "";
      content: none;
    }

    a img {
      border: none;
    }

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    menu,
    nav,
    section,
    summary {
      display: block;
    }

    * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    html {
      font-size: 87.5%;
      line-height: 1.57143em;
    }

    html {
      font-size: 14px;
      line-height: 1.6em;
      -webkit-text-size-adjust: 100%;
    }

    body {
      background: #fcfcfc;
      color: #545454;
      text-rendering: optimizeLegibility;
      font-family: "AvenirNext-Regular";
    }

    a {
      color: #de4c4f;
      text-decoration: none;
    }

    h1 {
      font-family: "AvenirNext-Medium";
      color: #333;
      font-size: 1.6em;
      line-height: 1.3em;
      margin-bottom: 0.78571em;
    }

    h2 {
      font-family: "AvenirNext-Medium";
      color: #333;
      font-size: 1.3em;
      line-height: 1em;
      margin-bottom: 0.62857em;
    }

    h3 {
      font-family: "AvenirNext-Medium";
      color: #333;
      font-size: 1.15em;
      line-height: 1em;
      margin-bottom: 0.47143em;
    }

    p {
      margin-bottom: 1.57143em;
      hyphens: auto;
    }

    hr {
      height: 1px;
      border: 0;
      background-color: #dedede;
      margin: -1px auto 1.57143em auto;
    }

    ul,
    ol {
      margin-bottom: 0.31429em;
    }

    ul ul,
    ul ol,
    ol ul,
    ol ol {
      margin-bottom: 0px;
    }

    ol {
      counter-reset: ol_counter;
    }

    ol li:before {
      content: counter(ol_counter) ".";
      counter-increment: ol_counter;
      color: #e06e73;
      text-align: right;
      display: inline-block;
      min-width: 1em;
      margin-right: 0.5em;
    }

    b,
    strong {
      font-family: "AvenirNext-Bold";
    }

    i,
    em {
      font-family: "AvenirNext-Italic";
    }

    code {
      font-family: "Menlo-Regular";
    }

    .text-overflow-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sf_code_string,
    .sf_code_selector,
    .sf_code_attr-name,
    .sf_code_char,
    .sf_code_builtin,
    .sf_code_inserted {
      color: #d33905;
    }

    .sf_code_comment,
    .sf_code_prolog,
    .sf_code_doctype,
    .sf_code_cdata {
      color: #838383;
    }

    .sf_code_number,
    .sf_code_boolean {
      color: #0e73a2;
    }

    .sf_code_keyword,
    .sf_code_atrule,
    .sf_code_rule,
    .sf_code_attr-value,
    .sf_code_function,
    .sf_code_class-name,
    .sf_code_class,
    .sf_code_regex,
    .sf_code_important,
    .sf_code_variable,
    .sf_code_interpolation {
      color: #0e73a2;
    }

    .sf_code_property,
    .sf_code_tag,
    .sf_code_constant,
    .sf_code_symbol,
    .sf_code_deleted {
      color: #1b00ce;
    }

    .sf_code_macro,
    .sf_code_entity,
    .sf_code_operator,
    .sf_code_url {
      color: #920448;
    }

    .note-wrapper {
      max-width: 46em;
      margin: 0px auto;
      padding: 1.57143em 3.14286em;
    }

    .note-wrapper.spotlight-preview {
      overflow-x: hidden;
    }

    u {
      text-decoration: none;
      background-image: linear-gradient(to bottom,
          rgba(0, 0, 0, 0) 50%,
          #e06e73 50%);
      background-repeat: repeat-x;
      background-size: 2px 2px;
      background-position: 0 1.05em;
    }

    s {
      color: #878787;
    }

    p {
      margin-bottom: 0.1em;
    }

    hr {
      margin-bottom: 0.7em;
      margin-top: 0.7em;
    }

    ul li {
      text-indent: -0.35em;
    }

    ul li:before {
      content: "•";
      color: #e06e73;
      display: inline-block;
      margin-right: 0.3em;
    }

    ul ul {
      margin-left: 1.25714em;
    }

    ol li {
      text-indent: -1.45em;
    }

    ol ol {
      margin-left: 1.25714em;
    }

    blockquote {
      display: block;
      margin-left: -1em;
      padding-left: 0.8em;
      border-left: 0.2em solid #e06e73;
    }

    .todo-list ul {
      margin-left: 1.88571em;
    }

    .todo-list li {
      text-indent: -1.75em;
    }

    .todo-list li:before {
      content: "";
      display: static;
      margin-right: 0px;
    }

    .todo-checkbox {
      text-indent: -1.7em;
    }

    .todo-checkbox svg {
      margin-right: 0.3em;
      position: relative;
      top: 0.2em;
    }

    .todo-checkbox svg #check {
      display: none;
    }

    .todo-checkbox.todo-checked #check {
      display: inline;
    }

    .todo-checkbox.todo-checked+.todo-text {
      text-decoration: line-through;
      color: #878787;
    }

    .code-inline {
      display: inline;
      background: white;
      border: solid 1px #dedede;
      padding: 0.2em 0.5em;
      font-size: 0.9em;
    }

    .code-multiline {
      display: block;
      background: white;
      border: solid 1px #dedede;
      padding: 0.7em 1em;
      font-size: 0.9em;
      overflow-x: auto;
    }

    .hashtag {
      display: inline-block;
      color: white;
      background: #b8bfc2;
      padding: 0em 0.5em;
      border-radius: 1em;
      text-indent: 0;
    }

    .hashtag a {
      color: #fff;
    }

    .address a {
      color: #545454;
      background-image: linear-gradient(to bottom,
          rgba(0, 0, 0, 0) 50%,
          #0da35e 50%);
      background-repeat: repeat-x;
      background-size: 2px 2px;
      background-position: 0 1.05em;
    }

    .address svg {
      position: relative;
      top: 0.2em;
      display: inline-block;
      margin-right: 0.2em;
    }

    .color-preview {
      display: inline-block;
      width: 1em;
      height: 1em;
      border: solid 1px rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      margin-right: 0.1em;
      position: relative;
      top: 0.2em;
      white-space: nowrap;
    }

    .color-code {
      margin-right: 0.2em;
      font-family: "Menlo-Regular";
      font-size: 0.9em;
    }

    .color-hash {
      opacity: 0.4;
    }

    .ordered-list-number {
      color: #e06e73;
      text-align: right;
      display: inline-block;
      min-width: 1em;
    }

    .arrow svg {
      position: relative;
      top: 0.08em;
      display: inline-block;
      margin-right: 0.15em;
      margin-left: 0.15em;
    }

    .arrow svg #rod {
      stroke: #545454;
    }

    .arrow svg #point {
      fill: #545454;
    }

    mark {
      color: inherit;
      display: inline;
      padding: 0.2em 0.5em;
      background-color: #fcffc0;
    }

    img {
      max-width: 100%;
      height: auto;
    }