html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
  }
  body {
    max-width: 34em;
    margin: 0 auto;
    padding: 0 1em;
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  main {
    display: block;
  }
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }
  pre {
    font-family: monospace, monospace;
    font-size: 1em;
  }
  a {
    background-color: transparent;
  }
  abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp {
    font-family: monospace, monospace;
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  img {
    border-style: none;
  }
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
  }
  button,
  input {
    overflow: visible;
  }
  button,
  select {
    text-transform: none;
  }
  [type="button"],
  [type="reset"],
  [type="submit"],
  button {
    -webkit-appearance: button;
    appearance: button;
  }
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner,
  button::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring,
  button:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
  }
  progress {
    vertical-align: baseline;
  }
  textarea {
    overflow: auto;
  }
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  [type="search"] {
    -webkit-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px;
  }
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    appearance: button;
    font: inherit;
  }
  details {
    display: block;
  }
  summary {
    display: list-item;
  }
  [hidden],
  template {
    display: none;
  }
  @font-face {
    font-family: Source Sans Pro;
    src: local("Source Sans 3 Light"), local("Source Sans Pro Light"),
      local("SourceSansPro-Light"),
      url(assets) format("woff2"),
      url(assets/fonts/source-sans-pro-light.woff) format("woff");
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: Source Sans Pro;
    src: local("Source Sans 3 Light Italic"),
      local("Source Sans Pro Light Italic"), local("SourceSansPro-LightItalic"),
      url(assets/fonts/source-sans-pro-light-italic.woff2) format("woff2"),
      url(assets/fonts/source-sans-pro-light-italic.woff) format("woff");
    font-weight: 400;
    font-style: italic;
  }
  @font-face {
    font-family: Source Sans Pro;
    src: local("Source Sans 3 Semibold"), local("Source Sans Pro SemiBold"),
      local("SourceSansPro-SemiBold"),
      url(assets/fonts/source-sans-pro-semibold.woff2) format("woff2"),
      url(assets/fonts/source-sans-pro-semibold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: Source Sans Pro;
    src: local("Source Sans 3 Semibold Italic"),
      local("Source Sans Pro SemiBold Italic"),
      local("SourceSansPro-SemiBoldItalic"),
      url(assets/fonts/source-sans-pro-semibold-italic.woff2) format("woff2"),
      url(assets/fonts/source-sans-pro-semibold-italic.woff) format("woff");
    font-weight: 700;
    font-style: italic;
  }
  :root {
    --brand-primary: #3465a4;
    --brand-secondary: #73d216;
    --brand-menu: #c00;
    --brand-primary-light: #729fcf;
    --gray: #888a85;
    --gray-light: #babdb6;
    --gray-bg: #eeeeec;
    --body-bg: #fff;
    --body-color: #222;
    --body-color-rgb: 34, 34, 34;
    --font-size-sm: 0.8em;
  }
  * {
    box-sizing: border-box;
  }
  body {
    font-size: 20px;
    line-height: 1.45;
    color: var(--body-color);
    font-family: Source Sans Pro, verdana, sans-serif;
    font-feature-settings: "liga";
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 0.8em;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  h3,
  h4,
  h5 {
    font-style: italic;
  }
  h1 {
    font-size: 2.2857142857142856em;
  }
  h2 {
    font-size: 1.7142857142857142em;
  }
  h3 {
    font-size: 1.5em;
  }
  h4 {
    font-size: 1.2857142857142858em;
  }
  h5 {
    font-size: 1.1428571428571428em;
  }
  h6 {
    font-size: 1em;
  }
  p {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    margin-bottom: 1.2em;
  }
  p code {
    display: inline;
    padding: 3px;
  }
  p small {
    display: inline-block;
    line-height: 1.5;
  }
  a {
    color: var(--brand-primary);
    transition: all 0.5s ease-in-out;
    transition-property: color, opacity;
  }
  a,
  a:hover {
    text-decoration: none;
  }
  a:hover {
    color: var(--brand-secondary);
  }

  article .brands img {
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  }

  article .brands img:hover {
    filter: none;
    -webkit-filter: none;
  }

  /*
  a:hover img {
    opacity: 0.7;
  }*/
  
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  code {
    display: block;
    font-family: monospace;
    font-size: 0.9em;
    background-color: var(--gray-bg);
    padding: 1em;
    border-radius: 5px;
  }
  blockquote {
    position: relative;
    padding: 1em 0 1em 1em;
  }
  blockquote p {
    margin-top: 0;
  }
  blockquote p img {
    width: 150px;
    border-radius: 50%;
    shape-outside: circle();
    margin-left: 20px;
    float: right;
  }
  blockquote:nth-of-type(2n) p img {
    margin-right: 20px;
    margin-left: 0;
    float: left;
  }
  blockquote p:last-of-type {
    margin-bottom: 0;
  }
  blockquote cite {
    display: block;
    color: var(--gray);
    font-size: var(--font-size-sm);
    text-align: right;
  }
  blockquote cite:before {
    content: "\2014 \2009";
  }
  blockquote:before {
    display: block;
    content: "\201C";
    font-size: 4em;
    position: absolute;
    left: -30px;
    top: -20px;
    color: var(--gray-light);
  }
  hr {
    margin: 2em 20%;
    border: 0;
    border-top: 1px dashed var(--gray-light);
  }
  figcaption {
    font-style: italic;
    margin-top: 0.35em;
    text-align: center;
  }
  figcaption,
  table {
    font-size: var(--font-size-sm);
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  tr:hover td {
    background: var(--gray-bg);
  }
  th + th {
    width: 65%;
  }
  tr td:first-of-type {
    padding-right: 10px;
  }
  td {
    height: 60px;
    border-bottom: 1px solid var(--gray-bg);
    transition: all 0.5s ease-in-out;
  }
  form {
    text-align: center;
  }
  .button,
  input {
    min-height: 44px;
    padding: 6px 12px;
    margin: 3px;
    line-height: 1.5;
    color: var(--body-color);
    background-color: var(--body-bg);
    border: 1px solid var(--gray);
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
  }
  input[type="email"] {
    box-shadow: inset 0 1px 1px rgba(var(--body-color-rgb), 0.075);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 250px;
  }
  input[type="email"]:focus {
    border-color: var(--brand-primary);
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(var(--body-color-rgb), 0.075),
      0 0 8px var(--brand-primary-light);
  }
  .button,
  input[type="submit"] {
    text-align: center;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary-light);
    color: var(--body-bg);
    display: inline-block;
  }
  .button:hover,
  input[type="submit"]:hover {
    background-color: var(--brand-primary-light);
    color: var(--gray-bg);
  }
  .muted,
  .muted a {
    color: var(--gray);
  }
  /* #container {
    max-width: 34em;
    margin: 0 auto;
    padding: 0 1em;
    display: flex;
    flex-direction: column;
    height: 100vh;
  } */
  #main {
    flex: 1 0 auto;
  }
  header.nav {
    text-align: center;
    margin: 0 auto;
    padding-bottom: 1em;
    flex-shrink: 0;
  }
  header.nav h1 {
    font-size: 2.825em;
  }
  header.nav h1 #first {
    color: var(--body-color);
  }
  header.nav h1 #last {
    color: var(--brand-primary);
  }
  nav ul {
    list-style-type: none;
    padding: 0;
  }
  nav li {
    display: inline;
    padding: 10px;
  }
  nav a {
    color: var(--body-color);
  }
  nav a.active {
    color: var(--brand-primary);
  }
  nav a:hover {
    color: var(--brand-menu);
  }
  footer {
    width: 100%;
    margin-top: 2em;
    float: left;
    text-align: center;
    flex-shrink: 0;
  }
  footer .social {
    padding: 0;
    margin-top: 0;
  }
  footer .social li {
    display: inline-block;
    padding-left: 0.75em;
  }
  footer .social li:first-child {
    padding-left: 0;
  }
  footer .social a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
  }
  footer .social a:hover {
    background: var(--gray-bg);
  }
  footer .social a .svg-icon {
    fill: var(--gray-light);
  }
  footer .copyright {
    border-top: 1px dashed var(--gray-light);
  }
  footer .copyright small {
    color: var(--gray);
  }
  article {
    margin-bottom: 5em;
  }
  article h2,
  article h3,
  article h4,
  article h5,
  article h6 {
    margin-top: 1.2em;
  }
  article header {
    text-align: center;
    margin-bottom: 2em;
  }
  article header h1,
  article header h2,
  article header h3 {
    margin-bottom: 0.2em;
  }
  article header time {
    font-size: 0.9em;
    color: var(--gray);
  }
  article header p {
    margin-top: 0;
    color: var(--gray);
  }
  article ul {
    margin-bottom: 1.2em;
  }
  article ul li {
    margin-bottom: 0.5em;
  }
  article img {
    display: block;
    margin: 0 auto;
  }
  article figure {
    margin: 1.5em 0;
  }
  article figure.breathe {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  article figure.small img,
  article img.small {
    width: 11em;
  }
  article .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  article .embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  article .embed-container.embed-container-4by3 {
    padding-bottom: 75%;
  }
  article .brands {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
    justify-content: center;
  }
  article .brands img {
    /*
    width: 160px;
    height: auto;
    margin-bottom: 0.5em;
    */

    width: 140px;
    height: auto;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    margin-left: 0.5em;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

  }
  section.archive .time,
  section.archive time {
    color: var(--gray);
    text-align: end;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    display: block;
  }
  section.archive .time:not(:first-child),
  section.archive time:not(:first-child) {
    padding: 0 0.3em;
  }
  section.archive ul {
    list-style-type: none;
    padding: 0;
  }
  section.archive ul li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  article.intro header {
    margin-left: 0;
    margin-right: 0;
  }
  article.intro header p {
    color: var(--body-color);
  }
  article.intro h1,
  article.intro h2,
  article.intro h3,
  article.intro h4 {
    text-align: center;
  }
  article.talk .references {
    font-size: 80%;
  }
  article.talk .references p {
    margin-top: 0;
    margin-bottom: 0.3em;
  }
  article.talks h2,
  article.talks h3 {
    text-align: center;
    margin-top: 2em;
  }
  article.quotes .quote {
    position: relative;
  }
  article.quotes .quote:after {
    content: "";
    display: block;
    margin: 2em 20%;
    border-top: 1px dashed var(--gray-light);
  }
  article.quotes .quote blockquote {
    font-size: 0.9em;
    padding: 0.9em;
  }
  article.quotes .quote .permalink {
    display: none;
    position: absolute;
    left: -1.5em;
    padding: 0 0.5em 1em;
  }
  article.quotes .quote:hover .permalink {
    display: block;
  }
  .box {
    border-radius: 5px;
    padding: 1em;
    background: var(--gray-bg);
  }
  .box-border {
    border-radius: 5px;
    padding: 0 1em;
    border: 1px solid var(--gray);
    margin-bottom: 1em;
  }
  .feedback {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 0;
    width: 360px;
    box-shadow: 0 10px 25px rgba(var(--body-color-rgb), 0.25);
    background-color: var(--brand-primary);
    border-radius: 4px 4px 0 0;
    font-size: 90%;
  }
  .feedback .feedback-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 20px;
    color: var(--body-bg);
    text-align: left;
    outline: none;
    font-weight: 700;
    font-size: 16px;
  }
  .feedback .feedback-button:after {
    float: right;
    content: "\203a";
    font-size: 20px;
    transform: rotate(-90deg);
    transition: all 0.5s ease-in-out;
  }
  .feedback-open.feedback .feedback-button:after {
    transform: rotate(90deg);
  }
  .feedback .feedback-content {
    display: none;
    padding: 15px;
    background: var(--body-bg);
    margin: 0 4px 4px;
    border-radius: 4px;
  }
  .feedback .feedback-content p {
    margin-top: 0;
  }
  img {
    max-width: 100%;
    height: auto;
    transition: all 0.5s ease-in-out;
    will-change: opacity;
  }
  audio,
  video {
    width: 100%;
  }
  @media (max-width: 767px) {
    body {
      font-size: 115%;
    }
    header.nav h1 {
      font-size: 2.55em;
    }
    blockquote p img {
      width: 125px;
    }
    .feedback {
      width: 100%;
      right: 0;
      border-radius: 0;
    }
    article .brands a {
      flex-basis: 25%;
    }
  }
  @media (max-width: 420px) {
    #container {
      padding: 0 1em;
    }
    nav li {
      padding: 5px;
    }
    blockquote {
      margin: 1em;
    }
    blockquote:before {
      left: -20px;
    }
    article {
      margin-bottom: 3em;
    }
    article .brands a {
      flex-basis: 33%;
    }
  }
  @media (min-width: 1224px) {
    article figure,
    article header {
      margin-left: -5em;
      margin-right: -5em;
    }
    article figure figcaption {
      max-width: 34em;
      margin: 0 auto;
    }
  }