/* todo - pick the serif font we actually want, and serve the assets */
/*
--------------------------------------------------------------------------------
  Fonts
--------------------------------------------------------------------------------
*/
body {
  font-size: 16px; }

body, button, input {
  font-family: Lato, sans-serif; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Fira Sans Condensed", sans-serif; }

h1 {
  text-align: center;
  margin-bottom: 40px; }
  @media (min-width: 760px) {
    h1 {
      margin-bottom: 50px; } }

h2 {
  padding: 0 0.5em;
  margin: 0.8em -0.5em;
  line-height: 0.95em;
  border-bottom: 2px solid #518f51;
  line-height: 1.4em;
  font-size: 24px; }

strong {
  font-weight: bold; }

em {
  font-style: italic; }

/*
--------------------------------------------------------------------------------
  Selection and focus
--------------------------------------------------------------------------------
*/
#middle ::selection {
  background: #b4d5fe; }

:focus {
  outline: 2px solid orange; }

/*
--------------------------------------------------------------------------------
  Lists
--------------------------------------------------------------------------------
*/
li {
  margin-top: 5px;
  margin-bottom: 5px; }

/*
--------------------------------------------------------------------------------
  Layout
--------------------------------------------------------------------------------
*/
/* This ensures that a horizontal scrollbar never appears on the page, because it looks really bad. */
html, body {
  overflow-x: hidden; }

/* This forces the document to expand vertically to the entire view height so that the footer background color covers any remaining vertical space. */
html, body {
  min-height: 100%; }

body {
  margin: 0;
  padding: 0;
  background-color: #fcf9f4; }

.container {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 960px; }

/*
--------------------------------------------------------------------------------
  Links
--------------------------------------------------------------------------------
*/
a {
  color: #518f51;
  text-decoration: none;
  transition: color 0.1s linear; }
  a:hover {
    color: #355e35; }

/*
--------------------------------------------------------------------------------
  Smart underline
--------------------------------------------------------------------------------
*/
/* "Smart underline" from tufte-css https://github.com/edwardtufte/tufte-css/blob/59c69cf5d3407e2debf5c26724e4676601b9cccc/tufte.css#L148-L167 */
/*
--------------------------------------------------------------------------------
  Buttons
--------------------------------------------------------------------------------
*/
button, a.buttonlike {
  background-color: #e06d06;
  color: white;
  padding: 6px 18px;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.1s linear; }
  button:hover, a.buttonlike:hover {
    background-color: #f98720; }

a.buttonlike {
  display: inline-block; }

/*
--------------------------------------------------------------------------------
  Form inputs
--------------------------------------------------------------------------------
*/
input {
  border: 1px solid #c0c0c0;
  font-size: 18px;
  padding: 10px; }

/*
--------------------------------------------------------------------------------
  Log out form
--------------------------------------------------------------------------------
*/
#log-out-form {
  display: none; }

/*
--------------------------------------------------------------------------------
  Top
--------------------------------------------------------------------------------
*/
#top {
  background-color: #00004c;
  color: white;
  white-space: nowrap;
  /* Add a shadow, and set position:relative so that the shadow can appear on top of subsequent elements. */
  box-shadow: 0px -21px 10px 20px #000000;
  position: relative; }
  #top .container {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; }
  #top .site-title .smol {
    font-size: 24px;
    font-variant: small-caps; }
    #top .site-title .smol img {
      height: 24px; }
  #top .site-title .large {
    max-width: 400px;
    display: none; }
  #top .site-title a {
    display: inline-block;
    color: white;
    text-decoration: none;
    margin-left: 20px; }
  #top .links {
    display: flex;
    flex-direction: row;
    align-items: center; }
    #top .links a {
      text-decoration: none;
      border-radius: 5px;
      font-size: 20px;
      padding: 0 5px;
      margin: 10px 15px;
      transition: color 0.1s linear;
      color: #aab5d2; }
    #top .links a.emphasis {
      color: white; }
      #top .links a.emphasis:link {
        text-decoration: none;
        background: -webkit-linear-gradient(#00004c, #00004c), -webkit-linear-gradient(#00004c, #00004c), -webkit-linear-gradient(white, white);
        background: linear-gradient(#00004c, #00004c), linear-gradient(#00004c, #00004c), linear-gradient(white, white);
        -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
        -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
        background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
        background-repeat: no-repeat, no-repeat, repeat-x;
        text-shadow: 0.03em 0 #00004c, -0.03em 0 #00004c, 0 0.03em #00004c, 0 -0.03em #00004c, 0.06em 0 #00004c, -0.06em 0 #00004c, 0.09em 0 #00004c, -0.09em 0 #00004c, 0.12em 0 #00004c, -0.12em 0 #00004c, 0.15em 0 #00004c, -0.15em 0 #00004c;
        background-position: 0% 97%, 100% 97%, 0% 97%; }
        @media screen and (-webkit-min-device-pixel-ratio: 0) {
          #top .links a.emphasis:link {
            background-position-y: 87%, 87%, 97%; } }
        #top .links a.emphasis:link:link::selection, #top .links a.emphasis:link:link::-moz-selection {
          text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
          background: #b4d5fe; }
    #top .links a:hover {
      color: #faa152; }
  #top .name {
    margin-left: 0.5em; }
  @media (max-width: 400px) {
    #top .links a {
      margin: 10px 8px;
      padding: 0 2px; }
    #top .name {
      display: none; } }
  @media (min-width: 760px) {
    #top .container {
      padding: 0 16px; }
    #top .site-title {
      text-align: left; }
      #top .site-title .smol {
        display: none; }
      #top .site-title .large {
        display: inline-block; }
      #top .site-title a {
        margin: 0; }
    #top .links a {
      margin: 0 25px; } }

/*
--------------------------------------------------------------------------------
  Bottom
--------------------------------------------------------------------------------
*/
#bottom {
  color: white;
  padding: 20px 0;
  background-color: #518f51;
  box-shadow: 0 50vh 0 50vh #518f51;
  min-height: 80px;
  text-align: center;
  clear: both; }
  #bottom a {
    color: white;
    text-decoration: none;
    transition: color 0.1s linear; }
    #bottom a:hover {
      color: #faa152; }
  #bottom .cols {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    max-width: 600px;
    margin: 0 auto; }
  #bottom .col {
    max-width: 45%;
    vertical-align: top;
    text-align: left; }
    #bottom .col .col-header {
      font-family: "Fira Sans Condensed", sans-serif;
      font-size: 18px;
      padding: 10px 0; }
    #bottom .col a {
      display: block;
      padding: 5px 20px;
      border-radius: 5px; }
  #bottom .social-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 1em 0; }
    #bottom .social-links a {
      display: block;
      padding: 0 1em; }

/*
--------------------------------------------------------------------------------
  Breadcrumbs
--------------------------------------------------------------------------------
*/
#breadcrumbs {
  color: #333; }
  #breadcrumbs .container {
    padding-top: 20px; }
  #breadcrumbs ul {
    list-style-type: none;
    margin: 0;
    padding: 0 1em 1em;
    background-color: #fcf9f4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; }
    @media (min-width: 760px) {
      #breadcrumbs ul {
        overflow: auto;
        white-space: normal;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        padding-top: 0.5em;
        padding-bottom: 0.6em; } }
  #breadcrumbs li {
    display: none; }
    @media (min-width: 760px) {
      #breadcrumbs li {
        display: inline; } }
  #breadcrumbs li:nth-last-child(2),
  #breadcrumbs li:nth-last-child(3) {
    display: inline; }
  #breadcrumbs li:last-child {
    display: none; }
    @media (min-width: 760px) {
      #breadcrumbs li:last-child {
        display: inline; } }
  #breadcrumbs li:not(:last-child):not(:nth-last-child(2)):after {
    content: '\25b6';
    font-size: 9px;
    display: inline-block;
    padding-left: 0.5em;
    padding-right: 0.3em;
    font-weight: bold;
    opacity: 0.8;
    position: relative;
    top: -1px; }
  @media (min-width: 760px) {
    #breadcrumbs li:not(:last-child):after {
      content: '\25b6';
      font-size: 9px;
      display: inline-block;
      padding-left: 0.5em;
      padding-right: 0.3em;
      font-weight: bold;
      opacity: 0.8;
      position: relative;
      top: -1px; } }
  #breadcrumbs a {
    color: #333; }
    #breadcrumbs a:link {
      text-decoration: none;
      background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#333, #333);
      background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#333, #333);
      -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
      background-repeat: no-repeat, no-repeat, repeat-x;
      text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
      background-position: 0% 93%, 100% 93%, 0% 93%; }
      @media screen and (-webkit-min-device-pixel-ratio: 0) {
        #breadcrumbs a:link {
          background-position-y: 87%, 87%, 93%; } }
      #breadcrumbs a:link:link::selection, #breadcrumbs a:link:link::-moz-selection {
        text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
        background: #b4d5fe; }

/*
--------------------------------------------------------------------------------
  Code
--------------------------------------------------------------------------------
*/
code {
  white-space: nowrap; }
  code:before, code:after {
    content: '\00a0';
    letter-spacing: -0.4em; }

pre code {
  white-space: pre; }

pre.sourceCode,
pre.repl {
  display: inline-block;
  vertical-align: middle;
  padding: 0 10px;
  background-color: rgba(81, 143, 81, 0.1);
  overflow-wrap: break-word;
  border-radius: 2px;
  overflow-x: auto;
  line-height: 1.5em;
  max-width: 100%; }
  @media (min-width: 760px) {
    pre.sourceCode,
    pre.repl {
      margin: 10px; } }
  pre.sourceCode code,
  pre.repl code {
    white-space: pre;
    display: inline-block;
    padding: 10px;
    background: none; }
    pre.sourceCode code:before, pre.sourceCode code:after,
    pre.repl code:before,
    pre.repl code:after {
      display: none; }
  pre.sourceCode.wrap, pre.sourceCode.wrap a,
  pre.repl.wrap,
  pre.repl.wrap a {
    white-space: pre-wrap; }
  pre.sourceCode.numberSource,
  pre.repl.numberSource {
    display: block;
    padding: 0; }
    pre.sourceCode.numberSource .sourceLine::before,
    pre.repl.numberSource .sourceLine::before {
      content: attr(data-line-number);
      text-align: right;
      width: 35px;
      border-right: 2px solid rgba(81, 143, 81, 0.9);
      padding-right: 10px;
      margin-right: 10px;
      color: rgba(81, 143, 81, 0.5);
      display: none; }
      @media (min-width: 760px) {
        pre.sourceCode.numberSource .sourceLine::before,
        pre.repl.numberSource .sourceLine::before {
          display: inline-block; } }
  pre.sourceCode a,
  pre.repl a {
    color: black;
    text-decoration: none; }

/*
--------------------------------------------------------------------------------
  Haskell syntax highlighting
--------------------------------------------------------------------------------
*/
/* Keywords */
.haskell .kw,
.python .kw,
.python .im {
  font-weight: bold;
  color: #00004c; }

/* Comments */
.haskell .co,
.python .co {
  color: #2c4e2c; }

.haskell .fu {
  color: #3f6e3f; }

/*
--------------------------------------------------------------------------------
  Content body
--------------------------------------------------------------------------------
*/
#content-body {
  padding-top: 20px; }
  @media (min-width: 760px) {
    #content-body {
      padding-top: 100px; } }

.paid #content-body {
  padding-bottom: 50px; }

/*
--------------------------------------------------------------------------------
  Tufte-style prose with margin notes
--------------------------------------------------------------------------------

  Based on https://edwardtufte.github.io/tufte-css/

*/
body {
  counter-reset: sidenote-counter; }

.tufte {
  font-family: "PT Serif", serif;
  font-size: 16px;
  /* The margin-toggle label is the thing you click on to show/hide a note. */
  /* The margin-toggle checkbox is invisible. */
  /* When the corresponding checkbox is checked, we show the note. */
  /* Each time a sidenote mark occurs, increment the counter. */
  /* Display the sidenote number in the text automatically using the CSS counter. */
  /* Also display the sidenote number next to the note content. */
  /* Display horizontal rules as three dots instead of a line. */ }
  .tufte p code, .tufte ul code, .tufte ol code, .tufte table code {
    font-size: 14px;
    background-color: #eaefe3;
    border-radius: 2px; }
  .tufte table {
    border-collapse: collapse;
    width: 100%;
    margin: 2em; }
  .tufte td, .tufte th {
    padding: 0.4em 0.5em;
    vertical-align: top; }
    .tufte td code, .tufte th code {
      background: none; }
  .tufte a:link, .tufte a:visited {
    color: inherit; }
  .tufte a:link {
    text-decoration: none;
    background: -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#fcf9f4, #fcf9f4), -webkit-linear-gradient(#333, #333);
    background: linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#fcf9f4, #fcf9f4), linear-gradient(#333, #333);
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: 0.03em 0 #fcf9f4, -0.03em 0 #fcf9f4, 0 0.03em #fcf9f4, 0 -0.03em #fcf9f4, 0.06em 0 #fcf9f4, -0.06em 0 #fcf9f4, 0.09em 0 #fcf9f4, -0.09em 0 #fcf9f4, 0.12em 0 #fcf9f4, -0.12em 0 #fcf9f4, 0.15em 0 #fcf9f4, -0.15em 0 #fcf9f4;
    background-position: 0% 93%, 100% 93%, 0% 93%; }
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      .tufte a:link {
        background-position-y: 87%, 87%, 93%; } }
    .tufte a:link:link::selection, .tufte a:link:link::-moz-selection {
      text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
      background: #b4d5fe; }
  .tufte a code {
    background: none; }
  .tufte a.external:after {
    font: normal normal normal 9px/1 FontAwesome;
    content: "\00a0\00a0\f08e";
    font-weight: bold; }
  .tufte .course-nav {
    text-align: center;
    margin-top: 2em;
    font-family: Lato, sans-serif; }
    .tufte .course-nav a.next {
      background: #e06d06;
      color: white;
      padding: 8px 30px;
      border-width: 1px;
      border-style: solid;
      border-radius: 5px;
      cursor: pointer;
      font-size: 18px;
      text-shadow: none;
      transition: background-color 0.1s linear;
      display: inline-block; }
      .tufte .course-nav a.next:hover {
        background-color: #f98720; }
  .tufte pre, .tufte pre code {
    font-size: 15px; }
  .tufte h1 code, .tufte h2 code, .tufte h3 code, .tufte h4 code, .tufte h5 code, .tufte h6 code {
    font-size: inherit; }
  .tufte section {
    position: relative; }
  .tufte section.level2 {
    padding: 25px 0; }
  .tufte p, .tufte .marginnote, .tufte .sidenote {
    vertical-align: baseline; }
  .tufte ul, .tufte ol {
    box-sizing: border-box; }
  .tufte .inline-block {
    display: inline-block; }
  .tufte blockquote {
    border-left: 1px solid black;
    margin-left: 0.5em;
    padding-left: 0.5em; }
  .tufte label.margin-toggle {
    cursor: pointer;
    color: #518f51; }
  .tufte input.margin-toggle {
    display: none; }
  .tufte .sidenote, .tufte .marginnote {
    /* On mobile, the content of the notes is hidden at first. */
    display: none;
    /* Float the note so it can appears between lines in a paragraph. */
    float: left;
    clear: both;
    left: 1rem;
    width: 95%;
    margin: 1rem 2.5%;
    position: relative; }
  .tufte img {
    max-width: 100%;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2); }
  .tufte .margin-toggle:checked + .sidenote,
  .tufte .margin-toggle:checked + .marginnote {
    display: block; }
  .tufte .sidenote-number {
    counter-increment: sidenote-counter; }
  .tufte .sidenote-number:after {
    content: counter(sidenote-counter); }
  .tufte .sidenote:before {
    content: counter(sidenote-counter) " "; }
  .tufte .sidenote-number:after,
  .tufte .sidenote:before {
    position: relative;
    top: -0.4rem;
    vertical-align: baseline;
    font-size: 10px;
    font-family: Lato, sans-serif;
    font-weight: bold;
    opacity: 0.8; }
  .tufte hr {
    opacity: 0.2;
    text-align: center;
    margin: 2em 0;
    letter-spacing: 1em;
    border: 0; }
    .tufte hr:after {
      content: '\25cf\25cf\25cf'; }
  .tufte .release {
    background-color: rgba(183, 84, 114, 0.8);
    box-sizing: content-box;
    text-align: center;
    color: #fcf9f4;
    padding: 10px 10px;
    margin: 40px 0px 30px;
    clear: both; }
  .tufte .infobox {
    font-family: "Fira Sans Condensed", sans-serif;
    margin: 0 0 2em; }
    .tufte .infobox .section:not(:last-child) {
      margin-bottom: 1em; }
    .tufte .infobox .title {
      font-weight: bold; }
    .tufte .infobox ul {
      list-style-type: none;
      margin: 0;
      padding: 0 0 0 1em;
      max-width: none; }
    .tufte .infobox li {
      margin: 8px 0; }
    .tufte .infobox a {
      background: none;
      text-shadow: none;
      text-decoration: none;
      color: #2c4e2c; }
      .tufte .infobox a:hover {
        color: #518f51; }
    .tufte .infobox a code:before,
    .tufte .infobox a code:after {
      content: ''; }
    .tufte .infobox .toc ul {
      list-style-type: decimal;
      color: #9fb9a0;
      margin-left: 0.5em; }
    .tufte .infobox .toc ul ul {
      list-style-type: lower-alpha; }
    .tufte .infobox .toc li {
      padding-left: 0.4em;
      color: #333; }
    .tufte .infobox .tags {
      margin-left: 1em;
      margin-top: 0.2em; }
    .tufte .infobox .tag {
      display: inline-block;
      background-color: #efeaf8;
      border: 1px solid #e0cee0;
      border-radius: 5px;
      padding: 0.2em 0.4em;
      margin: 0.2em 0.1em;
      font-size: 15px; }
  .tufte p video {
    width: 100%;
    box-shadow: 0 0 25px -5px black;
    margin: 2em 0; }
  @media (min-width: 760px) {
    .tufte {
      /* For larger screens, we reduce the width of paragraphs, which leaves space on the right for margin notes. */
      /* Only numbered toggles need to be visible; the unnumbered toggle is only there to be clickable on mobile. */
      /* Since the sidenotes now show up all the time, the styling of the sidenote marks does not need to indicate their clickability. */ }
      .tufte p, .tufte ul, .tufte ol, .tufte hr, .tufte pre, .tufte h2, .tufte h3, .tufte h4, .tufte h5, .tufte h6 {
        box-sizing: border-box;
        max-width: 60%; }
        .tufte p.wide, .tufte ul.wide, .tufte ol.wide, .tufte hr.wide, .tufte pre.wide, .tufte h2.wide, .tufte h3.wide, .tufte h4.wide, .tufte h5.wide, .tufte h6.wide {
          max-width: none; }
      .tufte table {
        width: 60%; }
        .tufte table.wide {
          width: auto; }
      .tufte h1 {
        margin: 0 0 50px;
        max-width: 100%;
        font-size: 40px; }
      .tufte ul p, .tufte ul ul, .tufte ul ol, .tufte ul table, .tufte ul pre, .tufte ol p, .tufte ol ul, .tufte ol ol, .tufte ol table, .tufte ol pre, .tufte table p, .tufte table ul, .tufte table ol, .tufte table table, .tufte table pre {
        max-width: initial; }
      .tufte blockquote {
        margin-left: 1.5em;
        padding-left: 1em; }
      .tufte .infobox {
        width: 32%;
        float: right;
        clear: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 1; }
        .tufte .infobox .section:not(:last-child) {
          margin-bottom: 1.5em; }
      .tufte .sidenote, .tufte .marginnote {
        margin: 0 -60% 0 0;
        width: 50%;
        /* Side notes need to show up *above* the main content. Normally this isn't relevant, because we try not to let main content and margin notes have any overlap. But there are circumstances in which some benign overlap occurs; in those cases, it is always an *empty* portion of the main content that is running into some *nonempty* portion of margin note, and thus the margin content needs to be on top so that its hyperlinks remain clickable. */
        z-index: 1;
        /* Margin notes are slightly smaller than the main text. */
        font-size: 14px;
        /* Override the display:none that we used to hide margin notes on mobile. */
        display: block;
        /* The margin notes now float to the right, so that they appear in the margin. */
        float: right;
        clear: right;
        /* Reset some CSS for stuff inside the margin */ }
        .tufte .sidenote code, .tufte .marginnote code {
          font-size: 12px; }
        .tufte .sidenote a.external:after, .tufte .marginnote a.external:after {
          font-size: 9px/1; }
        .tufte .sidenote p, .tufte .sidenote ul, .tufte .sidenote ol, .tufte .sidenote pre.sourceCode, .tufte .marginnote p, .tufte .marginnote ul, .tufte .marginnote ol, .tufte .marginnote pre.sourceCode {
          width: auto; }
      .tufte label.margin-toggle {
        display: none; }
      .tufte label.margin-toggle.sidenote-number {
        display: inline; }
      .tufte label.margin-toggle {
        cursor: inherit;
        color: inherit; } }

/*
--------------------------------------------------------------------------------
  Subscribe footer
--------------------------------------------------------------------------------
*/
#subscribe-footer {
  clear: both;
  margin: 20px 0 0;
  padding: 45px 0;
  position: relative;
  text-align: center;
  color: white;
  background-color: #2a2a2a;
  background-image: linear-gradient(#3a3a3a 2px, transparent 2px), linear-gradient(90deg, #3a3a3a 2px, transparent 2px), linear-gradient(#333333 1px, transparent 1px), linear-gradient(90deg, #333333 1px, transparent 1px);
  background-size: 100px 100px , 100px 100px , 20px 20px , 20px 20px;
  background-position: -2px -2px , -2px -2px , -1px -1px , -1px -1px; }
  @media (min-width: 760px) {
    #subscribe-footer {
      margin: 88px 0 0; } }
  #subscribe-footer.tear {
    margin: 0;
    padding: 80px 0 70px;
    box-shadow: inset 0px 40px 70px black; }
    @media (min-width: 760px) {
      #subscribe-footer.tear {
        padding: 120px 0 110px; } }
    #subscribe-footer.tear::before {
      top: -1px;
      left: 0;
      right: 0;
      position: absolute;
      background: url('data:image/svg+xml,<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 100,100 200,0" fill="#fcf9f4" /></svg>') top/1em auto repeat-x;
      height: 15px;
      content: ' '; }
    @media (min-width: 760px) {
      #subscribe-footer.tear {
        box-shadow: inset 0px 40px 240px black; } }
  #subscribe-footer p {
    max-width: 535px;
    font-size: 18px;
    line-height: 30px;
    margin: 0 auto 40px; }
  #subscribe-footer .buttonlike {
    border: 2px solid white;
    box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.2);
    background-color: #b75472;
    min-width: 162px; }
    #subscribe-footer .buttonlike:hover {
      background-color: #de6086;
      box-shadow: 0 0 35px 0 rgba(255, 255, 255, 0.25); }

/*
--------------------------------------------------------------------------------
  News post
--------------------------------------------------------------------------------
*/
#news-meta {
  font-family: "PT Serif", serif;
  font-size: 16px;
  color: #333;
  text-align: right;
  overflow: visible;
  height: 20px; }
  @media (min-width: 760px) {
    #news-meta {
      height: 0;
      position: relative;
      top: 50px; } }
