/**
 * @file
 * Main entrypoint for SCSS.
 */
@layer reset, default, themes, layouts, components, utilities;
@layer reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* Remove default margin */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role=list],
  ol[role=list] {
    list-style: none;
  }
  /* Set core root defaults */
  html:focus-within {
    scroll-behavior: smooth;
  }
  /* Set core body defaults */
  body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
  }
  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }
  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
@layer default {
  /* latin */
  @font-face {
    font-family: "Urbanist";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/urbanist-italic.woff) format("woff");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/urbanist.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/urbanist.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/urbanist.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/urbanist.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/urbanist.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  :root {
    --color-dark: #292929;
    --color-dark-2: #27272C;
    --color-light: #FFF;
    --color-background: var(var(--color-dark));
    --color-text: #FFF;
    --color-menu: var(--color-text);
    --color-background: #161618;
    --intro-background: #523634; /*rgb(39, 17, 25);/*#2d4262;*/
    --color1: #2980b9;
    --color2: #27ae60;
    --color3: #e67e22;
    --gradient-1: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
    --font-family: "Urbanist", sans-serif;
    --color-primary-500: #e74c3c;
    --color-primary-600: #b53f31;
    --color-primary-700: #853226;
    --color-primary-800: #58241c;
    --color-primary-900: #2f1712;
    --color-accent-1: #e67e22;
    --color-accent-2: #27ae60;
    --color-accent-3: #2980b9;
    --color-accent-4: #8e44ad;
    --z-index-1: 100;
    --z-index-2: 200;
    --z-index-3: 300;
    --z-index-4: 400;
    --z-index-5: 500;
    /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1200,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
    --step--1: clamp(0.94rem, calc(0.91rem + 0.11vw), 1.00rem);
    --step-0: clamp(1.13rem, calc(1.08rem + 0.23vw), 1.25rem);
    --step-1: clamp(1.35rem, calc(1.27rem + 0.39vw), 1.56rem);
    --step-2: clamp(1.62rem, calc(1.50rem + 0.61vw), 1.95rem);
    --step-3: clamp(1.94rem, calc(1.76rem + 0.90vw), 2.44rem);
    --step-4: clamp(2.33rem, calc(2.07rem + 1.31vw), 3.05rem);
    --step-5: clamp(2.80rem, calc(2.43rem + 1.85vw), 3.82rem);
    /* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1200,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */
    --space-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
    --space-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
    --space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
    --space-s: clamp(1.13rem, calc(1.08rem + 0.23vw), 1.25rem);
    --space-m: clamp(1.69rem, calc(1.62rem + 0.34vw), 1.88rem);
    --space-l: clamp(2.25rem, calc(2.16rem + 0.45vw), 2.50rem);
    --space-xl: clamp(3.38rem, calc(3.24rem + 0.68vw), 3.75rem);
    --space-2xl: clamp(4.50rem, calc(4.32rem + 0.91vw), 5.00rem);
    --space-3xl: clamp(6.75rem, calc(6.48rem + 1.36vw), 7.50rem);
    /* One-up pairs */
    --space-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.57vw), 0.63rem);
    --space-2xs-xs: clamp(0.56rem, calc(0.43rem + 0.68vw), 0.94rem);
    --space-xs-s: clamp(0.88rem, calc(0.74rem + 0.68vw), 1.25rem);
    --space-s-m: clamp(1.13rem, calc(0.85rem + 1.36vw), 1.88rem);
    --space-m-l: clamp(1.69rem, calc(1.39rem + 1.48vw), 2.50rem);
    --space-l-xl: clamp(2.25rem, calc(1.70rem + 2.73vw), 3.75rem);
    --space-xl-2xl: clamp(3.38rem, calc(2.78rem + 2.95vw), 5.00rem);
    --space-2xl-3xl: clamp(4.50rem, calc(3.41rem + 5.45vw), 7.50rem);
  }
  @supports (color: color(display-p3 1 1 1/1)) {
    :root {
      --color1: color(display-p3 1 0.012 0.29);
      --color2: color(display-p3 1 0.784 0.2);
    }
  }
  body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: 1.4rem;
    font-size: var(--step-0);
  }
  a {
    color: currentColor;
    text-decoration-color: var(--color-primary-600);
    text-underline-offset: 1px;
  }
  h1 {
    font-size: var(--step-5);
  }
  h2 {
    font-size: var(--step-3);
  }
  h3 {
    font-size: var(--step-2);
  }
  h4 {
    font-size: var(--step-1);
  }
  .development-notice {
    position: fixed;
    bottom: 3rem;
    right: 0;
    writing-mode: vertical-lr;
    padding: 5px;
    background-color: #e74c3c;
    color: #FFF;
  }
}
@layer layouts {
  /* The Switcher https://every-layout.dev/layouts/switcher/ */
  .post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .post-grid > * {
    flex: 1 1 20rem;
  }
  .flow > * + * {
    margin-top: var(--flow-space, 1em);
  }
  .flow-horizontal > * + * {
    margin-left: var(--flow-space, 1em);
  }
  .full-height {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-block-start: 94px;
  }
  .site-content {
    flex: 1 0 auto;
  }
  .site-header,
  .site-footer {
    flex-shrink: 0;
  }
}
@layer components {
  .site-header {
    padding-inline: 2.5em;
    padding-block: 1em;
    color: var(--color-menu);
    display: flex;
    justify-content: space-between;
    background-color: #1d1d26;
    position: fixed;
    z-index: var(--z-index-5);
    top: 0;
    left: 0;
    width: 100%;
  }
  .site-header__logo {
    width: 1.8em;
    height: auto;
    fill: var(--color-menu);
  }
  .right-side {
    display: flex;
    align-items: center;
    margin-left: auto;
  }
  .featured {
    margin: 0;
  }
  .icon-link {
    text-decoration: none;
  }
  .social-icon {
    height: 25px;
    width: auto;
  }
  .site-nav {
    font-size: 1.3125em;
  }
  .site-nav__link {
    color: inherit;
    text-decoration: none;
  }
  .site-nav__link + .site-nav__link {
    margin-left: 0.5em;
  }
  .js-menu .menu-block {
    width: 100%;
    max-width: 25rem;
    height: 100vh;
    background-color: #121218;
    padding: 5rem 2rem 2rem;
    transition: transform 0.25s;
    position: absolute;
    top: 0;
    right: 0;
    overflow-y: scroll;
    transform: translate(100%);
    box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.2509803922);
  }
  .js-menu.is-visible .menu-block {
    transform: translate(0);
  }
  .intro {
    font-weight: 900;
    font-size: 3.5rem;
    font-size: var(--step-4);
    line-height: 1.15;
  }
  .subintro {
    margin-top: 1rem;
    font-size: 1.25rem;
  }
  @media screen and (max-width: 500px) {
    .intro {
      font-size: var(--step-2);
    }
    .subintro {
      margin-top: 1rem;
    }
  }
  .intro-section {
    position: relative;
    color: var(--color-text);
  }
  .intro-section__inner {
    margin-left: auto;
    margin-right: auto;
    padding-top: 180px; /* Extra 60 for header. */
    padding-bottom: 160px; /* 120px */
    display: flex;
    align-items: flex-start;
    max-width: 1000px;
    position: relative;
  }
  @media screen and (max-width: 500px) {
    .intro-section__inner {
      padding-block: 50px;
      padding-inline: 20px;
      overflow: hidden;
    }
  }
  .intro-icon {
    width: 40px;
    height: auto;
    position: absolute;
    fill: red;
  }
  .intro-icon-1 {
    top: 200px;
    right: -200px;
  }
  .intro-icon-1 .blob {
    fill: var(--color-accent-1);
  }
  .intro-icon-1 .icon {
    fill: #FFF;
  }
  .intro-icon-2 {
    bottom: 50px;
    left: -200px;
  }
  .intro-icon-2 .blob {
    fill: var(--color-accent-4);
  }
  .intro-icon-2 .icon {
    stroke: #FFF;
  }
  .intro-icon-3 {
    top: 50px;
    left: -140px;
  }
  .intro-icon-3 .blob {
    fill: var(--color-accent-3);
  }
  .is-front {
    background-image: url("/assets/icons/blob-2.svg");
    background-repeat: no-repeat;
    background-position: top 200px right -150px;
    background-size: 450px 581px;
  }
  @media screen and (max-width: 500px) {
    .is-front {
      background-size: 200px 258px;
    }
  }
  .post-header {
    text-align: center;
    padding-block: 2em;
  }
  .post-date {
    font-size: var(--step--1);
  }
  .card {
    --flow-space: var(--space-xs);
  }
  .card h3 {
    font-size: 1.8rem;
  }
  .card .meta {
    font-size: var(--step--1);
  }
  .site-footer {
    background-color: #c0392b;
    background-color: var(--color-dark-2);
    font-size: 0.8rem;
    text-align: center;
    padding-block: 40px;
    margin-block-start: 5rem;
  }
  .menu-button {
    appearance: none;
    background-color: transparent;
    color: var(--color-text);
    border: none;
    position: relative;
    z-index: var(--z-index-2);
  }
  .menu-button .text {
    text-decoration-color: #bb1450;
    text-underline-offset: 1px;
    text-decoration-line: underline;
  }
  /* PrismJS 1.29.0
  https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+markup-templating+php */
  code[class*=language-], pre[class*=language-] {
    color: #ccc;
    background: 0 0;
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    font-size: 1em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }
  pre[class*=language-] {
    padding: 1em;
    margin: 0.5em 0;
    overflow: auto;
  }
  :not(pre) > code[class*=language-], pre[class*=language-] {
    background: #2d2d2d;
  }
  :not(pre) > code[class*=language-] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
  }
  .token.block-comment, .token.cdata, .token.comment, .token.doctype, .token.prolog {
    color: #999;
  }
  .token.punctuation {
    color: #ccc;
  }
  .token.attr-name, .token.deleted, .token.namespace, .token.tag {
    color: #e2777a;
  }
  .token.function-name {
    color: #6196cc;
  }
  .token.boolean, .token.function, .token.number {
    color: #f08d49;
  }
  .token.class-name, .token.constant, .token.property, .token.symbol {
    color: #f8c555;
  }
  .token.atrule, .token.builtin, .token.important, .token.keyword, .token.selector {
    color: #cc99cd;
  }
  .token.attr-value, .token.char, .token.regex, .token.string, .token.variable {
    color: #7ec699;
  }
  .token.entity, .token.operator, .token.url {
    color: #67cdcc;
  }
  .token.bold, .token.important {
    font-weight: 700;
  }
  .token.italic {
    font-style: italic;
  }
  .token.entity {
    cursor: help;
  }
  .token.inserted {
    color: green;
  }
}
@layer utilities {
  [hidden] {
    display: none !important;
  }
  .wrapper {
    width: 90vw;
    width: clamp(16rem, 93vw, 75rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
    padding-right: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
    position: relative;
  }
  .wrapper-narrow {
    max-width: 46rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
    padding-right: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
  }
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    white-space: nowrap;
    width: 1px;
    position: absolute;
    overflow: hidden;
  }
  pre {
    background-color: #151515;
    font-size: var(--step--1);
  }
  .text-background-1 {
    background: var(--gradient-1);
    background-clip: text;
    color: transparent;
  }
  .text-color-1 {
    color: var(--color-primary-500);
  }
  .skip-to-content {
    position: fixed;
    top: -30em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 1.5rem 2.5rem;
    background-color: var(--color-brand);
    color: #000;
    font-size: var(--step-1);
    text-align: center;
    transition: top 0.1s linear;
    text-transform: uppercase;
    text-decoration: none;
  }
  .skip-to-content:focus, .skip-to-content:focus-visible {
    top: 0;
    box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px #fff;
  }
}

/*# sourceMappingURL=build.css.map */