@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, section#blog-post-container ol li, 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-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

a {
  text-decoration: none; }

/* Headlines */
@font-face {
  font-family: Graphik;
  font-weight: 400;
  src: url("/fonts/Graphik-Regular.otf"); }
@font-face {
  font-family: Graphik;
  font-weight: 500;
  src: url("/fonts/Graphik-Medium.otf"); }
@font-face {
  font-family: Graphik;
  font-weight: 700;
  src: url("/fonts/Graphik-Semibold.otf"); }
@font-face {
  font-family: Graphik;
  font-weight: 900;
  src: url("/fonts/Graphik-Bold.otf"); }
@font-face {
  font-family: "Graphik Compact";
  font-weight: 900;
  src: url("/fonts/GraphikCompact-Bold.otf"); }
html {
  scroll-behavior: smooth; }

.dinkus {
  display: block;
  margin: 30px 0px;
  text-align: center; }

p, section#blog-post-container ol li {
  font-family: "EB Garamond", Georgia, serif; }

h1,
h2,
h3,
p,
section#blog-post-container ol li,
article {
  max-width: 600px; }

h1 {
  font-weight: 700;
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin-bottom: 16px;
  font-size: 40px; }
  h1:focus {
    outline: none; }

h2 {
  font-size: 24px;
  margin-bottom: 16px;
  line-height: 130%;
  color: #000;
  font-weight: 900;
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

h3 {
  color: #eb4545;
  font-size: 14px;
  font-weight: 400;
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px; }

p, section#blog-post-container ol li,
input {
  color: #141e30;
  font-size: 20px;
  margin-bottom: 20px;
  line-height: 150%; }

p.subhead, section#blog-post-container ol li.subhead {
  margin-bottom: 0;
  font-style: italic; }

p.caption, section#blog-post-container ol li.caption,
p.caption-xL,
section#blog-post-container ol li.caption-xL,
p.caption a,
section#blog-post-container ol li.caption a {
  font-style: italic;
  color: #ABA9A6 !important; }

p.caption, section#blog-post-container ol li.caption {
  margin-top: -16px; }
  p.caption a, section#blog-post-container ol li.caption a {
    text-decoration: none;
    background: none; }
    p.caption a:hover, section#blog-post-container ol li.caption a:hover {
      color: #eb4545 !important; }
  p.caption a::after, section#blog-post-container ol li.caption a::after {
    height: 2px;
    background-color: #939AAE;
    opacity: 0.5;
    bottom: 4px; }

p.caption-xL, section#blog-post-container ol li.caption-xL {
  margin-top: 16px; }

a {
  color: #eb4545;
  cursor: pointer; }

a.button-primary {
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: white;
  padding: 16px;
  background-color: #eb4545;
  border-radius: 4px;
  display: block;
  width: 260px;
  margin: 35px auto;
  text-align: center;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s ease-in; }
  a.button-primary:hover {
    text-decoration: none;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease-in; }

a.button-secondary {
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
  color: #eb4545;
  padding: 16px;
  background-color: #FED5E7;
  border-radius: 4px; }
  a.button-secondary:hover {
    text-decoration: none; }

a.link-secondary {
  color: #141e30; }

p a:hover, section#blog-post-container ol li a:hover {
  text-decoration: underline; }

em {
  font-style: italic; }

strong {
  font-weight: 600; }

.container-article-excerpt {
  margin-bottom: 36px; }
  .container-article-excerpt h2 {
    transition: all 0.2s ease-in; }

.tombstone {
  white-space: nowrap; }
  .tombstone:after {
    content: "✦";
    font-size: 14px;
    border-radius: 1px;
    position: relative;
    left: 5px;
    color: #eb4545;
    display: inline-block; }

.ampersand {
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic; }

/* GENERAL */
section#error {
  margin-bottom: 0; }
  section#error h1 {
    font-size: 96px;
    margin-top: 56px;
    margin-bottom: 12px;
    text-align: center; }
  section#error p, section#error section#blog-post-container ol li, section#blog-post-container ol section#error li {
    margin: 0 auto;
    text-align: center; }
  section#error img {
    max-width: 100%;
    display: block;
    margin: 0 auto; }

html,
body {
  width: 100%;
  overflow-x: hidden; }

#index #logo {
  color: white !important; }
#index p, #index section#blog-post-container ol li, section#blog-post-container ol #index li {
  font-weight: 500;
  font-size: 22px; }
#index p, #index section#blog-post-container ol li, section#blog-post-container ol #index li,
#index h1,
#index h2,
#index a {
  color: white; }
#index h2 {
  text-transform: uppercase;
  margin-bottom: 6px; }
#index h3 {
  background: -webkit-linear-gradient(0deg, #36ffcb 0%, rgba(54, 255, 203, 0.5) 104.22%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  display: inline-block; }
#index p, #index section#blog-post-container ol li, section#blog-post-container ol #index li {
  opacity: 0.9; }
#index p a, #index section#blog-post-container ol li a, section#blog-post-container ol #index li a {
  color: #36ffcb;
  text-decoration: underline; }
  #index p a:hover, #index section#blog-post-container ol li a:hover, section#blog-post-container ol #index li a:hover {
    text-decoration: none; }

time {
  color: #eb4545; }

@media screen and (max-width: 500px) {
  .blog-location {
    display: none; } }

#blog-author, .read-time {
  opacity: 0.4; }

#blog-author {
  transition: all 0.3s ease-in-out; }

p.metadata, section#blog-post-container ol li.metadata {
  font-family: "IBM Plex Mono", "Courier New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: block;
  font-weight: 400;
  font-size: 13px !important;
  margin-bottom: 12px; }

/* MASTHEAD SECTION */
img#polaroid.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
  transition: filter 4s ease-in; }

.site-content-wrapper:hover img#polaroid.grayscale {
  filter: none;
  -webkit-filter: grayscale(0%);
  transition: filter 4s ease-in; }

#above-fold-image-wrapper {
  box-shadow: 0px 8px 100px rgba(11, 41, 80, 0.8); }

div.index-masthead h1,
div.index-masthead p,
div.index-masthead section#blog-post-container ol li,
section#blog-post-container ol div.index-masthead li,
div.index-masthead #above-fold-image-wrapper, div.index-masthead .greeting {
  transform: rotate(-4deg); }

.site-content-wrapper {
  width: 88%;
  margin-left: 6%;
  max-width: 1900px; }
  @media screen and (min-width: 700px) {
    .site-content-wrapper {
      width: 72%;
      margin-left: 14%; } }

@media screen and (min-width: 1100px) {
  body#blog .site-content-wrapper {
    width: 100%;
    margin-left: 0; } }
/* RESPONSIVE HOME PAGE */
@media screen and (min-width: 0px) {
  section.above-fold-grid {
    margin-top: 56px;
    margin-bottom: 72px; }

  section {
    margin-bottom: 200px; }

  body#index section#nav {
    margin-left: 0; }
    body#index section#nav nav {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding: 8px 0px;
      text-align: center;
      width: 100%; }
      body#index section#nav nav a:after {
        height: 0px; }

  div#writing {
    margin-top: 72px; }
    div#writing p, div#writing section#blog-post-container ol li, section#blog-post-container ol div#writing li {
      margin-bottom: 16px; }

  img#polaroid {
    width: 88%;
    margin-left: 4%;
    margin-top: 16px; }

  div.greeting {
    width: 88%; } }
@media screen and (min-width: 500px) {
  div#masthead-wrapper {
    text-align: center; }

  div.index-masthead {
    display: inline-block; }

  img#polaroid, div.greeting {
    width: 325px; }

  .index-masthead h1 {
    font-size: 60px;
    margin-left: -6px; } }
@media screen and (min-width: 900px) {
  section.above-fold-grid {
    margin-bottom: 120px; }

  body#index section#nav nav {
    position: fixed;
    z-index: 1; }

  section#top-finds .recommendation a {
    font-size: 20px; }

  .research-columns-container {
    -webkit-column-count: 2;
    -webkit-column-gap: 96px;
    column-count: 2;
    column-gap: 96px; }

  body#index .project {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 250px; }

  .project-info h3 {
    color: rgba(255, 255, 255, 0.4); }

  .project-left-align div:nth-of-type(1) {
    order: 2; }
  .project-left-align .project-image img {
    float: right; }

  .project-right-align .project-info {
    padding-right: 56px;
    text-align: right; }

  .project-left-align .project-info {
    padding-left: 56px; }

  img {
    margin-top: 0; }

  .index-masthead h1 {
    font-size: 48px;
    margin-left: -2px; }

  body#index section#nav nav {
    border-bottom: none;
    padding-top: 16px;
    padding-bottom: 0; }
    body#index section#nav nav ul {
      display: inline-block;
      margin-right: 24px;
      float: right; }

  section.above-fold-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; }

  div#masthead-wrapper {
    text-align: left; }

  img#polaroid, div.greeting {
    width: 72%; }

  body#index .site-content-wrapper, body#starterpack .site-content-wrapper {
    width: 92%;
    margin-left: 4%; }

  body#index section#nav nav a:after {
    height: 2px; } }
@media screen and (min-width: 1040px) {
  section.above-fold-grid {
    margin-bottom: 0px; }

  section {
    margin-bottom: 256px; }

  img#polaroid, div.greeting {
    width: 340px; }

  body#index .site-content-wrapper, body#starterpack .site-content-wrapper {
    width: 84%;
    margin-left: 8%; }

  section.above-fold-grid {
    margin-top: 72px; }

  section#top-finds {
    float: right;
    width: 50%;
    margin-top: 0px; } }
@media screen and (min-width: 1300px) {
  body#index .site-content-wrapper, body#starterpack .site-content-wrapper {
    width: 80%;
    margin-left: 10%; }

  img#polaroid, div.greeting {
    width: 390px; }

  section#top-finds {
    margin-top: -72px; } }
@media screen and (min-width: 1800px) {
  .project-left-align .project-info {
    padding-left: 56px; } }
/* NAVIGTAION */
div.masthead h1 {
  text-transform: uppercase;
  text-align: left;
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 900;
  line-height: 110%;
  margin-bottom: 2px;
  display: inline-block;
  max-width: none; }
  div.masthead h1 span {
    opacity: 0.24; }

body#index {
  overflow-x: hidden; }
  body#index p#lblGreetings, body#index section#blog-post-container ol li#lblGreetings, section#blog-post-container ol body#index li#lblGreetings {
    display: block;
    font-size: 13px !important;
    color: white;
    font-family: "IBM Plex Mono", "Courier New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    margin-left: 2px;
    opacity: 1;
    z-index: 1; }

p#lblGreetings, section#blog-post-container ol li#lblGreetings {
  display: none; }
  @media screen and (min-width: 700px) {
    p#lblGreetings, section#blog-post-container ol li#lblGreetings {
      display: block;
      margin-bottom: 0;
      font-family: "EB Garamond", Georgia, serif;
      font-size: 17px !important;
      margin: -2px;
      color: #141e30;
      opacity: 0.32;
      margin-left: 0px; }
      p#lblGreetings span, section#blog-post-container ol li#lblGreetings span {
        font-style: italic; } }

div.navigation-masthead {
  position: absolute;
  top: 0;
  left: 0; }
  div.navigation-masthead h1 {
    font-size: 17px;
    margin-top: 20px; }
    div.navigation-masthead h1 span {
      color: #eb4545;
      opacity: 1; }
    @media screen and (min-width: 700px) {
      div.navigation-masthead h1 {
        font-size: 20px; } }

/* GLOBAL NAV RULES */
body#blog section#nav .masthead,
body#starterpack section#nav .masthead,
body#credits section#nav .masthead,
body#blog-post-page section#nav .masthead {
  margin-left: 6%; }
@media screen and (min-width: 700px) {
  body#blog section#nav .masthead,
  body#starterpack section#nav .masthead,
  body#credits section#nav .masthead,
  body#blog-post-page section#nav .masthead {
    margin-left: 24px; }
  body#blog section#nav ul,
  body#starterpack section#nav ul,
  body#credits section#nav ul,
  body#blog-post-page section#nav ul {
    float: right;
    margin-top: 12px;
    margin-right: 24px; } }

section#nav {
  margin-left: 6%;
  margin-bottom: 0px;
  height: 32px;
  width: 100%; }
  section#nav nav {
    padding-top: 48px;
    margin-left: 0; }
    @media screen and (min-width: 700px) {
      section#nav nav {
        padding-top: 0; } }
  @media screen and (min-width: 700px) {
    section#nav {
      margin-left: 0; } }

body#index {
  background: url("/images/blob.svg") no-repeat, linear-gradient(135deg, #141e30 0%, #0f1114 74%);
  background-size: contain; }
  body#index .index-links .recommendation {
    border-top: 2px solid rgba(255, 255, 255, 0.08); }
    body#index .index-links .recommendation .hvr-underline-from-left:before {
      background: white; }
    body#index .index-links .recommendation a {
      font-family: "EB Garamond", Georgia, serif;
      border-bottom: 2px solid rgba(255, 255, 255, 0.08); }
      body#index .index-links .recommendation a .year {
        color: white;
        opacity: 0.32;
        display: inline-block; }
      body#index .index-links .recommendation a:hover {
        padding-left: 4px; }
        body#index .index-links .recommendation a:hover .year {
          opacity: 1;
          margin-top: -2px; }
      body#index .index-links .recommendation a .author {
        font-weight: 500;
        color: white;
        opacity: 0.32; }
  body#index time {
    color: white;
    opacity: 0.32; }

body#index nav,
section#nav nav {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0px; }
  body#index nav li,
  section#nav nav li {
    padding-right: 8px;
    display: inline; }
    body#index nav li:last-of-type,
    section#nav nav li:last-of-type {
      padding-right: 0px; }
  @media screen and (min-width: 321px) {
    body#index nav,
    section#nav nav {
      font-size: 15px;
      width: 100%; }
      body#index nav li,
      section#nav nav li {
        padding-right: 12px; } }
  body#index nav a,
  section#nav nav a {
    color: #141e30;
    font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    opacity: 0.32;
    display: inline-block;
    border-radius: 0.5rem;
    padding: 4px 0px;
    position: relative;
    transition: color 0.175s ease, background-color 0.15s ease, box-shadow 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.175s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    body#index nav a:hover,
    section#nav nav a:hover {
      opacity: 0.64;
      background-color: rgba(0, 0, 0, 0.08);
      transform: skew(-4deg) scaleX(0.98);
      text-decoration: none; }
    @media screen and (min-width: 700px) {
      body#index nav a,
      section#nav nav a {
        padding: 8px 0; } }
  body#index nav a::after,
  section#nav nav a::after {
    content: "";
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.16);
    position: absolute;
    bottom: 0px;
    left: 0;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  body#index nav a:hover:after,
  section#nav nav a:hover:after {
    color: #141e30;
    height: 2px;
    bottom: 0px;
    background-color: #36ffcb;
    transform: translateY(8px) scaleX(0.72); }

body#index {
  overflow-x: hidden; }
  body#index p, body#index section#blog-post-container ol li, section#blog-post-container ol body#index li {
    font-size: 20px; }
  body#index nav a {
    color: white;
    opacity: 0.32; }
    body#index nav a:hover {
      background-color: rgba(255, 255, 255, 0.12); }
  body#index nav a:hover {
    opacity: 1;
    color: white; }
  body#index nav a::after {
    content: "";
    background-color: rgba(255, 255, 255, 0.32); }
  body#index nav a:hover:after {
    color: white; }

/* BIOS */
section#bio #section-header-subtext {
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 23px;
  font-weight: 800;
  line-height: 140%;
  margin-bottom: 0; }
  @media screen and (min-width: 700px) {
    section#bio #section-header-subtext {
      font-size: 44px;
      line-height: 110%; } }
section#bio img#bio-pic {
  display: none; }
@media screen and (min-width: 1100px) {
  section#bio .bio-grid {
    display: grid;
    grid-template-columns: 600px auto; }
  section#bio img#bio-pic {
    display: inline-block;
    width: 80%;
    max-width: 24vw;
    margin-top: 200px;
    transform: rotate(4deg);
    float: right; } }
section#bio .bios p, section#bio .bios section#blog-post-container ol li, section#blog-post-container ol section#bio .bios li {
  transition: all 0.3s ease-in;
  font-weight: 500;
  font-size: 20px;
  line-height: 156%; }
  @media screen and (min-width: 700px) {
    section#bio .bios p, section#bio .bios section#blog-post-container ol li, section#blog-post-container ol section#bio .bios li {
      font-size: 22px; } }
section#bio input[type="radio"] {
  position: absolute;
  left: -9999px; }
section#bio .filters {
  margin-bottom: 40px;
  color: white; }
section#bio .filters * {
  display: block;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  @media screen and (min-width: 700px) {
    section#bio .filters * {
      display: inline-block; } }
section#bio .filters li {
  margin-top: 20px; }
section#bio .filters label {
  border-radius: 1px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.32);
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  margin-top: 12px;
  margin-right: 12px;
  padding-bottom: 4px;
  padding-top: 4px;
  line-height: normal;
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
section#bio .filters label:hover {
  color: white;
  opacity: 1;
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  transform: skew(-4deg) scaleX(0.98);
  text-decoration: none;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
section#bio [value="professional"]:checked ~ .bios .bio:not([data-category~="professional"]),
section#bio [value="very-online"]:checked ~ .bios .bio:not([data-category~="very-online"]),
section#bio [value="Grandma-friendly"]:checked ~ .bios .bio:not([data-category~="Grandma-friendly"]),
section#bio [value="long-now"]:checked ~ .bios .bio:not([data-category~="long-now"]) {
  transition: all 1s ease-in;
  background-color: blue;
  display: none; }
section#bio [value="professional"]:checked ~ .filters [for="professional"],
section#bio [value="very-online"]:checked ~ .filters [for="very-online"],
section#bio [value="Grandma-friendly"]:checked ~ .filters [for="Grandma-friendly"],
section#bio [value="long-now"]:checked ~ .filters [for="long-now"] {
  opacity: 1;
  border-bottom: 2px solid #36ffcb; }

.section-header {
  font-family: "Graphik Compact", "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: inline-block;
  background: linear-gradient(140deg, #36ffcb 0%, #1a388c 100%);
  margin-bottom: 48px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 80%;
  font-size: 88px;
  font-weight: 900 !important;
  text-transform: uppercase;
  padding-bottom: 12px;
  opacity: 1;
  letter-spacing: -4px; }
  @media screen and (min-width: 374px) {
    .section-header {
      font-size: 112px; } }
  @media screen and (min-width: 700px) {
    .section-header {
      font-size: 200px; } }
  @media screen and (min-width: 900px) {
    .section-header {
      font-size: 250px;
      max-width: 100%;
      padding-bottom: 16px;
      letter-spacing: -12px; } }
  @media screen and (min-width: 1300px) {
    .section-header {
      font-size: 280px; } }

/* LA.greeting BLOG POSTS */
div#writing .metadata {
  opacity: 0.32; }
div#writing h2 {
  display: inline-block; }
div#writing .underline {
  opacity: 0.92;
  padding-bottom: 4px;
  /* I don't know why this is needed, I just added it and it worked in IE Edge. If we remove this width, the gradient breaks in IE Edge */
  width: calc(100%);
  background-image: linear-gradient(transparent calc(68% - 5px), rgba(54, 255, 203, 0.5) 10px);
  background-repeat: no-repeat;
  background-size: 0% 94%;
  transition: background-size 0.4s; }
div#writing a:hover h2 .underline {
  opacity: 1;
  background-size: 100% 94%; }
div#writing a#blog-link {
  display: block;
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 96px; }
  div#writing a#blog-link #arrow {
    position: relative;
    bottom: -3px;
    transition: all 0.3s ease-in; }
  @media screen and (min-width: 900px) {
    div#writing a#blog-link {
      margin-bottom: 0; } }
div#writing a#blog-link:hover {
  opacity: 0.9; }
  div#writing a#blog-link:hover #arrow {
    padding-left: 8px;
    transition: all 0.2s ease-in; }

body#index hr {
  opacity: 0.08;
  margin-bottom: 72px;
  display: inline-block;
  width: 100%; }

/* PROJECTS SECTION */
section#projects .project {
  margin-bottom: 96px; }
  @media screen and (min-width: 700px) {
    section#projects .project {
      margin-bottom: 156px; } }
section#projects .project-info span {
  opacity: 0.32; }
section#projects .project-role {
  font-family: "IBM Plex Mono", "Courier New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  margin-top: 20px;
  opacity: 0.32;
  font-size: 14px; }
  @media screen and (min-width: 700px) {
    section#projects .project-role {
      margin-top: 32px; } }
section#projects img {
  width: 98%;
  padding: 2%;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  margin-top: 10px; }
section#projects .project .project-info h3 {
  color: rgba(255, 255, 255, 0.4); }
section#projects .project .project-left-align div:nth-of-type(1) {
  order: 2; }
section#projects .project .project-left-align .project-image img {
  float: right; }
section#projects .project .project-right-align .project-info {
  padding-right: 56px;
  text-align: right; }
section#projects .project .project-left-align .project-info {
  padding-left: 56px; }
section#projects .project img {
  margin-top: 0; }
@media screen and (min-width: 1800px) {
  section#projects .project-left-align .project-info {
    padding-left: 56px; } }

/* RESEARCH */
section#research .research-link-arrow {
  position: relative;
  bottom: 3px;
  left: 1px;
  transition: all 0.1s ease-in; }
section#research ul {
  margin-top: 16px; }
  section#research ul li {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 6px; }
    section#research ul li a {
      position: relative;
      bottom: 1px;
      display: inline-block;
      padding: 7px;
      border-radius: 6px;
      background-color: rgba(255, 255, 255, 0.06);
      font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.32);
      transition: all 0.1s ease-in; }
      section#research ul li a:hover {
        color: rgba(255, 255, 255, 0.8);
        transform: scale(1.01);
        background-color: rgba(255, 255, 255, 0.12); }
        section#research ul li a:hover .research-link-arrow {
          bottom: 4px;
          left: 2px;
          transition: all 0.1s ease-in; }
section#research h4 {
  font-family: "IBM Plex Mono", "Courier New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 180%;
  color: white;
  margin-bottom: 4px;
  letter-spacing: .03em;
  text-transform: uppercase; }
section#research p.research-description, section#research section#blog-post-container ol li.research-description, section#blog-post-container ol section#research li.research-description {
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  opacity: 0.56;
  line-height: 160%;
  margin-bottom: 0; }
section#research .number {
  color: #36ffcb; }
section#research .research-item {
  break-inside: avoid;
  padding: 32px 0px 22px 0px;
  border-bottom: 2px dotted rgba(54, 255, 203, 0.24); }

/* FOOTER */
#starterpack #footer, body#credits #footer, body#blog #footer, body#blog-post-page #footer {
  border-color: #eb4545; }
  #starterpack #footer input#tlbutton, body#credits #footer input#tlbutton, body#blog #footer input#tlbutton, body#blog-post-page #footer input#tlbutton {
    background-color: #eb4545; }

div#footer {
  border-top: 2px solid #36ffcb;
  background-color: #141E30;
  background: radial-gradient(50% 50% at 50% 50%, #09203f 0%, #141e30 100%);
  margin-top: -3px;
  padding-top: 250px; }
  div#footer ul {
    text-align: center;
    padding-top: 250px;
    padding-bottom: 24px;
    font-size: 16px; }
    div#footer ul li {
      display: inline-block; }
    div#footer ul li a {
      display: inline-block;
      color: white;
      font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      padding-left: 8px;
      opacity: 0.4;
      transition: all 0.1s ease-in; }
    div#footer ul li a:hover {
      cursor: pointer;
      opacity: 1;
      transition: all 0.1s ease-in; }
  div#footer #socials-wrapper {
    max-width: 532px;
    margin: 0 auto; }
  div#footer footer {
    max-width: 532px;
    padding: 40px; }
    div#footer footer h2 {
      font-family: "Graphik Compact";
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: white;
      font-size: 28px;
      font-weight: 700; }
      @media screen and (min-width: 700px) {
        div#footer footer h2 {
          font-size: 52px; } }
    div#footer footer p, div#footer footer section#blog-post-container ol li, section#blog-post-container ol div#footer footer li,
    div#footer footer a {
      color: white;
      text-align: center;
      opacity: 0.72;
      margin-bottom: 40px; }
    div#footer footer a {
      text-decoration: underline; }
    div#footer footer input {
      height: 52px;
      border-radius: 10px;
      padding: 12px;
      border: none;
      background-color: rgba(255, 255, 255, 0.08);
      width: 100%;
      margin-bottom: 16px;
      font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 16px;
      color: white;
      -webkit-appearance: none;
      -moz-appearance: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      div#footer footer input:focus {
        border: 1px solid #36ffcb;
        outline: none; }
    div#footer footer input#tlbutton {
      font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 0;
      height: 52px;
      background-color: #36ffcb;
      border: none;
      color: #190B28;
      transition: all 0.2s ease-in;
      font-weight: 700;
      cursor: pointer; }
      div#footer footer input#tlbutton:hover {
        opacity: 0.8;
        transition: all 0.2s ease-in; }
    @media screen and (min-width: 700px) {
      div#footer footer {
        margin: 0 auto; } }

/* BLOG BLOB */
svg,
svg circle {
  position: relative;
  fill: #F6F0FC;
  top: -140px;
  left: -40px;
  z-index: -1; }
  @media screen and (min-width: 700px) {
    svg,
    svg circle {
      position: absolute;
      left: -60px; } }
  @media screen and (min-width: 1100px) {
    svg,
    svg circle {
      top: -200px; } }

@-webkit-keyframes from0to360 {
  from {
    -webkit-transform: rotate(0); }

  to {
    -webkit-transform: rotate(360deg); } }
@keyframes from0to360 {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(0); }

  to {
    -webkit-transform: rotate(0);
    transform: rotate(360deg); } }
#Circle1 {
  -webkit-animation: from360to0 2s linear infinite;
  animation: from0to360 1s linear infinite;
  cx: 150;
  cy: 145;
  r: 200;
  -webkit-transform-origin: 145px 150px;
  transform-origin: 145px 150px; }

@-webkit-keyframes from360to0 {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); }

  to {
    -webkit-transform: rotate(0);
    transform: rotate(0deg); } }
@keyframes from360to0 {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); }

  to {
    -webkit-transform: rotate(0);
    transform: rotate(0deg); } }
#Circle2 {
  -webkit-animation: from360to0 2s linear infinite;
  animation: from360to0 2s linear infinite;
  cx: 150;
  cy: 155;
  r: 200;
  -webkit-transform-origin: 155px 150px;
  transform-origin: 155px 150px; }

#Circle3 {
  -webkit-animation: from360to0 2s linear infinite;
  animation: from0to360 3s linear infinite;
  cx: 145;
  cy: 150;
  r: 200;
  -webkit-transform-origin: 150px 145px;
  transform-origin: 150px 145px; }

#Circle4 {
  -webkit-animation: from360to0 2s linear infinite;
  animation: from360to0 2.5s linear infinite;
  cx: 155;
  cy: 150;
  r: 200;
  -webkit-transform-origin: 150px 155px;
  transform-origin: 150px 155px; }

div#cocoon p#cocoon-description, div#cocoon section#blog-post-container ol li#cocoon-description, section#blog-post-container ol div#cocoon li#cocoon-description {
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 160%; }
  div#cocoon p#cocoon-description span, div#cocoon section#blog-post-container ol li#cocoon-description span, section#blog-post-container ol div#cocoon li#cocoon-description span {
    color: #eb4545; }
div#cocoon p, div#cocoon section#blog-post-container ol li, section#blog-post-container ol div#cocoon li {
  font-family: "IBM Plex Mono", "Courier New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 180%; }
div#cocoon h3 {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid rgba(20, 30, 48, 0.08); }
div#cocoon h3 a {
  padding-left: 4px;
  float: right;
  opacity: 0.2;
  color: #141e30;
  display: inline-block; }
  div#cocoon h3 a:hover {
    text-decoration: underline; }

/* BLOG */
.article-card-wrapper {
  margin-bottom: 28px; }

img.shadow {
  box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.12); }

body#blog-post-page, body#credits {
  background-color: #FCF9F4; }
  body#blog-post-page section#nav nav a:hover:after, body#credits section#nav nav a:hover:after {
    background-color: #eb4545; }

body#blog {
  background: linear-gradient(180deg, #fcf9f4 0%, #f9f4ea 100%); }
  body#blog h5 {
    font-family: "Graphik";
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 28px;
    padding-bottom: 10px;
    margin-top: 64px;
    color: #141e30;
    opacity: 0.24;
    border-bottom: 1px solid rgba(20, 30, 48, 0.32); }
    body#blog h5 span {
      float: right; }
  body#blog h5#hot-off-the-press {
    margin-top: 0px; }
  body#blog section#nav nav a:hover:after {
    background-color: #eb4545; }
  body#blog .navigatin-blob {
    position: relative; }
  body#blog .hvr-curl-top-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative; }
  body#blog .hvr-curl-top-right:before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    top: 0;
    right: 0;
    background: #FCF9F4;
    /* IE9 */
    background: linear-gradient(225deg, #fcf9f4 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height; }
    @media (prefers-color-scheme: dark) {
      body#blog .hvr-curl-top-right:before {
        background: #141E30;
        background: linear-gradient(225deg, #141e30 45%, #aaaaaa 50%, #cccccc 56%, white 80%); } }
  body#blog .hvr-curl-top-right:hover:before, body#blog .hvr-curl-top-right:focus:before, body#blog .hvr-curl-top-right:active:before {
    width: 25px;
    height: 25px; }
  body#blog .underline {
    padding-bottom: 0px;
    /* I don't know why this is needed, I just added it and it worked in IE Edge. If we remove this width, the gradient breaks in IE Edge */
    width: calc(100%);
    background-image: linear-gradient(transparent calc(90% - 10px), #fada5c 10px);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.7s; }
  body#blog .article-card:hover .underline {
    opacity: 1;
    background-size: 100% 100%; }
  body#blog .article-card {
    width: 100%;
    background-color: white;
    border-radius: 4px 20px 4px 4px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.4s ease-in-out; }
    body#blog .article-card p, body#blog .article-card section#blog-post-container ol li, section#blog-post-container ol body#blog .article-card li {
      font-size: 19px; }
    body#blog .article-card .article-card-content {
      padding: 20px 20px 12px 20px; }
      @media screen and (min-width: 700px) {
        body#blog .article-card .article-card-content {
          padding: 32px 32px 12px 32px; } }
    body#blog .article-card .metadata {
      margin-bottom: 8px; }
    body#blog .article-card .read-time {
      transition: all 0.6s ease-in-out; }
    body#blog .article-card:first-of-type {
      margin-top: 0px; }
    body#blog .article-card:hover {
      box-shadow: 0px 16px 24px #F6EEDF;
      transform: scale(1.02);
      transition: all 0.4s ease-in-out;
      border-radius: 20px 20px 20px 20px; }
      body#blog .article-card:hover .read-time {
        opacity: 1;
        transition: all 0.3s ease-in-out; }
      body#blog .article-card:hover #blog-author {
        opacity: 1;
        transition: all 0.6s ease-in-out; }

.middle-dot {
  opacity: 0.2; }

section#blog-post-container {
  max-width: 600px; }
  @media screen and (min-width: 700px) {
    section#blog-post-container {
      margin: 0 auto 96px auto; } }
  section#blog-post-container .metadata {
    margin-top: 8px;
    margin-bottom: 40px;
    font-size: 14px; }
  section#blog-post-container .small-caps {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px; }
  section#blog-post-container h2 {
    font-size: 20px;
    margin-top: 40px;
    color: #49556f;
    line-height: 140%; }
  section#blog-post-container h2.medium {
    color: #49556f;
    font-size: 32px;
    font-weight: 900;
    margin-top: 72px;
    margin-bottom: 16px;
    line-height: 110%; }
  section#blog-post-container img,
  section#blog-post-container video,
  section#blog-post-container iframe {
    width: 100%; }
  section#blog-post-container iframe {
    margin-bottom: 20px; }
  section#blog-post-container img {
    border-radius: 12px; }
  section#blog-post-container img.no-border-radius {
    border-radius: 0px; }
  @media screen and (min-width: 1100px) {
    section#blog-post-container img.medium {
      margin: 12px 0px;
      width: 70vw;
      margin-left: calc(50% - 35vw);
      margin-right: calc(50% - 35vw); } }
  section#blog-post-container .xL {
    border-radius: 0;
    margin: 32px 0px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw); }
  section#blog-post-container img.small {
    width: 40%;
    margin-left: 30%; }
  section#blog-post-container img.xL.forking-memes {
    margin-bottom: 0; }
  section#blog-post-container .no-shadow {
    box-shadow: none; }
  section#blog-post-container:last-of-type {
    border-bottom: none; }
  section#blog-post-container div.further-reading p, section#blog-post-container div.further-reading ol li, section#blog-post-container ol div.further-reading li {
    font-size: 18px; }
  section#blog-post-container div.contents p, section#blog-post-container div.contents ol li, section#blog-post-container ol div.contents li {
    font-size: 18px;
    margin-bottom: 8px; }
  section#blog-post-container h1,
  section#blog-post-container h1 a {
    font-size: 36px;
    line-height: 100%;
    letter-spacing: -.02em;
    text-transform: uppercase;
    display: block;
    font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 900;
    color: #141e30; }
    @media screen and (min-width: 600px) {
      section#blog-post-container h1,
      section#blog-post-container h1 a {
        letter-spacing: -1px;
        margin-top: 150px;
        font-size: 44px;
        line-height: 96%; } }
  section#blog-post-container h2 a {
    font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #141e30;
    font-weight: 900; }
  section#blog-post-container h3 {
    margin-top: 56px;
    margin-bottom: 16px;
    font-weight: 700; }
  section#blog-post-container p a, section#blog-post-container ol li a {
    color: #141e30;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: color 0.175s ease, background-color 0.15s ease, box-shadow 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.175s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    @media screen and (max-width: 900px) {
      section#blog-post-container p a, section#blog-post-container ol li a {
        background-image: linear-gradient(rgba(255, 255, 255, 0) 63%, rgba(235, 69, 69, 0.16) 38%);
        display: inline; }
        section#blog-post-container p a:hover, section#blog-post-container ol li a:hover {
          background-image: linear-gradient(rgba(255, 69, 69, 0.08) 100%, rgba(255, 69, 69, 0.08) 100%);
          transition: all 0.175s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: color 0s;
          padding-bottom: 3px; } }
  section#blog-post-container p a:hover, section#blog-post-container ol li a:hover {
    color: #eb4545;
    background-color: rgba(235, 69, 69, 0.1);
    transform: skew(-4deg) scaleX(0.98);
    text-decoration: none; }
  section#blog-post-container p a::after, section#blog-post-container ol li a::after {
    content: "";
    width: 100%;
    height: 9px;
    background-color: rgba(235, 69, 69, 0.16);
    position: absolute;
    bottom: 3px;
    left: 0;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    @media screen and (max-width: 900px) {
      section#blog-post-container p a::after, section#blog-post-container ol li a::after {
        height: 0px; } }
  section#blog-post-container p a:hover:after, section#blog-post-container ol li a:hover:after {
    height: 2px;
    bottom: 0px;
    transform: translateY(2px);
    background-color: rgba(235, 69, 69, 0.8); }
  section#blog-post-container sup a {
    color: #eb4545; }
  section#blog-post-container sup a::after {
    height: 0; }
  section#blog-post-container ol, section#blog-post-container .footnotes ol {
    margin-left: 6%; }
    @media screen and (min-width: 500px) {
      section#blog-post-container ol, section#blog-post-container .footnotes ol {
        margin-left: 19px; } }
  section#blog-post-container ol li {
    list-style-type: decimal; }
  section#blog-post-container ul li {
    list-style-type: square; }
  section#blog-post-container blockquote {
    border-left: 2px solid #eb4545;
    padding-left: 18px; }
    section#blog-post-container blockquote p, section#blog-post-container blockquote ol li, section#blog-post-container ol blockquote li {
      opacity: 0.64; }
  section#blog-post-container blockquote.tiktok-embed {
    padding-left: 0px;
    border-left: none; }
  section#blog-post-container hr {
    border: 1px solid #eeeeee;
    margin: 40px 0px; }
  section#blog-post-container sup {
    font-size: 14px;
    position: relative;
    top: -5px; }
  section#blog-post-container .footnotes hr {
    display: none; }

.blog-grid, section#blog-post-container {
  margin-top: 100px; }
  @media screen and (min-width: 500px) {
    .blog-grid, section#blog-post-container {
      margin: 120px auto; } }

section#blog {
  margin-bottom: 84px;
  /* END MEDIA QUERY */ }
  section#blog #blog-sidebar {
    display: none; }
  @media screen and (min-width: 1100px) {
    section#blog {
      width: 100%; }
      section#blog .blog-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 600px 1fr; }
        section#blog .blog-grid #blog-sidebar {
          display: block;
          text-align: right;
          margin-right: 24px; }
          section#blog .blog-grid #blog-sidebar p:last-of-type, section#blog .blog-grid #blog-sidebar section#blog-post-container ol li:last-of-type, section#blog-post-container ol section#blog .blog-grid #blog-sidebar li:last-of-type {
            margin-top: 28px; }
          section#blog .blog-grid #blog-sidebar li {
            padding-bottom: 4px; }
          section#blog .blog-grid #blog-sidebar p, section#blog .blog-grid #blog-sidebar section#blog-post-container ol li, section#blog-post-container ol section#blog .blog-grid #blog-sidebar li,
          section#blog .blog-grid #blog-sidebar li a {
            color: #141e30;
            opacity: 0.32;
            font-weight: 500;
            font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            font-size: 13px;
            transition: all 0.1s ease-in; }
          section#blog .blog-grid #blog-sidebar li a:hover {
            color: #eb4545;
            transition: all 0.1s ease-in;
            padding-right: 4px;
            opacity: 1; }
          section#blog .blog-grid #blog-sidebar li a#twitter:hover {
            color: #1DA1F2; }
          section#blog .blog-grid #blog-sidebar li a#arena:hover {
            color: black; }
          section#blog .blog-grid #blog-sidebar li a#rss:hover {
            color: #DF8546; }
          section#blog .blog-grid #blog-sidebar p, section#blog .blog-grid #blog-sidebar section#blog-post-container ol li, section#blog-post-container ol section#blog .blog-grid #blog-sidebar li {
            font-weight: 700;
            opacity: 0.48;
            margin-bottom: 4px; } }
  section#blog h3 {
    color: #141e30;
    opacity: 0.32; }
  section#blog h2 {
    font-size: 28px;
    line-height: 112%;
    text-transform: uppercase;
    letter-spacing: -0.01em; }
  section#blog h2,
  section#blog p,
  section#blog section#blog-post-container ol li,
  section#blog-post-container ol section#blog li {
    max-width: 600px; }

@media (prefers-color-scheme: dark) {
  body#blog {
    background: linear-gradient(135deg, #141e30 0%, #0f1114 74%); }
    body#blog hr {
      border: 1px solid rgba(255, 255, 255, 0.12) !important; }
    body#blog p a::after, body#blog section#blog-post-container ol li a::after, section#blog-post-container ol body#blog li a::after {
      background-color: rgba(235, 69, 69, 0.64);
      z-index: -1; }
    body#blog .article-card:hover {
      box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.2); }
    body#blog h5 {
      color: rgba(255, 255, 255, 0.32);
      border-bottom: 3px dotted rgba(255, 255, 255, 0.08);
      opacity: 1; }
    body#blog .masthead h1 {
      color: white; }
    body#blog .masthead p, body#blog .masthead section#blog-post-container ol li, section#blog-post-container ol body#blog .masthead li {
      opacity: 0.2; }
    body#blog section#blog #blog-sidebar p, body#blog section#blog #blog-sidebar section#blog-post-container ol li, section#blog-post-container ol body#blog section#blog #blog-sidebar li {
      color: white;
      opacity: 0.32; }
    body#blog section#blog #blog-sidebar li a {
      color: white;
      opacity: 0.2; }
      body#blog section#blog #blog-sidebar li a:hover {
        color: #eb4545;
        opacity: 1; }
    body#blog section#blog #blog-sidebar li a#arena:hover {
      color: white; }
    body#blog nav a {
      color: white;
      opacity: 0.32; }
      body#blog nav a:hover {
        background-color: rgba(255, 255, 255, 0.12); }
    body#blog nav a:hover {
      opacity: 1;
      color: white; }
    body#blog nav a::after {
      content: "";
      background-color: rgba(255, 255, 255, 0.32); }
    body#blog nav a:hover:after {
      color: white; }
    body#blog .article-card {
      background-color: rgba(255, 255, 255, 0.06); }
    body#blog .underline {
      background-image: linear-gradient(transparent calc(90% - 10px), rgba(250, 218, 92, 0.32) 10px); }
    body#blog h1, body#blog h2 {
      color: white;
      opacity: 0.9; }
    body#blog p, body#blog section#blog-post-container ol li, section#blog-post-container ol body#blog li, body#blog p a, body#blog section#blog-post-container ol li a, section#blog-post-container ol body#blog li a {
      color: white;
      opacity: 0.9; }
    body#blog h3 a {
      color: white;
      opacity: 0.32; } }

/* PROJECT PAGE */
section.project {
  margin-top: 100px; }
  section.project p, section.project section#blog-post-container ol li, section#blog-post-container ol section.project li,
  section.project a {
    font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
  section.project h3 {
    color: #cccccc;
    margin-bottom: 8px;
    background: none;
    -webkit-background-clip: none;
    -webkit-text-fill-color: #cccccc; }
  section.project h1 {
    text-transform: uppercase;
    font-family: "Graphik Compact";
    font-weight: 900;
    letter-spacing: -0.03em; }
  @media screen and (min-width: 700px) {
    section.project {
      margin-top: 200px; }
      section.project h1,
      section.project h2,
      section.project h3,
      section.project p,
      section.project section#blog-post-container ol li,
      section#blog-post-container ol section.project li,
      section.project img {
        max-width: 900px;
        margin: 0 auto; }
      section.project h1,
      section.project h2 {
        margin-bottom: 0;
        font-size: 84px;
        font-weight: 900; }
      section.project p, section.project section#blog-post-container ol li, section#blog-post-container ol section.project li,
      section.project a {
        margin-top: 40px;
        font-size: 32px; }
      section.project .credits {
        margin-top: 64px; }
        section.project .credits p, section.project .credits section#blog-post-container ol li, section#blog-post-container ol section.project .credits li,
        section.project .credits h2 {
          font-size: 20px;
          margin-top: 20px; } }
  section.project span {
    color: #cccccc; }
  section.project .grid {
    margin-top: 92px;
    margin-bottom: 72px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 24px; }
  section.project img {
    margin-top: 72px;
    width: 100%; }

.twitter-tweet,
.quoteback-container {
  margin-top: 40px !important; }

.quoteback-container {
  margin-bottom: 40px !important; }

/* YOU CAN HANDLE THE POST-TRUTH */
section#blog-post-container h2.post-truth-section-header {
  color: white;
  letter-spacing: .04em;
  font-size: 48px;
  padding: 72px 32px;
  line-height: 300%;
  margin: 0 auto;
  opacity: 0.666;
  text-transform: uppercase; }
  @media screen and (min-width: 700px) {
    section#blog-post-container h2.post-truth-section-header {
      padding: 120px 32px;
      line-height: 250%;
      font-size: 6em; } }
section#blog-post-container div.section-hero {
  position: relative;
  text-align: center;
  width: 100vw;
  left: calc(-50vw + 50%);
  height: auto;
  background: url("../images/post-truth/memedics-bg.png");
  background-size: cover;
  margin: 96px auto; }

/* DOWN IN THE DM */
section#blog-post-container div.SMS {
  height: 100%; }
  section#blog-post-container div.SMS .twitter-tweet {
    margin-top: 0px !important; }
  section#blog-post-container div.SMS div.bubble-group {
    margin-bottom: 24px; }
  section#blog-post-container div.SMS p, section#blog-post-container div.SMS ol li, section#blog-post-container ol div.SMS li {
    font-size: 16px;
    margin-bottom: 6px; }
  section#blog-post-container div.SMS p.bubble, section#blog-post-container div.SMS ol li.bubble, section#blog-post-container ol div.SMS li.bubble {
    font-family: -apple-system, system-ui, "Helvetica Neue", "Work Sans", sans-serif;
    display: flex; }
  section#blog-post-container div.SMS p.bubble span, section#blog-post-container div.SMS ol li.bubble span, section#blog-post-container ol div.SMS li.bubble span {
    padding: 12px;
    border-radius: 20px; }
  section#blog-post-container div.SMS .pull-quote {
    align-items: flex-end;
    flex-direction: row-reverse;
    max-width: 90%;
    margin-left: 8%; }
  section#blog-post-container div.SMS p.bubble-right, section#blog-post-container div.SMS ol li.bubble-right, section#blog-post-container ol div.SMS li.bubble-right {
    color: white;
    align-items: flex-end;
    flex-direction: row-reverse;
    max-width: 80%;
    margin-left: 20%; }
    section#blog-post-container div.SMS p.bubble-right span, section#blog-post-container div.SMS ol li.bubble-right span, section#blog-post-container ol div.SMS li.bubble-right span {
      background-color: #1E59DC; }
  section#blog-post-container div.SMS p.bubble-left, section#blog-post-container div.SMS ol li.bubble-left, section#blog-post-container ol div.SMS li.bubble-left {
    max-width: 80%; }
    section#blog-post-container div.SMS p.bubble-left span, section#blog-post-container div.SMS ol li.bubble-left span, section#blog-post-container ol div.SMS li.bubble-left span {
      background-color: #E5E5E9; }

/* DYNAMIC JOURNAL */
section#blog-post-container textarea {
  border-style: none;
  width: 84%;
  height: 300px;
  margin: 12px 0px;
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
  padding: 20px;
  border: 1px solid #6600cd;
  border-radius: 4px;
  transition: all 0.3s ease-in; }
  section#blog-post-container textarea:focus {
    outline: 0;
    border: 1px solid #eb4545;
    box-shadow: 0px 4px 48px 0px rgba(189, 208, 223, 0.32);
    transition: all 0.3s ease-out; }
  @media screen and (min-width: 700px) {
    section#blog-post-container textarea {
      width: 554px; } }

.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden; }

.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #141e30;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0; }

#recently-started .recommendation a:hover {
  padding-left: 0px;
  cursor: default; }
  #recently-started .recommendation a:hover .year {
    color: #E9BB07; }

.recommendation a {
  color: black;
  border-bottom: 2px solid #141e30;
  padding: 16px 0px;
  display: block;
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: all 0.2s ease-in;
  line-height: 150%;
  font-size: 17px; }
  .recommendation a .year, .recommendation a .author, .recommendation a .starterpack-subtitle {
    display: none; }
  @media screen and (min-width: 700px) {
    .recommendation a .author, .recommendation a .starterpack-subtitle {
      display: inline; } }
  @media screen and (min-width: 700px) {
    .recommendation a {
      font-size: 18px;
      padding: 20px 0px; }
      .recommendation a .year {
        display: inline-block;
        position: relative;
        top: 3px; } }
  .recommendation a:hover {
    padding-left: 10px;
    transition: all 0.2s ease-in; }
    .recommendation a:hover .year {
      color: #141e30;
      transition: all 0.2s ease-in; }
.recommendation .author {
  color: #CBA306;
  margin-left: 8px; }
.recommendation .year {
  font-family: "IBM Plex Mono", "Courier New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #E9BB07;
  transition: all 0.2s ease-in; }
.recommendation .title, .recommendation .starterpack-subtitle {
  font-weight: 700; }
.recommendation .year {
  float: right; }

.recently-started a {
  cursor: default; }

#starterpack {
  background-color: #FADA5C;
  /* Render items as columns */ }
  #starterpack .site-content-wrapper {
    margin-top: 180px; }
    @media screen and (min-width: 700px) {
      #starterpack .site-content-wrapper {
        width: 88%;
        margin-left: 6%; } }
  @media screen and (min-width: 700px) {
    #starterpack section#nav {
      position: relative; } }
  #starterpack .masthead h1 span {
    color: #eb4545;
    opacity: 1; }
  #starterpack p#lblGreetings, #starterpack section#blog-post-container ol li#lblGreetings, section#blog-post-container ol #starterpack li#lblGreetings {
    opacity: 0.32;
    color: #141e30; }
  #starterpack section#nav nav a:hover:after {
    background-color: #eb4545; }
  #starterpack h3 {
    font-weight: 500;
    color: #eb4545;
    font-size: 12px;
    margin-bottom: 12px; }
    @media screen and (min-width: 700px) {
      #starterpack h3 {
        font-size: 14px;
        margin-bottom: 20px; } }
  #starterpack svg, #starterpack svg circle {
    fill: white;
    opacity: 0.2;
    position: relative; }
  #starterpack #starterpack-page-wrapper, #starterpack .recommendations-wrapper {
    max-width: 1200px; }
  #starterpack .recommendations-wrapper {
    margin-top: 120px; }
  #starterpack #recommendations-group {
    margin-bottom: 125px; }
    @media screen and (min-width: 900px) {
      #starterpack #recommendations-group {
        margin-bottom: 250px;
        width: 78%;
        margin-left: 11%; } }
    @media screen and (min-width: 1300px) {
      #starterpack #recommendations-group {
        width: 70%;
        margin-left: 15%; } }
  #starterpack #starterpack-grid > * {
    display: inline-block;
    width: 100%;
    -webkit-column-break-inside: avoid;
    /* Chrome, Safari, Opera */
    page-break-inside: avoid;
    /* Firefox */
    break-inside: avoid;
    /* IE 10+ */ }
  #starterpack #starterpack-grid {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    column-count: 2;
    column-gap: 0; }
    @media screen and (min-width: 900px) {
      #starterpack #starterpack-grid {
        -webkit-column-count: 3;
        -webkit-column-gap: 1em;
        column-count: 3;
        column-gap: 1em;
        margin-left: 1%; } }
    @media screen and (min-width: 1100px) {
      #starterpack #starterpack-grid {
        margin-left: 2%; } }
    #starterpack #starterpack-grid .item {
      break-inside: avoid;
      display: inline-block;
      padding-bottom: 4%;
      padding-left: 2%; }
      @media screen and (min-width: 1100px) {
        #starterpack #starterpack-grid .item {
          padding-bottom: 32px; } }
    #starterpack #starterpack-grid img {
      border: 4px solid #141e30;
      width: 90%;
      display: inline-block;
      border-radius: 5px;
      transition: all 0.3s ease-in; }
      #starterpack #starterpack-grid img:hover {
        border-radius: 10px;
        transition: all 0.3s ease-in; }
      @media screen and (min-width: 700px) {
        #starterpack #starterpack-grid img {
          width: 92%; } }
  #starterpack #starterpack-banner {
    font-size: 14vw;
    font-family: "Graphik Compact", "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 32px;
    width: 100%;
    text-align: center;
    display: inline-block;
    color: #eb4545; }
    @media screen and (min-width: 700px) {
      #starterpack #starterpack-banner {
        letter-spacing: -4px;
        font-size: 12.5vw; } }
    @media screen and (min-width: 1100px) {
      #starterpack #starterpack-banner {
        font-size: 190px;
        letter-spacing: -8px;
        margin-left: -1%;
        font-size: 13.5vw; } }

.scroll-left {
  height: 50px;
  overflow: hidden;
  position: relative;
  margin-bottom: 132px;
  border-top: 4px solid #eb4545;
  border-bottom: 1px solid #eb4545; }
  @media screen and (min-width: 700px) {
    .scroll-left {
      margin-bottom: 100px; } }

.scroll-left p, .scroll-left section#blog-post-container ol li, section#blog-post-container ol .scroll-left li {
  position: absolute;
  font-size: 13px;
  width: max-content;
  max-width: max-content;
  height: 100%;
  margin: 0;
  line-height: 50px;
  color: #eb4545;
  font-weight: 500;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", "Courier New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: center;
  /* Starting position */
  -moz-transform: translateX(5%);
  -webkit-transform: translateX(5%);
  transform: translateX(5%);
  /* Apply animation to this element */
  -moz-animation: scroll-left 180s linear infinite;
  -webkit-animation: scroll-left 180s linear infinite;
  animation: scroll-left 180s linear infinite; }
  @media screen and (min-width: 700px) {
    .scroll-left p, .scroll-left section#blog-post-container ol li, section#blog-post-container ol .scroll-left li {
      font-size: 15px; } }

/* Move it (define the animation) */
@-moz-keyframes scroll-left {
  0% {
    -moz-transform: translateX(5%); }

  100% {
    -moz-transform: translateX(-100%); } }
@-webkit-keyframes scroll-left {
  0% {
    -webkit-transform: translateX(5%); }

  100% {
    -webkit-transform: translateX(-100%); } }
@keyframes scroll-left {
  0% {
    -moz-transform: translateX(5%);
    /* Browser bug fix */
    -webkit-transform: translateX(5%);
    /* Browser bug fix */
    transform: translateX(5%); }

  100% {
    -moz-transform: translateX(-100%);
    /* Browser bug fix */
    -webkit-transform: translateX(-100%);
    /* Browser bug fix */
    transform: translateX(-100%); } }
.hvr-grow-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform; }

.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
  -webkit-transform: scale(1.01) rotate(0.7deg);
  transform: scale(1.01) rotate(0.7deg); }

body#credits .site-content-wrapper {
  margin-top: 120px; }
body#credits .section-header {
  background: linear-gradient(122.01deg, #eb4545 0%, #fada5c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 100%;
  line-height: 80%;
  font-size: 72px;
  letter-spacing: -2px; }
  @media screen and (min-width: 321px) {
    body#credits .section-header {
      font-size: 84px; } }
  @media screen and (min-width: 700px) {
    body#credits .section-header {
      font-size: 100px; } }
  @media screen and (min-width: 1100px) {
    body#credits .section-header {
      font-size: 140px;
      line-height: 84%;
      letter-spacing: -4px; } }

section#credits {
  margin-bottom: 0px; }
  section#credits h4 {
    font-size: 18px;
    line-height: 140%;
    font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #141e30;
    padding-bottom: 10px;
    margin-top: 40px; }
    @media screen and (min-width: 700px) {
      section#credits h4 {
        font-size: 19px; } }
    section#credits h4:first-of-type {
      margin-top: 0; }
  section#credits p a, section#credits section#blog-post-container ol li a, section#blog-post-container ol section#credits li a {
    color: #141e30;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: color 0.175s ease, background-color 0.15s ease, box-shadow 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.175s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    @media screen and (max-width: 900px) {
      section#credits p a, section#credits section#blog-post-container ol li a, section#blog-post-container ol section#credits li a {
        background-image: linear-gradient(rgba(255, 255, 255, 0) 63%, rgba(235, 69, 69, 0.16) 38%);
        display: inline; }
        section#credits p a:hover, section#credits section#blog-post-container ol li a:hover, section#blog-post-container ol section#credits li a:hover {
          background-image: linear-gradient(rgba(255, 69, 69, 0.08) 100%, rgba(255, 69, 69, 0.08) 100%);
          transition: all 0.175s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: color 0s;
          padding-bottom: 3px; } }
  section#credits p a:hover, section#credits section#blog-post-container ol li a:hover, section#blog-post-container ol section#credits li a:hover {
    color: #eb4545;
    background-color: rgba(235, 69, 69, 0.1);
    transform: skew(-4deg) scaleX(0.98);
    text-decoration: none; }
  section#credits p a::after, section#credits section#blog-post-container ol li a::after, section#blog-post-container ol section#credits li a::after {
    content: "";
    width: 100%;
    height: 9px;
    background-color: rgba(235, 69, 69, 0.16);
    position: absolute;
    bottom: 3px;
    left: 0;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    @media screen and (max-width: 900px) {
      section#credits p a::after, section#credits section#blog-post-container ol li a::after, section#blog-post-container ol section#credits li a::after {
        height: 0px; } }
  section#credits p a:hover:after, section#credits section#blog-post-container ol li a:hover:after, section#blog-post-container ol section#credits li a:hover:after {
    height: 2px;
    bottom: 0px;
    transform: translateY(2px);
    background-color: rgba(235, 69, 69, 0.8); }
  section#credits img {
    display: block;
    width: 100%;
    margin-bottom: 48px;
    transform: rotate(4deg);
    max-width: 400px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.03); }
  section#credits img#polaroid-jzl {
    display: none; }
  @media screen and (min-width: 1100px) {
    section#credits img {
      float: right; }
    section#credits img#polaroid-jzl {
      display: block;
      transform: rotate(-4deg);
      margin-top: 24px;
      max-width: 340px; }
    section#credits .two-column-grid {
      display: grid;
      grid-template-columns: 60% 40%;
      grid-column-gap: 72px;
      grid-template-areas: " a b "; }
      section#credits .two-column-grid #credits-grid-column-text {
        grid-area: a; }
      section#credits .two-column-grid #credits-grid-column-image {
        grid-area: b;
        margin-top: 24px; }
      section#credits .two-column-grid:last-child {
        z-index: 999; } }
  section#credits strong {
    font-weight: 900; }

.credits-pilcrow {
  font-family: "Graphik";
  font-size: 12px;
  position: relative;
  bottom: 1;
  padding: 0 1px; }

.credits-names-wrapper .credits-pilcrow {
  color: #eb4545;
  opacity: 0.6; }

.credits-name {
  white-space: nowrap; }

.credits-date, .credits-date .credts-pilcrow {
  color: #E4C89B; }

.greeting {
  height: 24px;
  overflow: hidden;
  position: relative;
  width: 100%; }

.greeting p, .greeting section#blog-post-container ol li, section#blog-post-container ol .greeting li {
  position: absolute;
  font-size: 13px;
  margin-top: -8px;
  width: max-content;
  max-width: max-content;
  height: 100%;
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", "Courier New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: center;
  /* Starting position */
  -moz-transform: translateX(0%);
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  /* Apply animation to this element */
  -moz-animation: greeting-animation 48s linear infinite;
  -webkit-animation: greeting-animation 48s linear infinite;
  animation: greeting-animation 48s linear infinite; }

/* Move it (define the animation) */
@-moz-keyframes greeting-animation {
  0% {
    -moz-transform: translateX(5%); }

  100% {
    -moz-transform: translateX(-100%); } }
@-webkit-keyframes greeting-animation {
  0% {
    -webkit-transform: translateX(5%); }

  100% {
    -webkit-transform: translateX(-100%); } }
@keyframes greeting-animation {
  0% {
    -moz-transform: translateX(5%);
    /* Browser bug fix */
    -webkit-transform: translateX(5%);
    /* Browser bug fix */
    transform: translateX(5%); }

  100% {
    -moz-transform: translateX(-100%);
    /* Browser bug fix */
    -webkit-transform: translateX(-100%);
    /* Browser bug fix */
    transform: translateX(-100%); } }