/*

    dark: #1c1b1d;
    light: #f5efef;
    cyan: #1dceaf;
    pink: #7552ec;
    purple: #d139c8;

    title
    font: 700 0.84rem 'Space Grotesk', helvetica, arial, 'sans-serif';
    text-transform: uppercase;
    letter-spacing: 0.1em
*/
html {
  --dark-color: rgba(28, 27, 29, 1);
  --dark-transparent-color: rgba(28, 27, 29, 0);
  --light-color: #f5efef;
  --light-bg-color: rgba(255, 255, 255, 1);
  --light-transparent-bg-color: rgba(255, 255, 255, 0);
  --light-on-purple-color: #ffffff;
  --cyan-color: #1dceaf;
  --purple-color: #7552ec;
  --pink-color: #d139c8;
  --header-font: 700 0.84rem 'Space Grotesk', helvetica, arial, 'sans-serif';
}

body {
  background: var(--light-bg-color);
  color: var(--dark-color);
  --logo-height: 72px;
  font-size: 1.3em;
  --text-color: var(--dark-color);
  --bg-color: var(--light-bg-color);
  --splash-blend: multiply;
  --image-gradient: linear-gradient(var(--light-transparent-bg-color), var(--light-bg-color) 100%) repeat scroll 0 0;
}


@media (prefers-color-scheme: dark) {
  body {
    background: var(--dark-color);
    color: var(--light-color);
    --text-color: var(--light-color);
    --bg-color: var(--dark-color);
    --splash-blend: screen;
    --image-gradient: var(--dark-transparent-color) linear-gradient(to bottom, var(--dark-color) 100%) repeat scroll 0 0;
  }

  .youtube-link {
    color: #ffffff !important;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: var(--light-bg-color);
    color: var(--dark-color);
    --text-color: var(--dark-color);
    --bg-color: var(--light-bg-color);
    --splash-blend: multiply;
    --image-gradient: var(--light-transparent-bg-color) linear-gradient(to bottom, var(--light-bg-color) 100%) repeat scroll 0 0;
  }
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Lato', helvetica, arial, 'sans-serif';
  font-weight: 400;

  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

nav {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-top: 48px;
  margin-bottom: 48px;
}

nav a,
nav a:link,
nav a:visited,
nav a:active {
  text-decoration: none;
  font-size: 1.2em;
  color: var(--text-color);
  font-weight: bold;
  padding: 8px;
  white-space: nowrap;
}

nav a:hover {
  background-color: var(--purple-color);
  color: var(--light-on-purple-color);
}

a,
a:link,
a:visited,
a:active {
  color: var(--pink-color);
}

a:hover {}

hr {
  visibility: hidden;
  margin-top: 16px;
  margin-bottom: 16px;
}

h1,
h2,
h3 {
  font: var(--header-font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 2em;
  text-align: center;
}

h2 {
  font-size: 1.5em;
  text-align: left;
}

h2 a,
h2 a:link,
h2 a:visited,
h2 a:active {
  padding: 8px;
  display: inline-block;
  text-decoration: underline;
  color: var(--text-color);
}

img {
  max-width: 100%;
}

ul {}

li {
  font-size: 1.2em;
  line-height: 1.5em;
}

li li {
  font-size: 1em;
}


main,
footer p,
footer h2 {
  display: block;
  margin-left: 16px;
  margin-right: 16px;
}

footer {
  margin-top: 64px;
}

@media (min-width: 1024px) {

  body {
    --logo-height: 128px;
  }

  main {}

  main,
  footer p,
  footer h2,
  .hero,
  .blast,
  .latest-posts,
  .fancy-video-container,
  .newsletter form {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
  }


  a.logo,
  a:link.logo,
  a:visited.logo,
  a:active.logo {
    height: 72px;
  }

  .logo .tt {
    display: flex;
    justify-content: center;
  }

  .logo .tt img {
    height: 72px;
  }


  .logo .tt span {
    height: 72px;
    line-height: 72px;
  }

  .hero {
    display: flex;
    gap: 32px;
    margin-top: 64px;
  }

  .hero .column {
    width: 33%;
    margin-top: 0;
  }

  .bg-block {
    max-width: 800px;
  }
}



.logo {
  display: block;
  margin: 16px;
  margin-top: 64px;
}

a.logo,
a:link.logo,
a:visited.logo,
a:active.logo {
  text-decoration: none;
  font: var(--header-font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-color);

  font-size: 2em;

  height: var(--logo-height);
}

.logo .tt {
  display: flex;
  justify-content: center;
}

.logo .tt img {
  height: var(--logo-height);
}


.logo .tt span {
  height: var(--logo-height);
  line-height: var(--logo-height);
}

main,
footer p,
footer h2,
.hero,
.blast {
  margin-left: 16px;
  margin-right: 16px;
}

#content {
  position: relative;
}


article p,
footer p {
  font-size: 1.2em;
  line-height: 1.5em;
}

.blog-post-date {
  display: block;
  text-align: center;
}

.fancy-video-container video {
  width: 100%;
}

.hero .column {
  width: 100%;
  text-align: center;
  margin-top: 64px;
}

.hero svg {
  overflow: visible;
  width: 2.4rem;
  height: 2.4rem;
  stroke-width: 20px;
  margin: 0 auto 1.6em auto;
  align-self: center;
}

.hero div {
  text-align: left;
}

.turquoise {
  color: var(--cyan-color);
}

.magenta {
  color: var(--pink-color);
}

.purple {
  color: var(--purple-color);
}


.latest .latest-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 64px;
}

.latest .latest-item p {
  margin-top: 0;
  margin-bottom: 16px;
}

.latest .latest-item .link,
.latest .latest-item .link:link,
.latest .latest-item .link:active,
.latest .latest-item .link:visited {
  display: block;
  text-decoration: none;
  color: var(--light-on-purple-color);
  margin-bottom: 16px;
}

.latest .latest-item .link span {
  display: block;
  font-family: var(--header-font);
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: 0.1em;
  background-color: var(--purple-color);
  color: var(--light-on-purple-color);
  padding: 8px;
}

.latest .latest-item .link:hover {
  text-decoration: underline;
}

.latest .latest-item .more {
  display: block;
  text-align: right;
  font-size: 0.8em;
  margin-top: auto;
}

a.youtube-link,
a:link.youtube-link {
  color: #000000;
  text-decoration: none;
}

.latest .latest-item.latest-podcast img {
  margin-top: 16px;
  max-width: 172px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.latest-posts h2 {}

.latest-posts h1 {
  margin-top: 64px;
}

.latest-posts h1 a {
  background-color: var(--purple-color);
  padding: 8px;
  display: inline-block;
}

@media (min-width: 1024px) {
  .latest {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .latest .latest-item {
    flex-grow: 1;
    flex-basis: 25%;
    margin-bottom: 0px;
  }
}

/* datetime */
.latest-posts h1+p {
  text-align: center;
}

.latest-posts h1 a,
.latest-posts h1 a:link,
.latest-posts h1 a:active,
.latest-posts h1 a:visited {
  text-decoration: none;
  color: var(--light-color);
}

.latest-posts h1 a:hover {
  text-decoration: underline;
}

.team {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  margin-top: 64px;
}

.splash {
  width: 100%;
}

.testimonial {
  display: flex;
  gap: 32px;
}

.testimonial img {
  width: 128px;
  align-self: center;
  border-radius: 100%;
}

.person {
  flex-grow: 1;
  flex-basis: 40%;
}

.person h2 {
  margin-top: 0;
}

.person .headshot {
  float: right;
  max-width: 25%;
  align-self: flex-start;
  margin-left: 8px;
  margin-right: 8px;
  text-align: center;
  font-size: 0.7em;
  text-decoration: none;
}

.person .headshot:hover {
  text-decoration: underline;
}

.person .headshot img {
  border-radius: 100%;
  padding: 2px;
}

.person .headshot:hover img {
  border: 2px solid var(--pink-color);
  padding: 0;
}

.person.wide {
  flex-basis: 100%;
}

.endorse {
  font-size: 0.8em;
}

.endorse .signed {
  display: block;
  color: var(--cyan-color);
  text-align: right;
}

.big-endorsements .endorse {
  font-size: 1em;
}

.big-endorsements .endorse .signed {
  text-align: center;
}


.multi-quote .endorse {
  flex-grow: 1;
  flex-basis: 40%;
}

.newsletter {
  background-color: var(--purple-color);
  color: var(--light-on-purple-color);
  padding-top: 32px;
  padding-bottom: 32px;
}

.newsletter a,
.newsletter a:link,
.newsletter a:active,
.newsletter a:visited {
  color: var(--cyan-color);
}

.newsletter.inline {
  padding: 32px;
}

.newsletter input[type=text],
.newsletter input[type=email] {
  padding: 4px;
  background-color: var(--light-on-purple-color);
  color: var(--purple-color);
  font-weight: bold;
  padding: 8px;
  border: none;
}


#newsletter-push {
  background-color: var(--purple-color);
  color: var(--light-on-purple-color);
}

.newsletter input[type=submit],
.newsletter button {
  padding: 4px;
  font-weight: bold;
  padding: 8px;
  border: none;
}

.newsletter label {
  margin-right: 8px;
}

.newsletter input::placeholder {
  color: var(--purple-color);
  opacity: 0.5;
}

.newsletter input {
  outline: none;
}

.bg-block {
  width: 100%;
}

.glyphs {
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 500;
  text-align: center;

  border: 2px solid var(--pink-color);
  background-color: var(--bg-color);
  border-radius: 64px;
  padding: 8px;
}

.glyphs:hover {
  border: 2px solid var(--cyan-color);
}

.glyphs .glyph {
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
}

.glyphs .glyph:hover::before {
  display: none !important;
}

.glyphs .glyph span {
  display: none;
  line-height: 16px;
  font-size: 16px;
}

.glyphs .glyph:hover span {
  display: inline-block;
}

.glyphs .glyph svg {
  width: 16px;
}

.glyphs .glyph:hover svg {
  color: var(--cyan-color);
}

.glyphs .glyph:nth-child(2):hover svg {
  color: var(--purple-color);
}

.glyphs .glyph:nth-child(3):hover svg {
  color: var(--pink-color);
}

.glyphs .glyph:nth-child(4):hover svg {
  color: var(--cyan-color);
}

.glyphs .glyph:nth-child(5):hover svg {
  color: var(--purple-color);
}

.glyphs .glyph:nth-child(6):hover svg {
  color: var(--pink-color);
}


strong {
  color: #7552ec;
}

em {
  color: #1dceaf;
}




.company-logo {
  float: right;
  padding: 8px;
  border-radius: 8px;
}

.company-logo a {
  display: inline-block;
}

.needs-dark {
  background-color: var(--dark-color);
}

.needs-light {
  background-color: var(--light-color);
}

.company-logo a::before,
.company-logo a::after {
  background: none;
  display: none;
}

.company-logo img {
  max-width: 256px;
  object-fit: scale-down;
  border: none;
  margin: 0;
  margin-right: 16px;
  padding: 0;
}

.counter img {
  position: unset;
  margin: unset;
  left: unset;
  transform: unset;
  border-top: unset;
  width: unset;
  height: unset;
}

.counter {
  text-align: center;
}

pre,
code,
.code {
  font-family: 'Fira Code', monospace;
  font-variant-ligatures: none;
}

code {
  font-size: 0.9em;
  padding-left: 2px;
  padding-right: 2px;
}

pre {
  font-size: 0.7em;
  overflow-x: auto;
  border: none;
  border-top: 2px solid #5a45c1;
  background-color: #33333a !important;
  padding: 1em 0.5em;
  margin: 1em 0 3em 0;
  position: relative;
}

.code .meta {
  color: #1dceaf;
  font-size: 0.8em;
  text-align: center;
}

.code .meta .language {
  color: #d139c8;
}


/*---CODE-------------------------*/

pre.code pre {
  background-color: #272822;
}

pre.code .hll {
  background-color: #272822;
}

pre.code .c {
  color: #676e75;
}

/* Comment */
pre.code .err {
  color: #960050;
  background-color: #1e0010;
}

/* Error */
pre.code .k {
  color: #66d9ef;
}

/* Keyword */
pre.code .l {
  color: #ae81ff;
}

/* Literal */
pre.code .n {
  color: #f8f8f2;
}

/* Name */
pre.code .o {
  color: #f92672;
}

/* Operator */
pre.code .p {
  color: #f8f8f2;
}

/* Punctuation */
pre.code .cm {
  color: #676e75;
}

/* Comment.Multiline */
pre.code .cp {
  color: #676e75;
}

/* Comment.Preproc */
pre.code .c1 {
  color: #676e75;
}

/* Comment.Single */
pre.code .cs {
  color: #676e75;
}

/* Comment.Special */
pre.code .ge {
  font-style: italic;
}

/* Generic.Emph */
pre.code .gs {
  font-weight: bold;
}

/* Generic.Strong */
pre.code .kc {
  color: #66d9ef;
}

/* Keyword.Constant */
pre.code .kd {
  color: #66d9ef;
}

/* Keyword.Declaration */
pre.code .kn {
  color: #f92672;
}

/* Keyword.Namespace */
pre.code .kp {
  color: #66d9ef;
}

/* Keyword.Pseudo */
pre.code .kr {
  color: #66d9ef;
}

/* Keyword.Reserved */
pre.code .kt {
  color: #66d9ef;
}

/* Keyword.Type */
pre.code .ld {
  color: #e6db74;
}

/* Literal.Date */
pre.code .m {
  color: #ae81ff;
}

/* Literal.Number */
pre.code .s {
  color: #e6db74;
}

/* Literal.String */
pre.code .na {
  color: #a6e22e;
}

/* Name.Attribute */
pre.code .nb {
  color: #f8f8f2;
}

/* Name.Builtin */
pre.code .nc {
  color: #a6e22e;
}

/* Name.Class */
pre.code .no {
  color: #66d9ef;
}

/* Name.Constant */
pre.code .nd {
  color: #a6e22e;
}

/* Name.Decorator */
pre.code .ni {
  color: #f8f8f2;
}

/* Name.Entity */
pre.code .ne {
  color: #a6e22e;
}

/* Name.Exception */
pre.code .nf {
  color: #a6e22e;
}

/* Name.Function */
pre.code .nl {
  color: #f8f8f2;
}

/* Name.Label */
pre.code .nn {
  color: #f8f8f2;
}

/* Name.Namespace */
pre.code .nx {
  color: #a6e22e;
}

/* Name.Other */
pre.code .py {
  color: #f8f8f2;
}

/* Name.Property */
pre.code .nt {
  color: #f92672;
}

/* Name.Tag */
pre.code .nv {
  color: #f8f8f2;
}

/* Name.Variable */
pre.code .ow {
  color: #f92672;
}

/* Operator.Word */
pre.code .w {
  color: #f8f8f2;
}

/* Text.Whitespace */
pre.code .mf {
  color: #ae81ff;
}

/* Literal.Number.Float */
pre.code .mh {
  color: #ae81ff;
}

/* Literal.Number.Hex */
pre.code .mi {
  color: #ae81ff;
}

/* Literal.Number.Integer */
pre.code .mo {
  color: #ae81ff;
}

/* Literal.Number.Oct */
pre.code .sb {
  color: #e6db74;
}

/* Literal.String.Backtick */
pre.code .sc {
  color: #e6db74;
}

/* Literal.String.Char */
pre.code .sd {
  color: #e6db74;
}

/* Literal.String.Doc */
pre.code .s2 {
  color: #e6db74;
}

/* Literal.String.Double */
pre.code .se {
  color: #ae81ff;
}

/* Literal.String.Escape */
pre.code .sh {
  color: #e6db74;
}

/* Literal.String.Heredoc */
pre.code .si {
  color: #e6db74;
}

/* Literal.String.Interpol */
pre.code .sx {
  color: #e6db74;
}

/* Literal.String.Other */
pre.code .sr {
  color: #e6db74;
}

/* Literal.String.Regex */
pre.code .s1 {
  color: #e6db74;
}

/* Literal.String.Single */
pre.code .ss {
  color: #e6db74;
}

/* Literal.String.Symbol */
pre.code .bp {
  color: #f8f8f2;
}

/* Name.Builtin.Pseudo */
pre.code .vc {
  color: #f8f8f2;
}

/* Name.Variable.Class */
pre.code .vg {
  color: #f8f8f2;
}

/* Name.Variable.Global */
pre.code .vi {
  color: #f8f8f2;
}

/* Name.Variable.Instance */
pre.code .il {
  color: #ae81ff;
}

/* Literal.Number.Integer.Long */

pre.code .gh {}

/* Generic Heading & Diff Header */
pre.code .gu {
  color: #676e75;
}

/* Generic.Subheading & Diff Unified/Comment? */
pre.code .gd {
  color: #f92672;
}

/* Generic.Deleted & Diff Deleted */
pre.code .gi {
  color: #a6e22e;
}

/* Generic.Inserted & Diff Inserted */

#magic-counter {
  position: absolute;
  top: 48px;
  right: 8px;
  color: #1dceaf;
  font-weight: bold;
  visibility: hidden;
  cursor: pointer;
}

#magic-counter::after {
  content: ' readers';
  color: var(--text-color);
  font-weight: normal;
}

.magic-switch {
  position: absolute;
  top: 16px;
  right: 8px;
  display: flex;
  cursor: pointer;
}

.magic-switch input {
  position: absolute;
  opacity: 0;
}

.magic-switch .check {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 4px;
  border: 2px solid var(--pink-color);
  background-color: transparent;
  margin-right: 8px;

}

.magic-switch .text {
  display: inline-block;
  height: 12px;
  line-height: 12px;
  margin-top: 2px;
}

.magic-switch input:checked+.check {
  background-color: var(--pink-color);
}

.page-counts {
  display: none;
  position: absolute;
  top: 78px;
  right: 4px;
  background-color: var(--bg-color);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--purple-color);
}

.magic-page-counts .page-counts {
  display: block;
}

.page-count {}

.page-count .num {
  padding-right: 8px;
  color: var(--cyan-color);
}

.wisp {
  position: absolute;
  top: 0;
  right: 5%;
  width: 16px;
  height: 16px;
  transition: top 1000ms cubic-bezier(0.85, 0, 0.15, 1), opacity 1000ms cubic-bezier(0.85, 0, 0.15, 1);
  animation-name: wispy;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 500ms;
  animation-fill-mode: forwards;
  overflow: visible;
  pointer-events: none;
}

.wisp:nth-child(odd) {
  animation-name: wispyodd;
}

.wisp:nth-child(3) {
  animation-direction: reverse;
}

.wisp div {
  overflow: visible;
}

.wisp svg {
  width: 14px;
  height: 14px;
  stroke-width: 20px;
  align-self: center;
  overflow: visible;
}

.magic-off .wisp svg {
  animation-name: wispfade;
  animation-duration: 1000ms;
  animation-delay: 350ms;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.magic-off .wisp {
  animation-play-state: paused;
}

@keyframes wispfade {
  from {
    transform: scale(1, 1);
  }

  to {
    transform: scale(0, 0);
  }
}

@keyframes wispy {
  0% {
    transform: translate(0px, 0px);
  }

  15% {
    transform: translate(15px, -5px);
  }

  76% {
    transform: translate(-8px, 8px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes wispyodd {
  0% {
    transform: translate(0px, 0px);
  }

  8% {
    transform: translate(-10px, 5px);
  }

  53% {
    transform: translate(-14px, -8px);
  }

  76% {
    transform: translate(-4px, -4px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

/*---FONTS-------------------------*/

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2'),
    url('../fonts/SpaceGrotesk-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-SemiBold.woff2') format('woff2'),
    url('../fonts/SpaceGrotesk-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2'),
    url('../fonts/SpaceGrotesk-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Italic.woff2') format('woff2'),
    url('../fonts/Lato-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Light.woff2') format('woff2'),
    url('../fonts/Lato-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Bold.woff2') format('woff2'),
    url('../fonts/Lato-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-BlackItalic.woff2') format('woff2'),
    url('../fonts/Lato-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Black.woff2') format('woff2'),
    url('../fonts/Lato-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-BoldItalic.woff2') format('woff2'),
    url('../fonts/Lato-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Regular.woff2') format('woff2'),
    url('../fonts/Lato-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-LightItalic.woff2') format('woff2'),
    url('../fonts/Lato-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/FiraCode.woff2') format('woff2');
}