/*
  The grid uses a series of rows and columns to layout and align content.
  It's fully responsive.

  Content must be placed within columns and only columns may be immediate children of rows. Grid columns without a specified column-* class will automatically layout as equal width columns:

    <div class="row">
      <div class="column">Six</div>
      <div class="column">Six</div>
    </div>

  Width classes indicate the number of columns to create out of the possible 12 per row. For example, to create three equal-width columns across, use column-1/3 or column-4:

    <div class="row">
      <div class="column column-3/4">Nine</div>
      <div class="column column-1/4">Three</div>
    </div>

  Set the width of one column and the sibling columns automatically resize around it:

    <div class="row">
      <div class="column">Five</div>
      <div class="column column-2/12">Two</div>
      <div class="column">Five</div>
    </div>

  Column widths are set in percentages, so they're always fluid and sized relative to their parent element.
*/

/* Rows are wrappers for columns. */

.row {
  margin-left: -1rem; /* to counteract column gutters */
  margin-right: -1rem; /* to counteract column gutters */
}

/* To add more columns than would fit in a single row. */

.row.wrap {
  flex-wrap: wrap;
}

.row + .row {
  margin-top: 1rem;
}

/*
 Supports any number of equal-width columns.

 Each column has horizontal padding to create the gutters
 between individual columns. This padding is then counteracted
 on the rows using negative margins. This way, all the content in
 columns is visually aligned down the left side. However, you can
 remove the margin from rows and padding from columns by using
 .no-gutters on the .row.
*/

.row .column {
  width: 100%;
  max-width: 100%;
  padding-right: 1rem; /* gutter */
  padding-left: 1rem; /* gutter */
  padding-top: 1rem; /* optional */
  padding-bottom: 1rem; /* optional */
}

.row.no-gutters {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutters > .column {
  padding-right: 0;
  padding-left: 0;
}

/*
 Columns (flexbox) are only activated from 640px and up.
 On smaller screens, columns are stacked on top of each other.
*/

@media (min-width: 640px) {
  .row {
    display: flex;
  }

  .row .column {
    flex: 1 1 auto;

    /*
     Note: If flex-basis is set to 0, the extra space around content
     isn't factored in. If set to auto, the extra space is distributed
     based on its flex-grow value. See this graphic:
     https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg
     */
  }

  /* Column Sizing only works for 640px and up, as well. */

  .column.column-1\/2 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .column.column-1\/3 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .column.column-2\/3 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .column.column-1\/4 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .column.column-2\/4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .column.column-3\/4 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .column.column-1\/5 {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .column.column-2\/5 {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .column.column-3\/5 {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .column.column-4\/5 {
    flex: 0 0 80%;
    max-width: 80%;
  }

  .column.column-1\/6 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .column.column-2\/6 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .column.column-3\/6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .column.column-4\/6 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .column.column-5\/6 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .column.column-1\/12 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .column.column-2\/12 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .column.column-3\/12 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .column.column-4\/12 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .column.column-5\/12 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .column.column-6\/12 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .column.column-7\/12 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .column.column-8\/12 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .column.column-9\/12 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .column.column-10\/12 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .column.column-11\/12 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .column.column-12\/12,
  .column.column-full {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .column.column-screen {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
}
/*! Copyright (c) 2007 The Pragmatic Studio */

:root {
  --font-sans: "Inter var", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, Menlo, Monaco, Consolas, "Lucida Console",
    "Liberation Mono", "Courier New", monospace;
  --font-stencil: "Stardos Stencil", "Inter var", "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;

  --blue-gray: hsl(216, 15%, 52%); /* #718096 */
  --rails-red: hsl(1, 67%, 59%); /* dd5250 or CC5B57 */
  --elixir-purple: hsl(264, 41%, 48%); /* b58efa or A688C1 */
  --elixir-purple-muted: hsl(272, 31%, 65%);
  --phoenix-orange: hsl(18, 90%, 59%); /* f57238 or CF9251 */
  --phoenix-orange-muted: hsl(31, 57%, 56%);
  --elm-blue: hsl(207, 100%, 41%); /* 0074d1 or 70B1D1 */
  --graphql-pink: hsl(321, 40%, 54%); /* B85996 */
  --studio-yellow: hsl(39, 100%, 50%); /* ffa400 */
  --studio-light-gray: hsl(0, 0%, 92%); /* ebebeb */
  --studio-medium-gray: hsl(0, 0%, 80%); /* ccc */
  --studio-dark-gray: hsl(0, 0%, 53%); /* 878787 */
  --studio-charcoal: hsl(0, 0%, 22%); /* 383838 */

  /* Unused Colors:

    $base-green: #71a95a;
    $link-color: #8B786A;
    $nav-red: #A54635;
    $sale-orange: #E56601;
    $content-text: #444;
    $grabby-green: #62b124;
    $grabby-yellow: #ffe002;
    $unpacked-color: hsl(215, 12%, 38%);
    $vue-green: hsl(94, 28%, 65%);
    $react-blue: hsl(200, 51%, 63%);
    $studio-green: hsl(103, 31%, 51%);
  */

  /*
    Tailwind Theme Variables
    https://github.com/itaditya/tw-universal-tokens
  */

  --tw-font-thin: 100;
  --tw-font-extralight: 200;
  --tw-font-light: 300;
  --tw-font-normal: 400;
  --tw-font-medium: 500;
  --tw-font-semibold: 600;
  --tw-font-bold: 700;
  --tw-font-extrabold: 800;
  --tw-font-black: 900;
  --tw-rounded-none: 0px;
  --tw-rounded-sm: 0.125rem;
  --tw-rounded: 0.25rem;
  --tw-rounded-md: 0.375rem;
  --tw-rounded-lg: 0.5rem;
  --tw-rounded-xl: 0.75rem;
  --tw-rounded-2-xl: 1rem;
  --tw-rounded-3-xl: 1.5rem;
  --tw-rounded-full: 9999px;
  --tw-color-black: #000000;
  --tw-color-white: #ffffff;
  --tw-color-gray-50: rgba(249, 250, 251, 1);
  --tw-color-gray-100: rgba(243, 244, 246, 1);
  --tw-color-gray-200: rgba(229, 231, 235, 1);
  --tw-color-gray-300: rgba(209, 213, 219, 1);
  --tw-color-gray-400: rgba(156, 163, 175, 1);
  --tw-color-gray-500: rgba(107, 114, 128, 1);
  --tw-color-gray-600: rgba(75, 85, 99, 1);
  --tw-color-gray-700: rgba(55, 65, 81, 1);
  --tw-color-gray-800: rgba(31, 41, 55, 1);
  --tw-color-gray-900: rgba(17, 24, 39, 1);
  --tw-color-red-50: #fef2f2;
  --tw-color-red-100: #fee2e2;
  --tw-color-red-200: #fecaca;
  --tw-color-red-300: #fca5a5;
  --tw-color-red-400: #f87171;
  --tw-color-red-500: #ef4444;
  --tw-color-red-600: #dc2626;
  --tw-color-red-700: #b91c1c;
  --tw-color-red-800: #991b1b;
  --tw-color-red-900: #7f1d1d;
  --tw-color-yellow-50: #fffbeb;
  --tw-color-yellow-100: #fef3c7;
  --tw-color-yellow-200: #fde68a;
  --tw-color-yellow-300: #fcd34d;
  --tw-color-yellow-400: #fbbf24;
  --tw-color-yellow-500: #f59e0b;
  --tw-color-yellow-600: #d97706;
  --tw-color-yellow-700: #b45309;
  --tw-color-yellow-800: #92400e;
  --tw-color-yellow-900: #78350f;
  --tw-color-green-50: #ecfdf5;
  --tw-color-green-100: #d1fae5;
  --tw-color-green-200: #a7f3d0;
  --tw-color-green-300: #6ee7b7;
  --tw-color-green-400: #34d399;
  --tw-color-green-500: #10b981;
  --tw-color-green-600: #059669;
  --tw-color-green-700: #047857;
  --tw-color-green-800: #065f46;
  --tw-color-green-900: #064e3b;
  --tw-text-xs: 0.75rem;
  --tw-text-sm: 0.875rem;
  --tw-text-base: 1rem;
  --tw-text-lg: 1.125rem;
  --tw-text-xl: 1.25rem;
  --tw-text-2-xl: 1.5rem;
  --tw-text-3-xl: 1.875rem;
  --tw-text-4-xl: 2.25rem;
  --tw-text-5-xl: 3rem;
  --tw-text-6-xl: 3.75rem;
  --tw-text-7-xl: 4.5rem;
  --tw-text-8-xl: 6rem;
  --tw-text-9-xl: 8rem;
  --tw-tracking-tighter: -0.05em;
  --tw-tracking-tight: -0.025em;
  --tw-tracking-normal: 0em;
  --tw-tracking-wide: 0.025em;
  --tw-tracking-wider: 0.05em;
  --tw-tracking-widest: 0.1em;
  --tw-leading-3: 0.75rem;
  --tw-leading-4: 1rem;
  --tw-leading-5: 1.25rem;
  --tw-leading-6: 1.5rem;
  --tw-leading-7: 1.75rem;
  --tw-leading-8: 2rem;
  --tw-leading-9: 2.25rem;
  --tw-leading-10: 2.5rem;
  --tw-leading-none: 1;
  --tw-leading-tight: 1.25;
  --tw-leading-snug: 1.375;
  --tw-leading-normal: 1.5;
  --tw-leading-relaxed: 1.625;
  --tw-leading-loose: 2;
  --tw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --tw-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/*
  Fonts
  ========================================================================== */

/*
  stardos-stencil-regular - latin

  https://google-webfonts-helper.herokuapp.com/fonts/stardos-stencil?subsets=latin
  */
@font-face {
  font-family: "Stardos Stencil";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/stardos-stencil-v11-latin-regular-c1a672df2c5446b5e20d8155e59cb55d288ac253b5a6b198f2c609cc5e9899c7.eot");
  src: url("/assets/stardos-stencil-v11-latin-regular-c1a672df2c5446b5e20d8155e59cb55d288ac253b5a6b198f2c609cc5e9899c7.eot?#iefix") format("embedded-opentype"),
    /* IE6–IE9 */
    url("/assets/stardos-stencil-v11-latin-regular-0e17e9bb3312509d9c6ffff150183298077db009dc8ca87439fa329e7e722d3c.woff2") format("woff2"),
    /* Modern browsers */
    url("/assets/stardos-stencil-v11-latin-regular-7e5071e5df5a8792da99f1285ef4c224cad2457a3090e47fde5635d8173551dd.woff") format("woff"),
    /* Most browsers */
    url("/assets/stardos-stencil-v11-latin-regular-ae231c2b0f4d2d34a9063514b2dc478eb0c8d706f09c4d6a99cdcb377af6e0dc.ttf") format("truetype"),
    /* Safari, Android, iOS */
    url("/stardos-stencil-v11-latin-regularsvg##StardosStencil") format("svg");
  /* Legacy iOS */
}

/*
  Utility classes
  ========================================================================== */

.undershadow {
  box-shadow: var(--tw-color-gray-500) 0px -4px 0px 0px inset;
}

.highlight {
  background-color: var(--tw-color-yellow-100);
}

.studio-yellow {
  color: var(--studio-yellow);
}

.phoenix-orange {
  color: var(--phoenix-orange);
}

.phoenix-orange-muted {
  color: var(--phoenix-orange-muted);
}

.rails-red {
  color: var(--rails-red);
}

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

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

.elm-blue {
  color: var(--elm-blue);
}

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

.blue-gray {
  color: var(--blue-gray);
}

.studio-light-gray {
  color: var(--studio-light-gray);
}

.studio-medium-gray {
  color: var(--studio-medium-gray);
}

.studio-dark-gray {
  color: var(--studio-dark-gray);
}

.bg-studio-light-gray {
  background-color: var(--studio-light-gray);
}

.bg-studio-medium-gray {
  background-color: var(--studio-medium-gray);
}

.bg-studio-dark-gray {
  background-color: var(--studio-dark-gray);
}

.bg-studio-charcoal {
  background-color: var(--studio-charcoal);
}

.bg-studio-yellow {
  background-color: var(--studio-yellow);
}

.wavy {
  /* Base fallback: simple underline (works everywhere) */
  text-decoration: underline;

  /* More modern browsers (Chrome, Firefox, Safari, Edge) */
  text-decoration-line: underline;
  text-decoration-style: wavy;
}


/*
  Base elements
  ========================================================================== */

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

/*
  Layout
  ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--tw-text-base);
  line-height: var(--tw-leading-7);
  color: var(--tw-color-gray-900);
  background-color: var(--tw-color-white);
}

#content {
  margin-bottom: 4rem;

  & a:not(.no-underline) {
    text-decoration: underline;
  }
}

#heading {
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;

  & h1 {
    color: var(--tw-color-green-700);
    font-size: var(--tw-text-4-xl);
    line-height: var(--tw-leading-10);
    font-weight: var(--tw-font-extrabold);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;

    &.black {
      color: var(--tw-color-gray-900);
    }
  }

  & h2 {
    color: var(--tw-color-gray-500);
    font-size: var(--tw-text-2-xl);
    font-weight: var(--tw-font-medium);
    line-height: 1.3333333;
    max-width: 48rem;
    margin-top: 0.5rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/*
  Container

  Overrides Tailwind's 'container' utility class which fixes
  an element's width to the current breakpoint.

  The 'container' class sets the 'max-width' of an element to match
  the 'min-width' of the current breakpoint. This is useful if you'd
  prefer to design for a fixed set of screen sizes instead of
  trying to accommodate a fully fluid viewport.

  Tailwind's 'container' does not center itself automatically and
  does not have any built-in horizontal padding. So here we
  center the content in a container using `margin` and
  add horizontal padding using `padding`.

  @media queries below are exactly the same as those generated by
  Tailwind, but are included here to be explicit.

  ========================================================================== */

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}

/* Small devices (landscape phones, 640px and up) */

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

/* Large devices (desktops, 1024px and up) */

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

/* Extra large devices (large desktops, 1280px and up) */

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/* Double-extra large devices (large desktops, 1536px and up) */

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/*
  Studio Prose

  A lot of this is adapted from the base style in the Tailwind Typography plugin:  https://github.com/tailwindlabs/tailwindcss-typography
  are responsively sized based on the font size of the html element which
  for most browsers has a default value of 16px. In that case, 1rem equals
  16px, 2rem equals 32px, and so on.

  Size modifiers must be used in conjunction with the base prose class:

  <div class="studio-prose studio-prose-lg">

  or to make it larger on larger screens only:

  <div class="studio-prose lg:studio-prose-lg">

  ========================================================================== */

.studio-prose {
  font-size: 1rem;
  line-height: 1.75;

  color: var(--tw-color-gray-900);
  /* max-width: 65ch; */

  & a:not(.button) {
    color: var(--tw-color-gray-800);
    text-decoration: underline;
    font-weight: 500;

    &:visited {
      color: var(--tw-color-gray-800);
    }

    &:hover {
      color: var(--tw-color-gray-800);
      text-decoration: none;
    }
  }

  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }

  & strong {
    font-weight: 600;
  }

  & blockquote {
    font-weight: 500;
    font-style: italic;
    border-left-width: 0.25rem;
    border-left-color: var(--tw-color-gray-200);
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em;

    quotes: '"\\201C""\\201D""\\2018""\\2019"';

    & p:first-of-type::before {
      content: open-quote;
    }

    & p:last-of-type::after {
      content: close-quote;
    }

    & cite {
      display: block;
      text-align: left;
      &:before {
        content: "\2014\00A0";
      }
    }
  }

  & p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    color: var(--tw-color-gray-900);
  }
  & h1 {
    font-weight: 800;
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
  }
  & h2 {
    font-weight: 700;
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;

    &.subtitle {
      margin-top: -0.75em;
      margin-bottom: 1.75em;
    }
  }
  & h3 {
    font-weight: 600;
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
  }
  & h4 {
    font-weight: 600;
    font-size: 1em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.5;
  }

  & hr {
    margin-top: 3em;
    margin-bottom: 3em;
    border-color: var(--tw-color-gray-200);
    border-top-width: 1px;
  }

  & hr + * {
    margin-top: 0;
  }

  & h2 + * {
    margin-top: 0;
  }
  & h3 + *:not(h4) {
    margin-top: 0;
  }
  & h4 + * {
    margin-top: 0;
  }

  & ul {
    list-style: disc;
  }
  & ol {
    list-style: decimal;
  }

  & ul,
  & ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    margin-left: 2em;

    & li {
      position: relative;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
  }

  & > ul > li p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  & > ul > li > *:first-child {
    margin-top: 1.25em;
  }
  & > ul > li > *:last-child {
    margin-bottom: 1.25em;
  }
  & > ol > li > *:first-child {
    margin-top: 1.25em;
  }
  & > ol > li > *:last-child {
    margin-bottom: 1.25em;
  }

  & ul ul,
  & ul ol,
  & ol ol,
  & ol ul {
    font-size: var(--tw-text-sm);
    list-style: circle;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  & pre,
  & code,
  & dfn,
  & kbd,
  & samp,
  & tt {
    font-family: var(--font-mono);
    color: var(--tw-color-gray-900);
    font-weight: 600;
    overflow: auto;
    white-space: nowrap;
  }

  /*
   code::before {
     content: "`";
   }
   code::after {
     content: "`";
   }
  */

  & pre {
    /* color: var(--tw-color-gray-300); */
    background-color: var(--tw-color-gray-100);
    border: 1px solid var(--tw-color-gray-300);
    border-radius: 0.375rem;
    padding: 0.8571429em 1.1428571em;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    font-size: 0.875em;
    line-height: 1.7142857;
    overflow-x: auto;
    overflow-y: hidden;
  }

  & code {
    font-weight: 600;
    font-size: 0.875em;
  }

  /*
    code::before {
     content: "`";
   }

   code::after {
     content: "`";
   }
  */

  & pre code {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: 500;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    display: block;
    white-space: pre;
    color: inherit;
  }

  & img {
    margin-top: 2em;
    margin-bottom: 2em;
    margin-right: auto;
    margin-left: auto;
  }

  & video {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  & figure {
    margin-top: 2em;
    margin-bottom: 2em;

    &:first-of-type {
      margin-top: 0;
    }
  }

  & figure > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  & table {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.875em;
    line-height: 1.7142857;
  }

  & thead {
    color: #111827;
    font-weight: 600;
    border-bottom-width: 1px;
    border-bottom-color: #d1d5db;
  }

  & thead th {
    vertical-align: bottom;
    padding-right: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-left: 0.5714286em;
  }

  & thead th:first-child {
    padding-left: 0;
  }

  & thead th:last-child {
    padding-right: 0;
  }

  & tbody tr {
    border-bottom-width: 1px;
    border-bottom-color: #e5e7eb;
  }

  & tbody td {
    vertical-align: top;
    padding-top: 0.5714286em;
    padding-right: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-left: 0.5714286em;
  }

  & tbody td:first-child {
    padding-left: 0;
  }

  & tbody td:last-child {
    padding-right: 0;
  }

  & tbody tr:last-child {
    border-bottom-width: 0;
  }
}

.studio-prose-lg {
  font-size: 1.125rem;
  line-height: 1.7777778;

  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }

  & p {
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
  }

  & blockquote {
    margin-top: 1.6666667em;
    margin-bottom: 1.6666667em;
    padding-left: 1em;
  }

  & h1 {
    font-size: 2.6666667em;
    margin-top: 0;
    margin-bottom: 0.8333333em;
    line-height: 1;
  }

  & h2 {
    font-size: 1.6666667em;
    margin-top: 1.8666667em;
    margin-bottom: 1.0666667em;
    line-height: 1.3333333;
  }

  & h3 {
    font-size: 1.3333333em;
    margin-top: 1.6666667em;
    margin-bottom: 0.6666667em;
    line-height: 1.5;
  }

  & h4 {
    margin-top: 1.7777778em;
    margin-bottom: 0.4444444em;
    line-height: 1.5555556;
  }

  & hr {
    margin-top: 3.1111111em;
    margin-bottom: 3.1111111em;
  }

  & hr + * {
    margin-top: 0;
  }

  & h2 + * {
    margin-top: 0;
  }
  & h3 + *:not(h4) {
    margin-top: 0;
  }
  & h4 + * {
    margin-top: 0;
  }

  & ul,
  & ol {
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
    margin-left: 2em;

    & li {
      position: relative;
      margin-top: 0.6666667em;
      margin-bottom: 0.6666667em;
    }
  }

  & > ul > li p {
    margin-top: 0.8888889em;
    margin-bottom: 0.8888889em;
  }
  & > ul > li > *:first-child {
    margin-top: 1.3333333em;
  }
  & > ul > li > *:last-child {
    margin-bottom: 1.3333333em;
  }
  & > ol > li > *:first-child {
    margin-top: 1.3333333em;
  }
  & > ol > li > *:last-child {
    margin-bottom: 1.3333333em;
  }

  & ul ul,
  & ul ol,
  & ol ol,
  & ol ul {
    margin-top: 0.8888889em;
    margin-bottom: 0.8888889em;
  }

  & pre {
    font-size: 0.8888889em;
    line-height: 1.75;
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 1em 1.5em;
  }

  & code {
    font-size: 0.8888889em;
  }

  & img {
    margin-top: 1.7777778em;
    margin-bottom: 1.7777778em;
  }

  & video {
    margin-top: 1.7777778em;
    margin-bottom: 1.7777778em;
  }

  & figure {
    margin-top: 1.7777778em;
    margin-bottom: 1.7777778em;
  }

  & figure > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  & table {
    font-size: 0.8888889em;
    line-height: 1.5;
  }

  & thead th {
    padding-right: 0.75em;
    padding-bottom: 0.75em;
    padding-left: 0.75em;
  }

  & thead th:first-child {
    padding-left: 0;
  }

  & thead th:last-child {
    padding-right: 0;
  }

  & tbody td {
    padding-top: 0.75em;
    padding-right: 0.75em;
    padding-bottom: 0.75em;
    padding-left: 0.75em;
  }

  & tbody td:first-child {
    padding-left: 0;
  }

  & tbody td:last-child {
    padding-right: 0;
  }
}

/*
  Inline form field errors automatically added by Rails.

  See form_errors.rb
  ========================================================================== */

form {
  & .field_with_errors {
    p.error {
      color: var(--tw-color-red-700);
    }

    & input,
    & textarea,
    & select {
      outline: 0;
      box-shadow: 0 0 0 3px var(--tw-color-red-700);
    }
  }
}

/*
  Form error messages
  ========================================================================== */

.error-messages {
  font-size: var(--tw-text-base);
  font-weight: var(--tw-font-medium);
  text-align: center;
  margin-bottom: 2rem;
  padding: 1rem 2rem;
  color: var(--tw-color-red-900);
  background-color: var(--tw-color-red-300);
  border-radius: var(--tw-rounded-lg);

  & ul {
    font-weight: var(--tw-font-normal);
    margin-top: 1rem;
    text-align: center;
    display: inline-block;
    list-style: disc;

    & li {
      text-align: left;
    }
  }
}

/*
  Header and Navigation
  ========================================================================== */

header {
  /*
    Menu is hidden by default and only shown when the
    menu-toggle is checked
  */
  & #menu-toggle:checked + #menu {
    display: block;
  }
}

/*
  Video Embed Container

  ========================================================================== */

#content div.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  overflow: hidden;
  background: none;
  max-width: 1280px;

  & iframe,
  & object {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}

/*
  COURSE REVIEWS

  ========================================================================== */

.course-reviews {
  & blockquote {
    color: var(--tw-color-gray-700);
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;

    & .review {
      margin-left: 1.5rem;
    }

    & cite {
      color: var(--tw-color-gray-500);
      display: block;
      margin-top: 0.5rem;

      &:before {
        content: "\2014\00A0";
      }
    }

    & .avatar {
      flex: none;
      & img {
        width: 45px;
        height: 45px;
        border-radius: var(--tw-rounded-full);
      }
    }
  }
}

/*
  COURSE PAGE - set with @page_type = 'course'

  ========================================================================== */

.course-page {
  & .hero {
    color: var(--tw-color-gray-100);
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    min-height: 350px;

    & h1 {
      font-size: var(--tw-text-6-xl);
      font-weight: var(--tw-font-extrabold);
      letter-spacing: var(--tw-tracking-tight);
      line-height: 1.1;
      text-align: center;
      text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    }

    & .version {
      color: var(--tw-color-gray-900);
      position: absolute;
      padding: 0.5rem 1rem;
      bottom: 0px;
      right: 20px;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      z-index: 1;
      font-size: var(--tw-text-base);
      font-weight: var(--tw-font-medium);
    }
  }

  & .hero + .sub-hero {
    text-align: center;
    font-size: var(--tw-text-base);
    font-weight: var(--tw-font-semibold);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    background-color: var(--studio-charcoal);
    color: var(--tw-color-gray-100);

    & a {
      color: var(--tw-color-gray-100);
    }
  }

  & .course-modules {
    & .module {
      & .number {
        font-size: var(--tw-text-xl);
        padding: 1rem;
        color: #fff;
        background-color: var(--studio-yellow);
        border-radius: var(--tw-rounded-full);
        height: 2.5rem;
        width: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      & .name {
        font-size: var(--tw-text-2-xl);
        font-weight: var(--tw-font-semibold);
        margin-left: 1rem;
        white-space: nowrap;
      }

      & img {
        margin-right: auto;
        margin-left: auto;
        box-shadow: var(--tw-shadow-lg);
      }

      & .coming-soon {
        margin-left: 1rem;
        font-weight: var(--tw-font-bold);
        font-size: var(--tw-text-sm);
        padding: 0.25rem 1rem;
        border-radius: var(--tw-rounded-full);
        text-transform: uppercase;
        border: 1px solid var(--blue-gray);
        color: var(--blue-gray);
        white-space: nowrap;
      }

      & .free {
        margin-left: 1.25rem;
        background-color: var(--tw-color-gray-500);
        color: white;
        font-weight: var(--tw-font-semibold);
        font-size: var(--tw-text-xs);
        padding: 0.25rem 1rem;
        border-radius: var(--tw-rounded-full);
        text-transform: uppercase;
        box-shadow: var(--tw-shadow-md);

        &:hover {
          background-color: var(--tw-color-gray-800);
          cursor: pointer;
        }

        & a {
          color: white;
          text-decoration: none !important;
        }
      }
    }
  }

  & #content {
    position: relative;
    font-size: var(--tw-text-lg);
    line-height: var(--tw-leading-7);

    & h2 {
      text-align: center;
      font-size: var(--tw-text-4-xl);
      font-weight: var(--tw-font-extrabold);
      line-height: var(--tw-leading-tight);
    }

    & h3 {
      text-align: center;
      font-size: var(--tw-text-4-xl);
      font-weight: var(--tw-font-extrabold);
      line-height: var(--tw-leading-tight);
      margin-bottom: 0.5rem;
    }

    & h4 {
      text-align: center;
      font-size: var(--tw-text-2-xl);
      color: var(--tw-color-gray-600);
      font-weight: var(--tw-font-normal);
      line-height: var(--tw-leading-snug);
      letter-spacing: var(--tw-tracking-tight);
      margin-right: auto;
      margin-left: auto;
      max-width: 48rem;
    }

    & h5 {
      font-size: var(--tw-text-xl);
      font-weight: var(--tw-font-bold);
      color: var(--tw-color-gray-600);
      line-height: var(--tw-leading-snug);
      margin-bottom: 1rem;
      margin-top: 2rem;
    }

    & p {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      letter-spacing: var(--tw-tracking-tight);

      font-size: var(--tw-text-xl); /* 20px target */
      line-height: var(--tw-leading-8);
    }

    & .what-you-get {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding-top: 1rem;
      padding-bottom: 1rem;

      & .item {
        font-size: var(--tw-text-2-xl);
        font-weight: var(--tw-font-semibold);
        margin-top: 1rem;
      }

      & .description {
        margin-top: 1rem;
      }
    }

    & section.quote {
      & blockquote {
        color: var(--tw-color-gray-700);
        background-color: var(--studio-light-gray);
        text-align: center;
        margin-right: auto;
        margin-left: auto;
        padding: 1rem 2rem;
        max-width: 48rem;
        border: 1px solid var(--tw-color-gray-300);
        border-radius: var(--tw-rounded-lg);

        & p {
          margin-top: 0;
          margin-bottom: 0;
          font-size: var(--tw-text-lg);
          line-height: var(--tw-leading-7);
          letter-spacing: var(--tw-tracking-tight);
        }

        & .reviewer {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 1rem;
        }

        & a {
          color: var(--tw-color-gray-600);
        }

        & cite {
          margin-left: 1rem;
        }

        & img {
          width: 45px;
          height: 45px;
          border-radius: var(--tw-rounded-full);
        }
      }
    }

    & .get-course-cta {
      display: block;
      text-align: center;
      margin-top: 2rem;
    }

    & ul {
      list-style: disc;
      list-style-position: inside;
      padding-left: 1.5rem;

      & li {
        position: relative;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        font-size: var(--tw-text-xl); /* 20px target */
        line-height: var(--tw-leading-relaxed);
        letter-spacing: var(--tw-tracking-tight);
      }
    }

    & ul.icons {
      list-style: none;
      list-style-image: none;
      padding-left: 1.5rem;

      & li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: var(--tw-text-xl); /* 20px target */
        line-height: var(--tw-leading-relaxed);
        letter-spacing: var(--tw-tracking-tight);
        column-gap: 0.625rem; /* 10px */

        &.align-start {
          align-items: flex-start;
          margin-bottom: 1.75rem;
        }

        & svg {
          flex: none;
        }

        & a {
          display: inline-block;
        }
      }
    }

    & ul.toc {
      list-style: none;
      padding: 0;
      margin: 0;
      margin-top: 1rem;

      & li {
        font-size: var(--tw-text-lg);
        font-weight: var(--tw-font-semibold);
        padding: 0.5rem 0.75rem;
        background-color: var(--tw-color-gray-200);
        margin-bottom: 2rem;
      }
    }
  }

  & .buy-options {
    & .column {
      padding-right: 0.5rem;
      padding-left: 0.5rem;
    }

    & .column.column-1\/2 {
      padding-right: 2rem;
      padding-left: 2rem;
    }

    & .buy-option {
      text-align: center;
      background-color: var(--studio-light-gray);
      border: 1px solid var(--tw-color-gray-300);
      padding: 1.5rem 1rem;
      border-radius: var(--tw-rounded-xl);
      box-shadow: var(--tw-shadow-lg);
      position: relative;

      & img {
        margin-right: auto;
        margin-left: auto;
      }

      & .description {
        font-size: var(--tw-text-lg) !important;
        font-weight: var(--tw-font-semibold);
        text-transform: uppercase;
        margin-bottom: 1rem;
        color: var(--tw-color-gray-700);
      }

      & ul {
        list-style: none;
        list-style-image: none;
        display: inline-block;
        text-align: left;
        padding-left: 0 !important;

        & li {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 0.5rem;
          font-size: var(--tw-text-lg) !important;
          line-height: var(--tw-leading-6) !important;
          font-weight: var(--tw-font-normal) !important;

          & svg {
            flex-shrink: 0;
            height: 1.75rem;
            width: 1.75rem;
          }

          & span,
          & a {
            margin-left: 0.35rem;
            display: block;
          }
        }
      }

      &.best {
        position: relative;
        padding-top: 2rem;

        & .best-label-container {
          position: absolute;
          right: 0;
          left: 0;
          top: -1rem;
        }

        & .best-label {
          display: inline-flex;
          border-radius: var(--tw-rounded-md);
          background-color: var(--tw-color-gray-800);
          color: var(--studio-light-gray);
          padding: 0.25rem 1.25rem;
          font-size: var(--tw-text-sm);
          font-weight: var(--tw-font-semibold);
          letter-spacing: var(--tw-tracking-wider);
          text-transform: uppercase;
        }
      }
    }
  }
}

/* Medium devices (tablets, 768px and up) */

@media screen and (min-width: 768px) {
  .course-page .hero {
    & h1 {
      font-size: var(--tw-text-7-xl);
    }

    & h2 {
      font-size: var(--tw-text-3-xl);
    }
  }
}

/*
  TEAM PROGRESS PAGE - set with @page_type = 'team-progress'

  ========================================================================== */

.team-progress-page {
  & .sort {
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 0 3px;
    background: transparent;
  }

  & .sort-desc {
    border-bottom: solid 7px var(--tw-color-gray-500);
    border-top-width: 0;
  }

  & .sort-asc {
    border-top: solid 7px var(--tw-color-gray-500);
    border-bottom-width: 0;
  }
}

/*
  FRONT PAGE set with @page_type = 'front'

  ========================================================================== */

.front-page {
  & .hero {
    background: url("/assets/hero-7f5ddb921d1ad11f02c302ad6c78951c32893b7bd15dc01ef7721b84a0568d9d.jpg") top right no-repeat;
    /* background-image: linear-gradient(rgba(4, 0, 68, 0.75), rgba(4, 0, 68, 0.1)), image-url("hero.jpg"); */

    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    min-height: 300px;
    /* opacity: 0.9; */
    position: relative;

    & h1 {
      color: var(--tw-color-gray-100);
      font-size: 4rem;
      line-height: var(--tw-leading-none);
      font-weight: var(--tw-font-extrabold);
      text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
      position: absolute;
      bottom: 0px;
      left: 3rem;
      text-align: left;
      margin-bottom: 2rem;
    }
  }

  & .undershadow {
    box-shadow: var(--tw-color-yellow-300) 0px -4px 0px 0px inset;
  }
}

/* Medium devices (tablets, 768px and up) */

@media screen and (min-width: 768px) {
  .front-page .hero {
    min-height: 350px;
  }
  .front-page .hero h1 {
    font-size: 5rem;
    line-height: var(--tw-leading-none);
  }
}

/*
  PAYMENT PAGE set with @page_type = 'payment'

  ========================================================================== */

/* Braintree Drop-in UI customization */

[data-braintree-id="choose-a-way-to-pay"] {
  font-weight: var(--tw-font-bold);
  font-size: var(--tw-text-2-xl);
}

/* Sales plug at the bottom of tutorial and blog pages. */

.plug {
  margin: 3rem 0;
  padding: 2rem 4rem;
  /* background-color: var(--studio-light-gray); */
  border-radius: var(--tw-rounded-xl);
  border: 4px dashed var(--tw-color-gray-300);

  & h3 {
    text-align: center;
    margin-top: 0;
  }

  & img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 0;
  }
}

/*
  Unpacked Page

  ========================================================================== */

#unpacked {
  & .hero {
    background-color: hsl(220, 27%, 13%); /* 181e2a */
    background-image: url("/assets/unpacked-hero-8247dc7b97c6c8c290b31439e91587e00b8ba63f92dce1d0287ac5c9103bb202.jpg");

    /* background-image: linear-gradient(rgba(4, 0, 68, 0.75), rgba(4, 0, 68, 0.1)), image-url("unpacked-hero.jpg"); */

    color: var(--tw-color-gray-100);
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    min-height: 400px;

    & .stamp {
      line-height: 1.1;
      font-family: var(--font-stencil);
      display: inline-block;
      font-weight: 400;
      font-size: var(--tw-text-5-xl);
      border-radius: 0.5rem;
      padding: 0.75rem 1.5rem;
      box-shadow: inset 0px 0px 0px 5px var(--tw-color-gray-400);
      text-transform: uppercase;
      transform: rotate(-4deg);
      margin-bottom: 2.5rem;
      color: var(--tw-color-gray-400);
    }
  }

  &.rails {
    & .button-buy {
      background-color: var(--rails-red);
    }

    & .button-buy:hover {
      background-color: color-mix(in srgb, var(--rails-red) 95%, black);
    }

    & .course-modules {
      & .module {
        & .number {
          background-color: var(--blue-gray);
        }
      }
    }
  }

  &.phoenix {
    & .button-buy {
      background-color: var(--phoenix-orange);
    }

    & .button-buy:hover {
      background-color: color-mix(in srgb, var(--phoenix-orange) 95%, black);
    }

    & .course-modules {
      & .module {
        & .number {
          background-color: var(--phoenix-orange);
        }
      }
    }
  }

  &.graphql {
    & .hero {
      & .version {
        color: white;
        background-color: var(--tw-color-gray-700);
      }
    }

    & .button-buy {
      background-color: var(--graphql-pink);
    }

    & .button-buy:hover {
      background-color: color-mix(in srgb, var(--graphql-pink) 95%, black);
    }

    & .course-modules {
      & .module {
        & .number {
          background-color: var(--graphql-pink);
        }
      }
    }
  }
}

/*
  Elixir Page

  ========================================================================== */

#elixir {
  & .undershadow {
    box-shadow: var(--elixir-purple) 0px -4px 0px 0px inset;
  }

  & .hero {
    background-color: hsl(267, 42%, 22%); /* 35204e */
    background-image: url("/assets/courses/elixir/elixir-hero-purple-8c7388904d5865dd47356d4b08735b17ca631aaca49b4047dd79507d592abe20.jpg");

    & .version {
      color: white;
      background-color: color-mix(in srgb, var(--elixir-purple) 90%, black);
    }
  }

  & .course-modules {
    & .module {
      & .number {
        background-color: var(--elixir-purple);
      }
    }
  }

  & .button-buy {
    background-color: var(--elixir-purple);
  }

  & .button-buy:hover {
    background-color: color-mix(in srgb, var(--elixir-purple) 95%, black);
  }
}

/*
  Rails Page

  ========================================================================== */

#rails {
  & .undershadow {
    box-shadow: var(--rails-red) 0px -4px 0px 0px inset;
  }

  & .hero {
    background-color: hsl(355, 57%, 21%); /* 53171c */
    background-image: url("/assets/courses/rails6/rails-hero-red-57a8150672fddd0db34b3f3e5f1c046691d046289b5cfd5211131a40f9553aa8.jpg");

    & .version {
      color: white;
      background-color: hsl(356, 64%, 56%); /* d74952 */
    }
  }

  & .button-buy {
    background-color: var(--rails-red);
  }

  & .button-buy:hover {
    background-color: color-mix(in srgb, var(--rails-red) 95%, black);
  }
}

/*
  Elm Page

  ========================================================================== */

#elm {
  & .undershadow {
    box-shadow: var(--elm-blue) 0px -4px 0px 0px inset;
  }

  .& hero {
    background-color: hsl(199, 75%, 66%); /* 69c1ea */
    background-image: url("/assets/courses/elm/elm-hero-blue-ea5d9815b9bcdc03b9e07494884c60018e13258237ff00459ce54562d98dbab1.jpg");

    .& version {
      color: white;
      background-color: hsl(207, 98%, 47%); /* 0284ee */
    }
  }

  & .course-modules {
    & .module {
      & .number {
        background-color: var(--elm-blue);
      }
    }
  }

  & .button-buy {
    background-color: var(--elm-blue);
  }

  & .button-buy:hover {
    background-color: color-mix(in srgb, var(--elm-blue) 95%, black);
  }
}

/*
  Ruby Page

  ========================================================================== */

#ruby {
  & .undershadow {
    box-shadow: var(--rails-red) 0px -4px 0px 0px inset;
  }

  & .hero {
    background-color: hsl(355, 57%, 21%); /* 53171c */
    background-image: url("/assets/courses/ruby/ruby-hero-red-57a8150672fddd0db34b3f3e5f1c046691d046289b5cfd5211131a40f9553aa8.jpg");

    & .version {
      color: white;
      background-color: hsl(356, 64%, 56%); /* d74952 */
    }
  }

  & .course-modules {
    & .module {
      & .number {
        background-color: var(--rails-red);
      }
    }
  }

  & .button-buy {
    background-color: var(--rails-red);
  }

  & .button-buy:hover {
    background-color: color-mix(in srgb, var(--rails-red) 95%, black);
  }
}

/*
  LiveView Page

  ========================================================================== */

#liveview {
  & .undershadow {
    box-shadow: var(--phoenix-orange) 0px -4px 0px 0px inset;
  }

  & .hero {
    background-color: hsl(30, 88%, 52%); /* f08419 */
    background-image: url("/assets/courses/liveview/liveview-hero-orange-fire-6a101e6e40a6d46afe2b6879ca4ade82e3753290d8b34b00c5e3ed7555a8e817.jpg");

    & .version {
      color: white;
      background-color: color-mix(in srgb, var(--phoenix-orange) 90%, black);
    }
  }

  & .course-modules {
    & .module {
      & .number {
        background-color: var(--tw-color-gray-600);
      }
    }
  }

  & .button-buy {
    background-color: #fb923c; /* tw-orange-400 */
  }

  & .button-buy:hover {
    background-color: #f97316; /* tw-orange-500 */
  }

  & input[type="email"]:focus,
  & input[type="text"]:focus {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--phoenix-orange) 90%, white);
  }
}

/*
  Phoenix Page

  ========================================================================== */

#phoenix {
  & .undershadow {
    box-shadow: var(--phoenix-orange) 0px -4px 0px 0px inset;
  }

  & .hero {
    background-color: hsl(30, 88%, 52%); /* f08419 */
    background-image: url("/assets/courses/liveview/liveview-hero-orange-fire-6a101e6e40a6d46afe2b6879ca4ade82e3753290d8b34b00c5e3ed7555a8e817.jpg");

    & .version {
      color: white;
      background-color: color-mix(in srgb, var(--phoenix-orange) 90%, black);
    }
  }

  & .course-modules {
    & .module {
      & .number {
        font-size: var(--tw-text-base);
        background-color: var(--phoenix-orange);
        height: 1.5rem;
        width: 1.5rem;
        padding: 1rem;
      }

      & .name {
        font-size: var(--tw-text-lg);
        font-weight: var(--tw-font-normal);
        color: var(--tw-color-gray-900);
        margin-left: 0.75rem;
      }

      & .free {
        margin-left: 1rem;
        background-color: #fed7aa;
        color: black;
        font-weight: var(--tw-font-medium);
        font-size: 0.65rem;
        padding: 0.35rem 0.35rem;
        border-radius: var(--tw-rounded-sm);
        text-transform: uppercase;
        box-shadow: none;
        line-height: var(--tw-leading-none);
        letter-spacing: var(--tw-tracking-normal);

        &:hover {
          background-color: #fdba74;
          cursor: pointer;
        }

        & a {
          color: #c2410c;
          text-decoration: none !important;
        }
      }
    }
  }

  & .button-get-notified {
    background-color: var(--phoenix-orange);
    text-transform: none;
  }

  & .button-get-notified:hover {
    background-color: color-mix(in srgb, var(--phoenix-orange) 95%, black);
  }

  & .button-buy {
    background-color: #fb923c; /* tw-orange-400 */
  }

  & .button-buy:hover {
    background-color: #f97316; /* tw-orange-500 */
  }

  & input[type="email"]:focus,
  & input[type="text"]:focus {
    outline: 0;
    box-shadow: 0 0 0 3px var(--phoenix-orange);
  }

  & li::marker {
    color: var(--phoenix-orange);
  }
}

/*
  Hotwire Page

  ========================================================================== */

#hotwire {
  & .undershadow {
    box-shadow: var(--rails-red) 0px -4px 0px 0px inset;
  }

  & .hero {
    background-color: hsl(30, 88%, 52%); /* f08419 */
    background-image: url("/assets/courses/hotwire/hotwire-hero-fire-7e20308c8913ea70cc985628fc9882447bbc98af36258f63f0e85acabb00d115.jpg");

    min-height: 150px;
    background-position: center bottom;

    & h1 {
      color: var(--rails-red);
      text-shadow: none;
      font-size: var(--tw-text-5-xl);
    }

    & h2 {
      font-size: var(--tw-text-2-xl);
      text-shadow: 6px 6px 4px rgba(0, 0, 0, 0.2);
      color: var(--tw-color-gray-100);
    }

    & .version {
      background-color: color-mix(in srgb, var(--rails-red) 80%, black);
    }
  }

  & .course-modules {
    & .module {
      & .number {
        background-color: var(--rails-red);
      }
    }
  }

  & .button-buy {
    background-color: var(--rails-red);
  }

  & .button-buy:hover {
    background-color: color-mix(in srgb, var(--rails-red) 95%, black);
  }

  & input[type="email"]:focus,
  & input[type="text"]:focus {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rails-red) 90%, white);
  }
}

/* Medium devices (tablets, 768px and up) */

@media screen and (min-width: 768px) {
  .course-page #hotwire .hero {
    & h1 {
      font-size: var(--tw-text-6-xl);
    }

    & h2 {
      font-size: var(--tw-text-3-xl);
    }
  }
}
:root {
  --syntax-default: #3f3f46; /* zinc-700 */
  --syntax-name: #3730a3; /* indigo-800 */
  --syntax-keyword: #0284c7; /* sky-600 */
  --syntax-literal-string: #15803d; /* green-700 */
  --syntax-literal-number: #be123c; /* rose-700 */
  --syntax-symbol: #9a3412; /* orange-800 */
  --syntax-var: #0d9488; /* teal-600 */
  --syntax-comment: #71717a; /* zinc-500 */
  --syntax-error: #991b1b; /* red-800 */
}

.highlighter-rouge .highlight {
  background: inherit;
}

/*
  Examples:

  https://gist.github.com/awood/9651461
  https://github.com/StylishThemes/GitHub-Dark/
  https://github.com/aahan/pygments-github-style
*/

.code-highlight .hll {
  background-color: #ffffcc;
}

/* Literal.String */
.code-highlight .s {
  color: var(--syntax-literal-string);
}

/* Literal.String.Backtick */
.code-highlight .sb {
  color: var(--syntax-literal-string);
}

/* Literal.String.Char */
.code-highlight .sc {
  color: var(--syntax-literal-string);
}

/* Literal.String.Doc */
.code-highlight .sd {
  color: var(--syntax-literal-string);
}

/* Literal.String.Single */
.code-highlight .s1 {
  color: var(--syntax-literal-string);
}

/* Literal.String.Double */
.code-highlight .s2 {
  color: var(--syntax-literal-string);
}

/* Literal.String.Escape */
.code-highlight .se {
  color: var(--syntax-literal-string);
}

/* Literal.String.Interpol */
.code-highlight .si {
  color: var(--syntax-literal-string);
}

/* Literal.String.Other */
.code-highlight .sx {
  color: var(--syntax-literal-string);
}

/* Literal.String.Regex */
.code-highlight .sr {
  color: var(--syntax-literal-string);
}

/* Literal.String.Symbol */
.code-highlight .ss {
  color: var(--syntax-symbol);
  /* font-weight: 700; */
}

/* Literal.Number */
.code-highlight .m {
  color: var(--syntax-literal-number);
}

/* Literal.Number.Float */
.code-highlight .mf {
  color: var(--syntax-literal-number);
}

/* Literal.Number.Hex */
.code-highlight .mh {
  color: var(--syntax-literal-number);
}

/* Literal.Number.Integer */
.code-highlight .mi {
  color: var(--syntax-literal-number);
}

/* Literal.Number.Oct */
.code-highlight .mo {
  color: var(--syntax-literal-number);
}

/* Literal.Number.Integer.Long */
.code-highlight .il {
  color: var(--syntax-literal-number);
}

/* Name */
.code-highlight .n {
  color: var(--syntax-default);
}

/* Name.Builtin.Pseudo */
.code-highlight .bp {
  color: var(--syntax-var);
}

/* Name.Attribute */
.code-highlight .na {
  color: var(--syntax-default);
}

/* Name.Builtin */
.code-highlight .nb {
  color: var(--syntax-default);
}

/* Name.Class */
.code-highlight .nc {
  color: var(--syntax-name);
}

/* Name.Constant */
.code-highlight .no {
  color: var(--syntax-name);
}

/* Name.Decorator */
.code-highlight .nd {
  color: var(--syntax-default);
}

/* Name.Entity */
.code-highlight .ni {
  color: var(--syntax-error);
  font-weight: 700;
}

/* Name.Function */
.code-highlight .nf {
  color: var(--syntax-default);
  /* font-weight: 700; */
}

/* Name.Namespace */
.code-highlight .nn {
  color: var(--syntax-var);
}

/*  Name.Tag */
.code-highlight .nt {
  color: var(--syntax-name);
  /* font-weight: 700; */
}

/* Name.Variable */
.code-highlight .nv {
  color: var(--syntax-name);
}

/* Name.Other */
.code-highlight .nx {
  color: var(--syntax-default);
}

/* Name.Variable.Class */
.code-highlight .vc {
  color: var(--syntax-name);
}

/* Name.Variable.Global */
.code-highlight .vg {
  color: var(--syntax-var);
}

/* Name.Variable.Instance */
.code-highlight .vi {
  color: var(--syntax-var);
}

/* Comment */
.code-highlight .c {
  color: var(--syntax-comment);
  font-style: italic;
}

/* Comment.Single */
.code-highlight .c1 {
  color: var(--syntax-comment);
  font-style: italic;
}

/* Comment.Multiline */
.code-highlight .cm {
  color: var(--syntax-comment);
  font-style: italic;
}

/* Comment.Preproc */
.code-highlight .cp {
  color: var(--syntax-default);
}

/* Comment.Special */
.code-highlight .cs {
  color: var(--syntax-comment);
  font-style: italic;
}

/* Keyword */
.code-highlight .k {
  color: var(--syntax-keyword);
  font-weight: 700;
}

/* Keyword.Constant */
.code-highlight .kc {
  color: var(--syntax-keyword);
  font-weight: 700;
}

/* Keyword.Declaration */
.code-highlight .kd {
  color: var(--syntax-keyword);
  font-weight: 700;
}

/* Keyword.Namespace */
.code-highlight .kn {
  color: var(--syntax-keyword);
  font-weight: 700;
}

/* Keyword.Pseudo */
.code-highlight .kp {
  color: var(--syntax-keyword);
  font-weight: 700;
}

/* Keyword.Reserved */
.code-highlight .kr {
  color: var(--syntax-keyword);
  font-weight: 700;
}

/* Keyword.Type */
.code-highlight .kt {
  color: var(--syntax-var);
}

/* .err { color: #F00000; background-color: #F0A0A0 } */

/* Generic.Deleted */
.code-highlight .gd {
  color: var(--syntax-error);
}

/* Generic.Emph */
.code-highlight .ge {
  font-style: italic;
}

/* Generic.Error */
.code-highlight .gr {
  color: var(--syntax-error);
}

/* Generic.Heading */
.code-highlight .gh {
  color: var(--syntax-default);
  font-weight: 700;
}

/* Generic.Inserted */
.code-highlight .gi {
  color: var(--syntax-literal-string);
}

/* Generic.Output */
.code-highlight .go {
  color: var(--syntax-comment);
}

/*  Generic.Prompt */
.code-highlight .gp {
  color: var(--syntax-default);
}

/* Generic.Strong */
.code-highlight .gs {
  font-weight: 700;
}

/* Generic.Subheading */
.code-highlight .gu {
  color: var(--syntax-default);
  font-weight: 700;
}

/* Generic.Traceback */
.code-highlight .gt {
  color: var(--syntax-error);
}

/* Operator */
.code-highlight .o {
}

/* Operator Word */
.code-highlight .ow {
  color: var(--syntax-keyword);
  font-weight: 700;
}

/* Text.Whitespace */
.code-highlight .w {
  color: var(--syntax-default);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */