/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) 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
 * 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.
 *







 */

:root {
    --dark: #131416;
    --border-dark: #090a0b;
    --border-light: #17191c;
    --brand: #0fdb80;
    --brand-h: 153;
    --brand-s: 87%;
    --brand-l: 46%;
    --brand-hsl: 153, 87%, 46%;
    --brand-l-dark: 6%;
    --brand-bg: hsl(var(--brand-h), var(--brand-s), var(--brand-l-dark));
    --review-h: 348;
    --review-s: 100%;
    --review-l: 61%;
    --review: #ff3860;
    --review-bg: hsl(var(--review-h), var(--review-s), var(--brand-l-dark));
    --first-h: 303;
    --first: hsl(var(--first-h), var(--brand-s), var(--brand-l));
    --first-bg: hsl(var(--first-h), var(--brand-s), var(--brand-l-dark));
    --second-h: 213;
    --second: hsl(var(--second-h), var(--brand-s), var(--brand-l));
    --second-bg: hsl(var(--second-h), var(--brand-s), var(--brand-l-dark));
    --third-h: 333;
    --third: hsl(var(--third-h), var(--brand-s), var(--brand-l));
    --third-bg: hsl(var(--third-h), var(--brand-s), var(--brand-l-dark));
    --fourth-h: 33;
    --fourth: hsl(var(--fourth-h), var(--brand-s), var(--brand-l));
    --fourth-bg: hsl(var(--fourth-h), var(--brand-s), var(--brand-l-dark));
    --fifth-h: 73;
    --fifth: hsl(var(--fifth-h), var(--brand-s), var(--brand-l));
    --fifth-bg: hsl(var(--fifth-h), var(--brand-s), var(--brand-l-dark));
    --sixth-h: 183;
    --sixth: hsl(var(--sixth-h), var(--brand-s), var(--brand-l));
    --sixth-bg: hsl(var(--sixth-h), var(--brand-s), var(--brand-l-dark));
    --seventh-h: 3;
    --seventh: hsl(var(--seventh-h), var(--brand-s), var(--brand-l));
    --seventh-bg: hsl(var(--seventh-h), var(--brand-s), var(--brand-l-dark));
    --text: rgba(255, 255, 255, 0.3);
    --text-bold: rgba(255, 255, 255, 0.7);
    --text-strong: #fff;
    --family-main: "Inter Variable", "Inter", -apple-system, sans-serif;
    --family-alt: "N27", "Inter Variable", "Inter", -apple-system, sans-serif;
    --family-code: "Hack", "Menlo", monospace;
    --gradient: linear-gradient(180deg, #0fdb80 0%, #03b565 100%);
    --duration: 500ms;
    --navbar-padding: 1em;
    --navbar-gap: 1em;
    --danger-h: 353;
    --danger-s: 87%;
    --danger-l: 46%;
    --danger-l-dark: 6%;
    --danger: hsl(var(--danger-h), var(--danger-s), var(--danger-l));
    --danger-bg: hsl(var(--danger-h), var(--danger-s), var(--danger-l-dark));
    --brand-icon-height: 50px;
    --navbar-height: calc( var(--brand-icon-height) + calc(var(--navbar-padding) * 2) );
    --trackbar-height: calc(var(--brand-icon-height) + 32px);
    --note-h: 224;
    --note-s: 60%;
    --info-h: 224;
    --info: hsl(var(--info-h) var(--note-s) 70%);
    --success-h: 104;
    --success: hsl(var(--success-h) var(--note-s) 70%);
    --warning-h: 24;
    --warning: hsl(var(--warning-h) var(--note-s) 70%);
    --danger-h: 4;
    --danger: hsl(var(--danger-h) var(--note-s) 70%);
    --output-min-width: 400px;
    --page-gradient: linear-gradient(#131416, #041b11);
    --page-gradient-invert: linear-gradient(to top, #131416, #041b11);
}

html {
    background-color: var(--dark);
    background-image: linear-gradient( 153deg, rgba(36, 36, 36, 0.6) 6.73%, rgba(18, 18, 18, 0.6) 69.09% );
    background-image: linear-gradient(#131416, #041b11);
    background-attachment: fixed;
    background-size: 100% 100%;
    color: var(--text);
    font-family: var(--family-main);
    font-size: 1em;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-y: scroll;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    min-height: 100vh;
    min-width: 320px;
}

body,
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}

body {
    color: var(--text);
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
}

pre {
    font-family: var(--family-code);
}

a,
button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

strong {
    color: var(--text-strong);
}

button,
.button,
.btn,
.form-control,
.form-control-plaintext {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    color: currentColor;
    font-family: inherit;
    font-size: 1em;
    margin: 0;
    padding: 0;
}

:focus-visible {
    outline-color: var(--brand);
    outline-offset: 1px;
    outline-style: solid;
    outline-width: 2px;
}

    :focus-visible:active {
        outline-width: 1px;
    }

.prismjs > code::after,
[data-label]::after,
[data-start]::before,
[data-end]::after,
[data-type]::after {
    background: var(--language);
    border-radius: 0.25rem;
    border-top-right-radius: 1em;
    color: var(--gh-dark);
    content: var(--lang);
    display: inline-flex;
    font-family: var(--family-main);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    padding: 0.25rem 0.5rem;
    position: absolute;
    right: -0.25rem;
    text-transform: uppercase;
    top: -0.25rem;
    z-index: 1;
}

[data-label] {
    border: 1px dashed var(--brand);
    position: relative;
    &::after

{
    background: var(--brand);
    border-radius: 0.25rem;
    color: rgba(0, 0, 0, 0.5);
    content: attr(data-label);
    left: 1rem;
    right: auto;
    top: -0.75rem;
}

}

[data-start] {
    border: 1px dashed var(--brand);
    border-top-left-radius: 0 !important;
    position: relative;
    &::before

{
    background: var(--brand);
    border-radius: 0.25rem 0.25rem 0 0;
    color: rgba(0, 0, 0, 0.5);
    content: attr(data-start);
    left: -1px;
    right: auto;
    top: auto;
    bottom: 100%;
}

}

[data-end] {
    border: 1px dashed var(--brand);
    border-top-right-radius: 0 !important;
    position: relative;
    &::after

{
    background: var(--brand);
    border-radius: 0.25rem 0.25rem 0 0;
    color: rgba(0, 0, 0, 0.5);
    content: attr(data-end);
    left: auto;
    right: -1px;
    top: auto;
    bottom: 100%;
}

}

[data-type] {
    position: relative;
}

[data-type="css"] {
    --lang: "CSS";
    --language: var(--gh-blue);
}

[data-type="html"] {
    --lang: "HTML";
    --language: var(--gh-orange);
}

[data-type="example"] {
    /* --lang: "Example"; */
    --language: var(--brand);
    &::after

{
    border-radius: 0.25rem;
    border-top-left-radius: 1em;
    left: -0.25rem;
    right: auto;
}

}

[data-type="key"] {
    --lang: "Key Point";
    --language: var(--brand);
}

[data-type="output"] {
    --lang: "Output";
    --language: var(--gh-dimmed);
}

[data-type="question"] {
    --lang: "Question";
    --language: var(--brand);
}

[data-type="expected"] {
    --lang: "Expected";
    --language: var(--gh-dimmed);
}

[data-type="controls"] {
    --lang: "Controls";
    --language: var(--brand);
}

[data-type="info"] {
    --lang: "Info";
    --language: var(--brand);
}

[data-type="instructions"] {
    --lang: "Instructions";
    --language: var(--brand);
}

[data-type="exercise"] {
    --lang: "Exercise";
    --language: var(--brand);
}

.monaco-editor {
    border-radius: 1em !important;
}

.btn,
.button,
button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

ul {
    list-style: none;
}

button,
input,
select {
    margin: 0;
}

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

img,
video {
    height: auto;
    max-width: 100%;
}

iframe {
    border: 0;
}

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

td,
th {
    padding: 0;
}

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

@font-face {
    font-family: "N27";
    src: url(/fonts/N27-Bold.woff2) format("woff2"), url(/fonts/N27-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "N27";
    src: url(/fonts/N27-Regular.woff2) format("woff2"), url(/fonts/N27-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "N27";
    src: url(/fonts/N27-Medium.woff2) format("woff2"), url(/fonts/N27-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

.animated,
.home-badges .badge {
    align-items: center;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    display: flex;
    justify-content: center;
    transform-origin: center;
}

@media screen and (min-width: 1000px) {
    .home-badges {
        display: none !important;
    }

        .home-badges .badge {
            position: absolute;
            animation-delay: calc(var(--dl) * 100ms);
            &.is-typography

{
    --dl: 1;
    left: 3%;
    top: 20%;
}

&.is-flexbox {
    --dl: 2;
    left: 20%;
    top: 5%;
}

&.is-css-grid {
    --dl: 3;
    left: 10%;
    bottom: 35%;
}

&.is-responsive-design {
    --dl: 4;
    right: 20%;
    bottom: 25%;
}

&.is-css-variables {
    --dl: 5;
    left: 40%;
    top: 15%;
}

&.is-animations {
    --dl: 6;
    right: 10%;
    top: 13%;
}

&.is-dark-mode {
    --dl: 7;
    bottom: 20%;
    left: 40%;
}

}
}

.anim-jelly,
.home-badges .badge {
    animation-name: jelly-frames-0-1;
}

@keyframes jelly-frames-0-1 {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    3.4% {
        transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4.7% {
        transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    6.81% {
        transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    9.41% {
        transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    10.21% {
        transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    13.61% {
        transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    14.11% {
        transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    17.52% {
        transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    18.72% {
        transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    21.32% {
        transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    24.32% {
        transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    25.23% {
        transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.03% {
        transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.93% {
        transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    35.54% {
        transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    36.74% {
        transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    41.04% {
        transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    44.44% {
        transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    52.15% {
        transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    59.86% {
        transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    63.26% {
        transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    75.28% {
        transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    85.49% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    90.69% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

@keyframes jelly-frames-1-0 {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    3.4% {
        transform: matrix3d(0.684, 0, 0, 0, 0, 0.593, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4.7% {
        transform: matrix3d(0.55, 0, 0, 0, 0, 0.401, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    6.81% {
        transform: matrix3d(0.341, 0, 0, 0, 0, 0.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    9.41% {
        transform: matrix3d( 0.117, 0, 0, 0, 0, -0.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    10.21% {
        transform: matrix3d( 0.058, 0, 0, 0, 0, -0.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    13.61% {
        transform: matrix3d( -0.123, 0, 0, 0, 0, -0.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    14.11% {
        transform: matrix3d( -0.141, 0, 0, 0, 0, -0.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    17.52% {
        transform: matrix3d( -0.208, 0, 0, 0, 0, -0.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    18.72% {
        transform: matrix3d( -0.212, 0, 0, 0, 0, -0.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    21.32% {
        transform: matrix3d( -0.196, 0, 0, 0, 0, -0.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    24.32% {
        transform: matrix3d(-0.151, 0, 0, 0, 0, 0.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    25.23% {
        transform: matrix3d( -0.134, 0, 0, 0, 0, 0.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    29.03% {
        transform: matrix3d( -0.063, 0, 0, 0, 0, 0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    29.93% {
        transform: matrix3d( -0.048, 0, 0, 0, 0, 0.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    35.54% {
        transform: matrix3d(0.021, 0, 0, 0, 0, 0.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    36.74% {
        transform: matrix3d(0.028, 0, 0, 0, 0, 0.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    41.04% {
        transform: matrix3d( 0.039, 0, 0, 0, 0, -0.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    44.44% {
        transform: matrix3d( 0.034, 0, 0, 0, 0, -0.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    52.15% {
        transform: matrix3d( 0.009, 0, 0, 0, 0, -0.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    59.86% {
        transform: matrix3d(-0.006, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    63.26% {
        transform: matrix3d( -0.007, 0, 0, 0, 0, 0.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    75.28% {
        transform: matrix3d( -0.001, 0, 0, 0, 0, -0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );
    }

    85.49% {
        transform: matrix3d(0.001, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    90.69% {
        transform: matrix3d(0.001, 0, 0, 0, 0, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

@keyframes anim-rise-up {
    from {
        transform: rotateX(110deg);
    }

    to {
        transform: rotateX(0deg);
    }
}

@keyframes anim-pivot-up {
    from {
        transform: rotateX(-110deg);
    }

    to {
        transform: rotateX(0deg);
    }
}

@keyframes anim-trans-down {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes anim-trans-up {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes anim-trans-left {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes anim-trans-right {
    from {
        opacity: 0;
        transform: translateX(-1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes anim-slide-down {
    from {
        opacity: 0;
        transform: translateY(-50%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes anim-grow {
    from {
        opacity: 0;
        transform: scale(80%);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes anim-bounce-jelly {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    3.4% {
        transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4.7% {
        transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    6.81% {
        transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    9.41% {
        transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    10.21% {
        transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    13.61% {
        transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    14.11% {
        transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    17.52% {
        transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    18.72% {
        transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    21.32% {
        transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    24.32% {
        transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    25.23% {
        transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.03% {
        transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.93% {
        transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    35.54% {
        transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    36.74% {
        transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    41.04% {
        transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    44.44% {
        transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    52.15% {
        transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    59.86% {
        transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    63.26% {
        transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    75.28% {
        transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    85.49% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    90.69% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
}

.badge {
    --h: var(--brand-h);
    --s: var(--brand-s);
    --l: var(--brand-l);
    --h: 153;
    --s: 68%;
    --l: 72%;
    --red: 353;
    --orange: 24;
    --yellow: 50;
    --green: 153;
    --blue: 212;
    --purple: 261;
    --pink: 324;
    --color: var(--brand);
    --overlay: rgb(0 0 0 / 90%);
    border-radius: 0.5em;
    border: 1px solid var(--color);
    background-image: linear-gradient(var(--overlay), var(--overlay)), linear-gradient(var(--color), var(--color));
    color: var(--color);
    display: inline-flex;
    vertical-align: top;
    align-items: center;
    padding: 0.25em 0.75em;
    gap: 0.5em;
    .emoji

{
    --d: 20px;
    background-image: url(/emojis/emojis-20.png);
}

&.is-text {
    background: none;
    border: none;
    color: var(--text-strong);
    padding-inline: 0;
}

&.is-transforms,
&.is-typography {
    --color: var(--gh-blue);
}

&.is-flexbox,
&.is-transitions {
    --color: var(--gh-purple);
}

&.is-gradients,
&.is-latest,
&.is-css-grid {
    --color: var(--gh-pink);
}

&.is-web-fonts,
&.is-responsive-design {
    --color: var(--gh-red);
}

&.is-upcoming,
&.is-css-variables {
    --color: var(--gh-orange);
}

&.is-animations {
    --color: var(--gh-yellow);
}

&.is-dark-mode {
    --color: var(--gh-dimmed);
    color: var(--gh-text);
}

}

.brand-icon,
.brand-type,
.brand-logo,
.jgthms {
    --scale: 1;
    align-items: center;
    display: flex;
    justify-content: center;
    height: calc(var(--scale) * var(--h));
    width: calc(var(--scale) * var(--w));
    flex-shrink: 0;
    flex-grow: 0;
}

.brand-icon {
    --h: 50px;
    --w: 50px;
}

.brand-logo {
    --scale: 0.75;

    --w: 600px;
}

.brand-type {
    --scale: 0.3333;
    --h: 48px;
    --w: 616px;
}

.jgthms {
    --h: 24px;
    font-family: var(--family-alt);
    font-size: 1.125em;
    gap: 0.25rem;
    span

{
    font-weight: 300;
}

strong {
    font-weight: 500;
}

}

@media screen and (min-width: 400px) {
    .brand-logo {
        --scale: 0.875;
    }
}

@media screen and (min-width: 800px) {
    .brand-logo {
        --scale: 1;
    }
}

@media screen and (min-width: 1000px) {
    .brand-logo {
        --scale: 0.75;
    }
}

@media screen and (min-width: 1400px) {
    .brand-logo {
        --scale: 0.875;
    }
}

@media screen and (min-width: 1600px) {
    .brand-logo {
        --scale: 1;
    }
}

.bd-bubble-content,
.bd-bubble-arrow,
.bd-bubble-author {
    animation-duration: 500ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    backface-visibility: hidden;
}

.bd-bubble {
    --h: 120;
    --s: 100%;
    --fg-l: 70%;
    --bg-l: 10%;
    --bg: hsl(var(--h), var(--s), var(--bg-l));
    --fg: hsl(var(--h), var(--s), var(--fg-l));
    --scale: 1.125;
    display: flex;
    flex-direction: column;
    width: 17rem;
    position: absolute;
    bottom: 0;
    left: 0;
    perspective: 200px;
    transform-style: preserve-3d;
    text-align: left;
    &.is-alicia

{
    --scale: 0.875;
}

&.is-jessica {
    --scale: 1.25;
}

&.is-emma {
    --scale: 1.25;
}

}

.bd-bubble-content {
    animation-name: anim-rise-up;
    transform-origin: bottom center;
    background-color: var(--bg);
    color: var(--fg);
    font-size: calc(var(--scale, 1) * 1em);
    font-weight: 600;
    line-height: 1.25;
    padding: 0.875em 1em;
    position: relative;
    border-radius: 0.75em;
    margin-left: -1.5rem;
}

.bd-bubble-arrow {
    animation-name: anim-slide-down;
    border-width: 0.5rem 0.75rem;
    border-color: transparent;
    border-style: solid;
    border-top-color: var(--bg);
    height: 1rem;
    margin-top: -1px;
    width: 1.5rem;
}

.bd-bubble-author {
    animation-name: anim-pivot-up;
    align-items: center;
    gap: 0.5rem;
    display: flex;
    transform-origin: top center;
    img

{
    border-radius: 40%;
    height: 1.5em;
    width: 1.5em;
    flex-shrink: 0;
}

strong {
    color: var(--text-strong);
    font-size: 0.875em;
}

}

.js-bubble-igor .bd-bubble-content {
    animation-delay: calc(var(--animation-delay) + 0s);
}

.js-bubble-igor .bd-bubble-arrow {
    animation-delay: calc(var(--animation-delay) + 0.5s);
}

.js-bubble-igor .bd-bubble-author {
    animation-delay: calc(var(--animation-delay) + 0.7s);
}

.js-bubble-jessica .bd-bubble-content {
    animation-delay: calc(var(--animation-delay) + 0.3s);
}

.js-bubble-jessica .bd-bubble-arrow {
    animation-delay: calc(var(--animation-delay) + 0.8s);
}

.js-bubble-jessica .bd-bubble-author {
    animation-delay: calc(var(--animation-delay) + 1s);
}

.js-bubble-emma .bd-bubble-content {
    animation-delay: calc(var(--animation-delay) + 0.6s);
}

.js-bubble-emma .bd-bubble-arrow {
    animation-delay: calc(var(--animation-delay) + 1.1s);
}

.js-bubble-emma .bd-bubble-author {
    animation-delay: calc(var(--animation-delay) + 1.3s);
}

.js-bubble-guillaume .bd-bubble-content {
    animation-delay: calc(var(--animation-delay) + 0.9s);
}

.js-bubble-guillaume .bd-bubble-arrow {
    animation-delay: calc(var(--animation-delay) + 1.4s);
}

.js-bubble-guillaume .bd-bubble-author {
    animation-delay: calc(var(--animation-delay) + 1.6s);
}

.btn,
.button {
    --factor: 1;
    --blur: 0.1em;
    --spread: 0.2em;
    --shadow-alpha: 0.01;
    --border-radius: 0.5em;
    --border-width: 2px;
    --pt: 0.6em;
    --px: 1.2em;
    --pb: 0.7em;
    border-radius: var(--border-radius);
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 500;
    font-family: var(--family-alt);
    color: var(--text-strong);
    text-shadow: 0px calc(var(--factor) * var(--blur)) calc(var(--factor) * var(--spread)) rgba(0, 0, 0, 0.2);
    padding: var(--border-width);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition-duration: var(--duration);
    transition-property: background-color, box-shadow, color, text-shadow;
    box-shadow: 0 0.0625em calc(var(--factor) * 1em) hsla(var(--brand-hsl), var(--shadow-alpha));
    white-space: nowrap;
    &:hover

{
    --shadow-alpha: 0.2;
    text-shadow: 0px calc(var(--factor) * var(--blur)) calc(var(--factor) * var(--spread)) rgba(0, 0, 0, 0.5);
}

&:active {
    --factor: 0.5;
    --shadow-alpha: 0.1;
    top: 1px;
}

&[disabled] {
    pointer-events: none;
    box-shadow: none;
    background: var(--text);
    opacity: 0.3;
    .button-label

{
    background: none;
    color: var(--box-background);
}

}

&.is-plain {
    &:hover

{
    background-color: var(--brand-bg);
    color: var(--brand);
}

}

&.is-bold {
    --pt: 0.8em;
    --pb: 0.9em;
}

&.is-large {
    font-size: 1.5em;
    .button-label

{
    height: 3em;
    padding-left: 2em;
    padding-right: 2em;
}

}

&.is-outlined {
    background: linear-gradient(180deg, #0fdb80 0%, #03b565 100%), #0fdb80;
    .button-label

{
    background: #0e1917;
}

&:hover {
    .button-label

{
    background: #0e231c;
}

}
}

.emoji {
    margin-left: -0.25em;
}

}

.btn,
.button-label {
    border-radius: calc(var(--border-radius) - var(--border-width));
    padding: calc(var(--pt) - var(--border-width)) calc(var(--px) - var(--border-width)) calc(var(--pb) - var(--border-width));
    transition-duration: var(--duration);
    transition-property: background-color, box-shadow, color, text-shadow;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.button-label {
    gap: 0.5em;
}

.btn-primary,
.button.is-primary .button-label {
    background: linear-gradient(180deg, #0fdb80 0%, #03b565 100%), #0fdb80;
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.25) inset, 0px calc(var(--factor) * var(--blur)) calc(var(--factor) * var(--spread)) 0px rgba(0, 0, 0, 0.1);
}

.button.is-primary[disabled] {
    background-color: transparent;
}

.plain-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5em 1em;
    border-radius: 0.75em;
    font-weight: 500;
    color: var(--brand);
    background-color: var(--brand-bg);
    &.is-free, &.is-ready, &.is-in_progress

{
    background-color: var(--brand);
    color: var(--brand-bg);
}

&.is-unavailable {
    background-color: var(--text);
    color: var(--dark);
}

}

.buttons {
    align-items: center;
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

.circle {
    --percent: 10%;
    display: flex;
    padding: 0.5rem;
    height: 8rem;
    width: 8rem;
    border-radius: 9999px;
    background-color: var(--brand-bg);
    background-image: conic-gradient( var(--brand) 0%, var(--brand) var(--percent), transparent var(--percent) );
    position: relative;
    align-items: stretch;
    justify-content: center;
}

    .circle p {
        color: white;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: #0f1012;
        flex-grow: 1;
        font-size: 2rem;
        color: var(--text-strong);
        font-family: var(--family-alt);
        font-weight: 700;
    }

.bd-home-circles {
    --animation-duration: 1s;
    --circle-delay-a: 0s;
    --circle-delay-b: 0.5s;
    --circle-delay-c: 1s;
    left: 0;
    position: fixed;
    overflow: hidden;
    top: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    opacity: 0.5;
}

@media screen and (max-width: 999px) {
    .bd-circle,
    .bd-dot-bounce {
        animation: none !important;
    }
}

.bd-circles {
    --d: 1360px;
    height: var(--d);
    left: calc(calc(100% - var(--d)) / 2);
    position: absolute;
    top: calc(calc(100% - var(--d)) / 2);
    width: var(--d);
}

.bd-dot {
    border-radius: 9999px;
    height: 1.5rem;
    left: calc(50% - 0.75rem);
    position: absolute;
    top: calc(50% - 0.75rem);
    width: 1.5rem;
    opacity: 0;
    transition-duration: 1s;
    transition-property: opacity;
    &.is-active

{
    opacity: 1;
}

.badge {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -10%, 0);
    white-space: nowrap;
}

}

.bd-circle {
    --h: 121;
    --s: 0%;
    --l: 90%;
    --a: 0.2;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    transform-origin: center;
    transform-style: preserve-3d;
    animation-name: anim-grow;
    animation-duration: 1s;
    border: 1px dashed rgb(255 255 255 / 10%);
    border-radius: 9999px;
    left: calc(calc(100% - var(--d)) / 2);
    height: var(--d);
    position: absolute;
    top: calc(calc(100% - var(--d)) / 2);
    width: var(--d);
    &.is-one

{
    --d: 800px;
}

&.is-two {
    --h: 171;
    --d: 1080px;
    animation-delay: var(--circle-delay-b);
}

&.is-three {
    --h: 191;
    --d: 1360px;
    animation-delay: var(--circle-delay-c);
}

}

.bd-dot-bounce {
    --factor: 1;
    animation-duration: 1000ms;
    animation-name: anim-bounce-jelly;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-delay: calc(var(--circle-delay-c) + calc(var(--factor) * 0.1s));
}

    .bd-dot-bounce.is-1 {
        --factor: 1;
    }

    .bd-dot-bounce.is-2 {
        --factor: 2;
    }

    .bd-dot-bounce.is-3 {
        --factor: 3;
    }

    .bd-dot-bounce.is-4 {
        --factor: 4;
    }

    .bd-dot-bounce.is-5 {
        --factor: 5;
    }

    .bd-dot-bounce.is-6 {
        --factor: 6;
    }

    .bd-dot-bounce.is-7 {
        --factor: 7;
    }

    .bd-dot-bounce.is-8 {
        --factor: 8;
    }

    .bd-dot-bounce.is-9 {
        --factor: 9;
    }

    .bd-dot-bounce.is-10 {
        --factor: 10;
    }

    .bd-dot-bounce.is-11 {
        --factor: 11;
    }

    .bd-dot-bounce.is-12 {
        --factor: 12;
    }

.color-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
    gap: 1em;
}

.color-swatch {
    padding: 1em 1.5em;
    border-radius: 0.5em;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.5);
}

.container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
    flex-grow: 1;
    width: 100%;
}

.gravatar {
    --d: 40px;
    height: var(--d);
    width: var(--d);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0;
    img

{
    height: var(--d);
    width: var(--d);
    border-radius: 0.25em;
}

}

.dropdown {
    align-items: center;
    display: none !important;
    position: relative;
    gap: 1em;
    width: 100%;
    margin-top: 1em;
    justify-content: center;
}

    .dropdown:hover .dropdown-menu,
    .dropdown-trigger:focus-within + .dropdown-menu {
        transform: scale(1);
        visibility: visible;
        opacity: 1;
    }

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 1em;
}

.dropdown-label {
    align-items: center;
    display: flex;
    color: var(--text-strong);
    font-size: 1.25em;
    gap: 0.25em;
    align-items: center;
    overflow: hidden;
    max-width: 10em;
    text-overflow: ellipsis;
    white-space: nowrap;
    justify-content: center;
    strong

{
    max-width: 7em;
    overflow: hidden;
    text-overflow: ellipsis;
}

}

.dropdown-menu {
    display: flex;
    flex-direction: column;
    font-size: 1.25em;
    gap: 0 !important;
    position: absolute;
    padding: 0.5em;
    right: -0.5em;
    top: calc(100% - 2px);
    transform-origin: top right;
    transition: visibility 0s, opacity 150ms ease, transform 150ms ease;
    visibility: hidden;
    transform: scale(0.97);
    white-space: nowrap;
    z-index: 80;
}

.dropdown-list {
    background-color: var(--dark);
    border-radius: 0.5em;
    border: 1px solid var(--border-dark);
    box-shadow: 0 0.25em 0.5em hsla(var(--brand-hsl), 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.25em !important;
    padding: 0.5em;
    li

{
    form

{
    display: flex;
    flex-grow: 1;
}

a,
button {
    color: var(--text-strong);
    border-radius: 0.25em;
    display: flex;
    flex-grow: 1;
    padding: 0.25em 3em 0.25em 0.75em;
    transition-duration: var(--duration);
    transition-property: background-color, color;
}

    &.is-active a,
    a:hover,
    button:hover {
        background-color: var(--border-light);
        color: var(--brand);
    }

}
}

.burger {
    display: flex;
    border-radius: 0.25em;
    align-items: stretch;
    justify-content: space-evenly;
    flex-direction: column;
    padding: 0.25em;
    height: 2em;
    width: 2em;
    div

{
    height: 2px;
    border-radius: 0.0625em;
    background-color: var(--text-strong);
    flex-grow: 0;
    flex-shrink: 0;
}

}

@media screen and (min-width: 1000px) {
    .dropdown {
        display: flex !important;
        margin-top: 0;
        width: auto;
    }
}

@media screen and (min-width: 1200px) {
    .dropdown-label {
        width: auto;
    }
}

@media screen and (min-width: 1400px) {
    .dropdown-label {
        max-width: 16em;
    }
}

@media screen and (min-width: 1600px) {
    .dropdown-label {
        max-width: 24em;
    }
}

.emoji {
    --d: 24px;
    --emoji-count: 22;
    background-image: url(/emojis/emojis-24.png);
    background-size: calc(var(--emoji-count) * var(--d));
    display: inline-flex;
    flex-shrink: 0;
    height: var(--d);
    width: var(--d);
    &.is-screencasts

{
    background-position-x: calc(-1 * var(--d));
}

&.is-projects {
    background-position-x: calc(-2 * var(--d));
}

&.is-typography {
    background-position-x: calc(-3 * var(--d));
}

&.is-flexbox {
    background-position-x: calc(-4 * var(--d));
}

&.is-css-grid {
    background-position-x: calc(-5 * var(--d));
}

&.is-dark-mode {
    background-position-x: calc(-6 * var(--d));
}

&.is-responsive-design {
    background-position-x: calc(-7 * var(--d));
}

&.is-css-variables {
    background-position-x: calc(-8 * var(--d));
}

&.is-animations {
    background-position-x: calc(-9 * var(--d));
}

&.is-latest {
    background-position-x: calc(-10 * var(--d));
}

&.is-upcoming {
    background-position-x: calc(-11 * var(--d));
}

&.is-gradients {
    background-position-x: calc(-12 * var(--d));
}

&.is-svg {
    background-position-x: calc(-13 * var(--d));
}

&.is-container-queries {
    background-position-x: calc(-14 * var(--d));
}

&.is-transforms {
    background-position-x: calc(-15 * var(--d));
}

&.is-transitions {
    background-position-x: calc(-16 * var(--d));
}

&.is-web-fonts {
    background-position-x: calc(-17 * var(--d));
}

&.is-love {
    background-position-x: calc(-18 * var(--d));
}

&.is-good {
    background-position-x: calc(-19 * var(--d));
}

&.is-decent {
    background-position-x: calc(-20 * var(--d));
}

&.is-bad {
    background-position-x: calc(-21 * var(--d));
}

}

.features {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    justify-content: center;
    margin: var(--navbar-padding);
}

    .features li {
        gap: 0.25em;
        display: flex;
        align-items: center;
    }

    .features strong {
        font-family: var(--family-alt);
        font-size: 1.5em;
    }

@media screen and (max-width: 600px) {
    .features li {
        flex-direction: column;
    }
}

.footer {
    padding: calc(2 * var(--navbar-padding));
    text-align: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: var(--navbar-padding);
    align-items: center;
    p

{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1em 2em;
    &:nth-child(2)

{
    font-size: 1.25em;
}

}

.link {
    color: var(--text);
    z-index:99999;
}

}

.launch-code {
    background: linear-gradient(42deg, #0fd1db, #0fdb19, #dbc40f);
    position: fixed;
    text-align: center;
    z-index: 4;
    right: 0;
    left: 0;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-duration: 1s;
    animation-fill-mode: both;
    position: sticky;
    top: 0;
    gap: 0.5rem 1rem;
    white-space: nowrap;
    flex-direction: column;
    &.is-animated

{
    animation-name: anim-trans-down;
    .title, small

{
    animation-name: anim-trans-down;
}

.launch-shine {
    animation-name: anim-bounce-jelly;
}

}

.title,
small {
    animation-duration: 1s;
    animation-fill-mode: both;
    max-width: 20rem;
    color: white;
    text-shadow: 0 2px 4px #0000001a;
}

.title {
    animation-delay: 0.5s;
    font-size: 1em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

small {
    animation-delay: 1.5s;
    font-size: 1em;
    display: block;
    opacity: 1;
    font-weight: 400;
}

.launch-shine {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 1s;
    max-width: 32rem;
    display: flex;
    flex-grow: 1;
    width: 100%;
    border-radius: 12px;
}

.shine {
    animation-delay: calc(var(--duration) / 2);
    font-size: 1.125em;
    width: 100%;
}

code {
    background-color: var(--brand);
    color: var(--brand-bg);
    font-size: 1.25em;
    padding: 0.125em 0.25em;
    border-radius: 0.25em;
}

}

@media screen and (min-width: 1200px) {
    .launch-code {
        flex-direction: row;
        padding: 0.5rem;
        .title, small

{
    flex-grow: 1;
    width: auto;
    text-align: center;
    max-width: none;
    flex-basis: 20rem;
}

}
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.form-heading {
    display: flex;
    align-items: center;
    gap: 1em;
    justify-content: space-between;
    .link

{
    color: var(--text);
}

}

.form-help {
    font-size: 0.875em;
    a: hover

{
    text-decoration: underline;
}

}

.form-label {
    font-family: var(--family-alt);
    display: block;
    color: var(--text-strong);
    font-size: 1.125em;
    font-weight: 500;
    &[for]

{
    cursor: pointer;
}

}

.form-control,
.form-control-plaintext,
.static-form-control {
    --factor: 1;
    --blur: 0.1em;
    --spread: 0.2em;
    --shadow-alpha: 0;
    --outside-shadow-color: rgba(255, 255, 255, 0.05);
    background: var(--dark);
    display: flex;
    align-items: center;
    border-radius: 0.5em;
    font-family: var(--family-alt);
    line-height: 1.5;
    padding: 0.75em 1em;
    flex-grow: 1;
    font-size: 1.125em;
    color: var(--text-strong);
    font-weight: 400;
    box-shadow: 0 0.0625em calc(var(--factor) * 1em) hsla(var(--brand-hsl), var(--shadow-alpha)), 0 0 0 1px var(--outside-shadow-color);
    transition-duration: var(--duration);
    transition-property: box-shadow;
    &.is-tight

{
    font-size: 1.25rem;
    line-height: 1.5;
    padding: 0.3em 0.75em;
}

}

.static-form-control {
    box-shadow: none;
    background: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    .svg

{
    background: none !important;
    margin: 0 0.25em 0 -0.25em;
}

}

.form-control:hover:not([disabled]):not([readonly]) {
    --shadow-alpha: 0.2;
    --outside-shadow-color: var(--brand);
}

.form-control-plaintext {
    pointer-events: none;
    box-shadow: none;
    background: none;
    background-color: var(--brand-bg);
}

textarea.form-control {
    resize: none;
    width: 100%;
    min-height: 7em;
    height: 7em;
}

.mini-form {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
}

.handle {
    --size: 1rem;
    --factor: 1;
    --blur: 0.1em;
    --spread: 0.2em;
    --shadow-alpha: 0.01;
    align-items: center;
    background-color: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
    border-radius: 0 0.25em 0.25em 0;
    bottom: 0;
    color: var(--brand-bg);
    cursor: ew-resize;
    display: flex;
    gap: 0.1rem;
    justify-content: center;
    left: 100%;
    position: absolute;
    top: 0;
    width: var(--size);
    z-index: 1;
    transition-duration: var(--duration);
    transition-property: background-color, box-shadow, color;
    box-shadow: 0 0.0625em calc(var(--factor) * 1em) hsla(var(--brand-hsl), var(--shadow-alpha));
    &:hover

{
    --shadow-alpha: 0.2;
    background-color: hsl(var(--brand-h), var(--brand-s), 56%);
}

&:active {
    --factor: 0.5;
    --shadow-alpha: 0.1;
    background-color: hsl(var(--brand-h), var(--brand-s), 36%);
}

}

.handle div {
    background: currentColor;
    height: calc(var(--size) * 0.8);
    width: 2px;
}

.heading {
    --bg: hsl(var(--h), var(--brand-s), var(--brand-l-dark));
    --cl: hsl(var(--h), var(--brand-s), var(--brand-l));
    display: flex;
    align-items: center;
    gap: 1.5em;
    margin-bottom: var(--navbar-padding);
}

.heading-count {
    background-color: var(--bg);
    color: var(--cl);
    box-shadow: inset 0 0 0 1px currentColor;
    font-family: var(--family-code);
    font-size: 2em;
    display: flex;
    height: 1.5em;
    width: 1.5em;
    border-radius: 0.25em;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-weight: 700;
    flex-shrink: 0;
}

.heading-body .title {
    font-size: 2em;
}

.heading-body p {
    color: var(--text-bold);
    font-size: 1.25em;
}

.heading {
    --h: 183;
}

    .heading.is-2 {
        margin-top: var(--navbar-padding);
        --h: 133;
    }

    .heading.is-3 {
        margin-top: var(--navbar-padding);
        --h: 63;
    }

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 1em;
    flex-grow: 1;
    padding-bottom: 20vh;
    .svg

{
    font-size: 3em;
}

}

.hero-body {
    color: var(--text-strong);
    font-size: 1.5em;
}

:root {
    --gh-dark: #25292e;
    --gh-dimmed: #6a737d;
    --gh-text: #e1e4e8;
    --gh-red: #f97583;
    --gh-green: #85e89d;
    --gh-blue: #79b8ff;
    --gh-blue-light: #9ecbff;
    --gh-purple: #b392f0;
}

.hljs {
    background-color: var(--gh-dark);
    border-radius: 1em;
    color: var(--gh-text);
    overflow: auto;
    padding: 1em 1.25em;
}

.hljs-attribute {
    color: var(--gh-blue);
}

.hljs-built_in {
    color: var(--gh-red);
}

.hljs-comment {
    color: var(--gh-dimmed);
}

.hljs-number {
    color: var(--gh-blue);
}

.hljs-string {
    color: var(--gh-blue-light);
}

.hljs-selector-attr {
    color: var(--gh-red);
}

.hljs-selector-class {
    color: var(--gh-purple);
}

.hljs-selector-pseudo {
    color: var(--gh-purple);
}

.hljs-selector-tag {
    color: var(--gh-green);
}

.hr {
    background-image: url(/hr.png);
    background-size: 64px 8px;
    height: 0.5rem;
    width: 4rem;
    margin: 1rem auto;
    border: none;
}

.key-value-store {
    font-size: 1.25em;
    display: grid;
    grid-template-columns: 10em 1fr;
    gap: 1em;
    dd

{
    color: var(--text-strong);
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
}

}

.link {
    --factor: 1;
    --shadow-alpha: 0.01;
    --blur-opacity: 0;
    color: var(--text-strong);
    text-shadow: 0 0.25em calc(var(--factor) * 1em) hsla(var(--brand-hsl), var(--shadow-alpha));
    /* hsla(var(--brand-hsl), var(--shadow-alpha)); */
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    cursor: pointer;
    position: relative;
    transition-duration: var(--duration);
    transition-property: color, text-shadow;
    &::before

{
    --height: 1em;
    background-color: var(--brand);
    /*content: "";*/
    display: block;
    height: var(--height);
    transition-duration: var(--duration);
    transition-property: opacity, transform;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(calc(100% - var(--height)) / 2);
    filter: blur(3em);
    opacity: var(--blur-opacity);
    transform: scale(var(--factor));
}

&::after {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--brand);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: scaleX(0);
    transform-origin: center left;
    transition-duration: calc(var(--duration) * 0.75);
    transition-property: transform;
    transition-timing-function: ease-out;
}

&:hover {
    --shadow-alpha: 1;
    --blur-opacity: 0.5;
    color: var(--text-strong);
    &::after

{
    transform: scaleX(1);
}

}

&:active {
    --factor: 0.8;
    --shadow-alpha: 0.1;
    top: 1px;
}

li.is-active & {
    &::after

{
    display: none;
}

&:hover {
    --shadow-alpha: 0.01;
}

}
}

.block-link {
    --factor: 1;
    --shadow-alpha: 0.01;
    position: relative;
    cursor: pointer;
    transition-duration: var(--duration);
    transition-property: background-color, box-shadow, color, text-shadow;
    box-shadow: 0 0.0625em calc(var(--factor) * 1em) hsla(var(--brand-hsl), var(--shadow-alpha));
    &:hover

{
    --shadow-alpha: 0.2;
}

&:active {
    --factor: 0.5;
    --shadow-alpha: 0.1;
    top: 1px;
}

}

.list {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.magic-button {
    --bg2: #0e1917;
    --bg: #0e231c;
    --p: 10%;
    --start-bg: transparent;
    --main-bg: transparent;
    border-radius: 0.5em;
    color: #fff;
    font-family: var(--family-alt);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.6em 1.2em;
    background: linear-gradient(var(--bg), var(--bg2)) padding-box, conic-gradient( from var(--gradient-angle), var(--start-bg), #0fdb80 var(--p), var(--main-bg) calc(var(--p) * 2) ) border-box;
    border: 2px solid transparent;
    cursor: pointer;
    animation-name: rotate-gradient;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotate-gradient {
    to {
        --gradient-angle: 360deg;
    }
}

.modal {
    background-color: hsla( var(--brand-h), var(--brand-s), var(--brand-l-dark), 0.98 );
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation-name: anim-trans-up;
    animation-duration: 200ms;
    animation-timing-function: ease-out;
    &.is-open

{
    display: flex;
}

}

.modal-background {
    position: absolute;
    inset: 0;
}

.modal-close {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11;
}

.modal-body {
    padding: 3rem;
    position: relative;
    width: 100%;
    max-width: 48rem;
}

.flash {
    padding: 1em;
    padding-bottom: 0;
}

.notification {
    border-radius: 0.5em;
    padding: 0.5em 1em;
    background: var(--brand-bg);
    color: var(--brand);
    &.is-alert

{
    background: var(--danger-bg);
    color: var(--danger);
}

&.is-bold {
    background: var(--brand);
    color: var(--brand-bg);
}

> p {
    margin: 0.5em;
}

> ul {
    display: flex;
    flex-direction: column;
    list-style: disc;
    margin: 0.5em 1.5em !important;
    gap: 0.5em;
}

code {
    color: white;
}

}

:root {
    --gh-dark: #25292e;
    --gh-dimmed: #6a737d;
    --gh-text: #e1e4e8;
    --gh-red: #f97583;
    --gh-orange: #ffab70;
    --gh-yellow: #ffea7f;
    --gh-green: #85e89d;
    --gh-blue: #79b8ff;
    --gh-blue-light: #9ecbff;
    --gh-purple: #b392f0;
    --gh-pink: #f692ce;
    /*
  "black": "#1b1f23",
  "white": "#fff",
  "gray": ["#fafbfc", "#f6f8fa", "#e1e4e8", "#d1d5da", "#959da5", "#6a737d", "#586069", "#444d56", "#2f363d", "#24292e"],
  "blue": ["#f1f8ff", "#dbedff", "#c8e1ff", "#79b8ff", "#2188ff", "#0366d6", "#005cc5", "#044289", "#032f62", "#05264c"],
  "green": ["#f0fff4", "#dcffe4", "#bef5cb", "#85e89d", "#34d058", "#28a745", "#22863a", "#176f2c", "#165c26", "#144620"],
  "yellow": ["#fffdef", "#fffbdd", "#fff5b1", "#ffea7f", "#ffdf5d", "#ffd33d", "#f9c513", "#dbab09", "#b08800", "#735c0f"],
  "orange": ["#fff8f2", "#ffebda", "#ffd1ac", "#ffab70", "#fb8532", "#f66a0a", "#e36209", "#d15704", "#c24e00", "#a04100"],
  "red": ["#ffeef0", "#ffdce0", "#fdaeb7", "#f97583", "#ea4a5a", "#d73a49", "#cb2431", "#b31d28", "#9e1c23", "#86181d"],
  "purple": ["#f5f0ff", "#e6dcfd", "#d1bcf9", "#b392f0", "#8a63d2", "#6f42c1", "#5a32a3", "#4c2889", "#3a1d6e", "#29134e"],
  "pink": ["#ffeef8", "#fedbf0", "#f9b3dd", "#f692ce", "#ec6cb9", "#ea4aaa", "#d03592", "#b93a86", "#99306f", "#6d224f"]
  */
}

.monaco-css .monaco-editor {
    .mtk1

{
    color: var(--gh-dimmed);
}

.mtk4 {
    color: var(--gh-blue);
}

.mtk5 {
    color: var(--gh-blue);
}

.mtk6 {
    color: var(--gh-red);
}

.mtk7 {
    color: var(--gh-dimmed);
}

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

.mtk9 {
    color: var(--gh-dimmed);
}

}

.monaco-html .monaco-editor {
    .mtk1

{
    color: var(--gh-text);
}

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

.mtk5 {
    color: var(--gh-blue);
}

.mtk8 {
    color: var(--gh-green);
}

.mtk9 {
    color: var(--gh-dimmed);
}

}

.prismjs {
    color: var(--gh-text);
    font-size: 0.875em;
    position: relative;
    > code

{
    --lang: "Code";
    --language: var(--brand);
    background-color: var(--gh-dark);
    border-radius: 1em;
    border-top-right-radius: 0.5rem;
    display: block;
    font-size: 1em;
    overflow: auto;
    padding: 1em 1.25em;
    transition-duration: var(--duration);
    transition-property: box-shadow;
}

& > .language-css {
    --lang: "CSS";
    --language: var(--gh-blue);
}

& > .language-html {
    --lang: "HTML";
    --language: var(--gh-orange);
}

.token {
    /* CSS */
    &.color

{
    &.hexcode

{
    color: var(--gh-pink);
}

}

&.comment {
    color: var(--gh-dimmed);
}

&.function {
    color: var(--gh-yellow);
}

&.number {
    color: var(--gh-green);
}

&.property {
    color: var(--gh-blue);
}

&.punctuation {
    color: var(--gh-dimmed);
}

&.selector {
    color: var(--gh-green);
    &.attribute

{
    color: var(--gh-pink);
    &.attr-name

{
    color: var(--gh-orange);
}

&.punctuation {
    color: var(--gh-dimmed);
}

}

&.class {
    color: var(--gh-purple);
}

&.combinator {
    color: var(--gh-pink);
}

&.pseudo-class {
    color: var(--gh-purple);
}

&.punctuation {
    color: var(--gh-dimmed);
}

}

&.atrule {
    color: var(--gh-purple);
}

&.string {
    color: var(--gh-blue);
}

&.unit {
    color: var(--gh-red);
}

&.variable {
    color: var(--gh-orange);
}

/* HTML */
&.tag {
    color: var(--gh-green);
    &.attr-name

{
    color: var(--gh-blue);
}

&.attr-value {
    color: var(--gh-purple);
}

&.punctuation {
    color: var(--gh-dimmed);
    &.attr-equals

{
    color: var(--gh-pink);
}

}
}
}
}

.sections {
    gap: var(--g);
    &.is-review

{
    padding-bottom: 30vh;
}

}

.section {
    --link-hover-border: var(--brand);
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
    flex-grow: 1;
    width: 100%;
}

.section-body {
    color: var(--text-bold);
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    transition-duration: var(--duration);
    transition-property: color;
    > h3, > h4

{
    color: var(--text-strong);
    font-family: var(--family-alt);
    font-size: 1.75em;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.125;
    border-bottom: 1px solid var(--brand);
    code

{
    font-size: 0.75em;
    color: var(--brand);
    font-weight: 400;
    display: inline-block;
    vertical-align: middle;
}

}

> h4 {
    font-size: 1.5em;
    border-bottom: none;
}

> img {
    box-shadow: 0 0.5em 1em hsl(var(--brand-h) var(--brand-s) 10%), 0 0 0 1px hsl(var(--brand-h) var(--brand-s) 10%);
    border-radius: 1em;
}

.table {
    align-self: flex-start;
    background-color: rgba(255, 255, 255, 0.05);
    width: auto;
    th, td

{
    border: 1px solid var(--text-strong);
    padding: 0.5em 0.75em;
}

th {
    color: var(--brand);
}

tr {
    transition-property: background-color;
    transition-duration: var(--duration);
}

tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--brand);
}

}

hr {
    display: none;
}

strong {
    color: var(--text-strong);
}

ol,
ul {
    list-style: disc;
    margin: 0 1.5em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    li > ol, li > ul

{
    margin-top: 0.5em;
}

}

ol {
    list-style: decimal;
}

li > code,
p > code,
.code {
    font-size: 0.875em;
    font-family: var(--family-code);
    background: hsla(var(--brand-hsl), 0.1);
    padding: 0;
    border-radius: 0.25em;
    padding: 0.1625em 0.25em;
    color: var(--brand);
    white-space: nowrap;
}

figure {
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 1em;
    border-radius: 1em;
    gap: 1em;
}

figcaption {
    font-size: 0.75em;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
}

}

.section:last-child > .section-body {
    color: var(--text-strong);
}

.section-continue {
    max-width: 60rem;
    margin: 0 auto;
    width: 100%;
    .button

{
    font-size: 1.125em;
}

}

/* Example */

.example {
    a

{
    text-decoration: underline;
}

}

.section.is-markdown.is-list-item + .section.is-markdown.is-list-item {
    margin-top: -1em;
}

.section.is-markdown {
    figcaption a, li a, p a

{
    border-bottom: 1px solid var(--brand);
    padding-bottom: 2px;
    transition-duration: var(--duration);
    transition-property: background-color, border-bottom-color, color;
    &:hover

{
    background-color: var(--brand-bg);
    color: var(--brand);
    border-bottom-color: #fff;
}

}
}

/* Common Items */
.original {
    background-color: rgb(255 255 255 / 3%);
    border: 2px dashed;
    color: rgba(255, 255, 255, 0.3);
    padding: calc(0.75em - 1px) calc(1.5em - 1px) !important;
}

:root {
    --shine-bg: #131416;
    --shine-bg-subtle: #17191c;
    --shine-bg: #0e1917;
    --shine-bg-subtle: #0e231c;
    --shine-fg: #fff;
    --shine-highlight: #0fdb80;
    --shine-highlight-subtle: #03b565;
}

@property --gradient-angle-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-percent {
    syntax: "<percentage>";
    initial-value: 5%;
    inherits: false;
}

@property --gradient-shine {
    syntax: "<color>";
    initial-value: white;
    inherits: false;
}

@keyframes rotate-gradient {
    to {
        --gradient-angle: 360deg;
    }
}

.shine {
    --animation: gradient-angle linear infinite;
    --duration: 3s;
    --shadow-size: 2px;
    border-radius: 0.5em;
    border: 2px solid transparent;
    cursor: pointer;
    display: block;
    font-family: var(--family-alt);
    font-size: 1.25rem;
    font-weight: 500;
    isolation: isolate;
    line-height: 1;
    outline-offset: 4px;
    overflow: hidden;
    padding: 0.6em 1.2em;
    position: relative;
    background: linear-gradient(var(--shine-bg), var(--shine-bg)) padding-box, conic-gradient( from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--shine-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--shine-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4) ) border-box;
    box-shadow: inset 0 0 0 1px var(--shine-bg-subtle);
    color: var(--shine-fg);
    &::before, &::after, span::before

{
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
}

&:active {
    translate: 0 1px;
}

}

div.shine {
    cursor: default;
    pointer-events: none;
    --shine-fg: #0fdb80;
    white-space: nowrap;
    font-size: 1em;
}

/* Inner shimmer */
.shine::after {
    --animation: shimmer linear infinite;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient( -50deg, transparent, var(--shine-highlight), transparent );
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: 0.2;
}

.shine span {
    z-index: 1;
    &::before

{
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px var(--shine-highlight);
    opacity: 0;
}

}

/* Animate */
.shine {
    --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
    transition: var(--transition);
    transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
    &, &::before, &::after

{
    animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused;
    animation-composition: add;
}

span::before {
    transition: opacity var(--transition);
    animation: calc(var(--duration) * 1.5) breathe linear infinite;
}

}

.shine:is(:hover, :focus-visible) {
    --gradient-percent: 20%;
    --gradient-angle-offset: 95deg;
    --gradient-shine: var(--shine-highlight-subtle);
    &, &::before, &::after

{
    animation-play-state: running;
}

span::before {
    opacity: 1;
}

}

@keyframes gradient-angle {
    to {
        --gradient-angle: 360deg;
    }
}

@keyframes shimmer {
    to {
        rotate: 360deg;
    }
}

@keyframes breathe {
    from, to {
        scale: 1;
    }

    50% {
        scale: 1.2;
    }
}

.steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--navbar-padding);
    margin-bottom: var(--navbar-padding);
    row-gap: 1em;
}

.step {
    --color: #d1db10;
    --size: 1.5rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1em;
    flex-shrink: 0;
}

.step-arrow {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

    .step-arrow.is-1 {
        width: 3rem;
    }

    .step-arrow.is-2 {
        width: 4rem;
    }

    .step-arrow.is-3 {
        width: 5rem;
    }

    .step-arrow.is-4 {
        width: 6rem;
    }

    .step-arrow path {
        fill: white;
    }

.step .title {
    font-size: 1.25em;
    white-space: nowrap;
}

.step svg {
    display: inline-flex;
    height: var(--size);
    width: var(--size);
    flex-shrink: 0;
}

.subscribe {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--navbar-padding);
    text-align: center;
    padding-bottom: var(--navbar-padding);
}

.plans {
    display: flex;
    gap: 4em;
    margin-top: var(--navbar-padding);
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.plan {
    --factor: 1;
    --shadow-alpha: 0.01;
    --cl: hsl(var(--h), var(--brand-s), var(--brand-l));
    --hsl: var(--h), var(--brand-s), var(--brand-l);
    --bg: hsl(var(--h), var(--brand-s), var(--brand-l-dark));
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1em;
    max-width: 22rem;
    padding: 2em 1.5em;
    border-radius: 1.25em;
    border: 1px solid var(--cl);
    background-image: linear-gradient(180deg, var(--dark) 0%, var(--bg) 100%);
    position: relative;
    box-shadow: 0 0.25em 3em calc(var(--factor) * 1em) hsla(var(--hsl), var(--shadow-alpha));
    transition-duration: var(--duration);
    transition-property: box-shadow;
    &:hover

{
    --shadow-alpha: 0.1;
}

}

.plan-discount {
    position: absolute;
    top: -0.625rem;
    background-color: var(--cl);
    color: var(--bg);
    padding: 0 0.5em;
    border-radius: 0.25em;
}

    .plan-discount strong {
        color: var(--bg);
        font-weight: 500;
    }

.plan-title {
    font-size: 2.5em;
    position: relative;
    top: 0.25em;
}

.plan-cost {
    display: flex;
    align-items: center;
    gap: 0.25em;
}

    .plan-cost strong {
        font-size: 2.5em;
    }

    .plan-cost span {
        font-size: 1.25em;
        font-family: var(--family-alt);
        font-weight: 500;
    }

.plan-list {
    color: var(--text-strong);
    text-align: left;
    font-size: 1.25em;
    p: first-child

{
    color: var(--text);
    font-size: 0.875em;
}

p:last-child {
    color: var(--cl);
    font-weight: 500;
}

}

.plan-button {
    display: flex;
    align-items: end;
    flex-grow: 1;
}

    .plan-button .button {
        font-size: 1.5em;
    }

        .plan-button .button.is-primary .button-label {
            background: linear-gradient( 180deg, hsl(var(--h) 87% 46%) 0%, hsl(var(--h) 96% 36%) 100% ), var(--cl);
        }

.plan.is-monthly {
    --h: 183;
}

.plan.is-yearly {
    --h: 123;
}

.plan.is-lifetime {
    --h: 53;
}

.svg {
    --d: 1em;
    --p: 0.25em;
    border-radius: 30%;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25em;
    height: calc(var(--d) + calc(2 * var(--p)));
    width: calc(var(--d) + calc(2 * var(--p)));
    padding: var(--p);
    vertical-align: top;
    svg

{
    height: var(--d);
    width: var(--d);
}

&.is-circle-check {
    background-color: var(--brand-bg);
    color: var(--brand);
}

&.is-triangle-exclamation {
    background-color: var(--danger-bg);
    color: var(--danger);
}

}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 1.5em;
    justify-content: center;
}

.tab {
    display: flex;
    color: var(--text-strong);
    font-family: var(--family-alt);
    font-size: 1.25em;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.125;
    background-color: var(--text);
    border-radius: 1em;
    padding: 0.5em 1em;
    transition-duration: 0.5s;
    transition-property: background-color, color;
    &:hover

{
    background-color: rgba(255, 255, 255, 0.2);
}

&:active {
    background-color: rgba(255, 255, 255, 0.1);
}

&.is-active {
    background-color: var(--brand);
    color: var(--brand-bg);
}

}

.tab-view {
    display: none;
    &.is-active

{
    display: block;
}

}

@media screen and (min-width: 800px) {
    .tabs {
        justify-content: start;
    }
}

.ribbon {
    background-color: var(--brand);
    color: var(--brand-bg);
    padding: 0.125em 0.5em 0.25em;
    border-radius: 0.5em;
    font-size: 0.875rem;
    font-weight: 600;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-45deg);
}

.ribbon {
    --f: 0.375em;
    --h: 63;
    font-size: 1rem;
    font-weight: bold;
    background-color: var(--brand);
    color: var(--brand-bg);
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51% / var(--f);
    clip-path: polygon( 100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px) );
    transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
    &.is-upcoming

{
    background-color: var(--brand-bg);
    color: var(--brand);
}

}

.home-testimonials {
    --spacing: calc(2 * var(--navbar-padding));
    background-image: linear-gradient(to top, #131416, #041b11);
    padding: var(--spacing);
}

.testimonials-list {
    display: grid;
    gap: calc(var(--spacing) / 2);
    grid-template-columns: 1fr;
}

.testimonial {
    display: flex;
    background-color: var(--dark);
    flex-direction: column;
    gap: 1em;
    padding: 1.25em 1.5em;
    border-radius: 1em;
    flex-grow: 1;
    box-shadow: 0 0.25em 1em hsla(var(--brand-hsl), 0.1);
    blockquote

{
    color: var(--text-strong);
    font-family: var(--family-alt);
    font-size: 1.5em;
    flex-grow: 1;
    strong

{
    background-color: var(--brand-bg);
    color: var(--brand);
}

}

footer {
    align-items: center;
    display: flex;
    gap: 1em;
    line-height: 1.25;
    figure

{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
    flex-shrink: 0;
}

img {
    border-radius: 0.75em;
}

p {
    display: flex;
    gap: 0.25em;
    flex-direction: column;
}

strong {
    font-size: 1.125em;
}

em {
    font-size: 1.125em;
    font-style: normal;
}

}
}

@media screen and (min-width: 800px) {
    .testimonials-list {
        grid-auto-flow: dense;
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial {
        &.is-short

{
    blockquote

{
    font-size: 1.625em;
}

}

&.is-long {
    grid-column: span 2;
}

&.is-abdul,
&.is-benoit,
&.is-raphaela,
&.is-michael {
    blockquote

{
    font-size: 1.625em;
}

}
}
}

@media screen and (min-width: 1600px) {
    .testimonials-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

.title {
    color: var(--text-strong);
    font-family: var(--family-alt);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.125;
    &.is-1

{
    font-size: 4em;
}

&.is-2 {
    font-size: 3em;
}

&.is-3 {
    font-size: 2.5em;
}

&.is-4 {
    font-size: 1.5em;
}

}

.subtitle {
    color: var(--text-strong);
    font-size: 1.25em;
    a

{
    color: var(--brand);
}

}

.toggle {
    align-items: center;
    background: hsla(var(--brand-hsl), 0.1);
    border-radius: 0.25em;
    color: var(--brand);
    cursor: pointer;
    display: flex;
    font-family: var(--family-code);
    gap: 0.25em;
    padding: 0.25em 0.5em;
    transition-duration: var(--duration);
    transition-property: background-color, color;
    &:hover

{
    background: hsla(var(--brand-hsl), 0.2);
}

code,
p > code {
    color: var(--text-strong);
    transition-duration: var(--duration);
    transition-property: background-color, color;
}

code,
strong {
    border-radius: 0.25em;
    padding: 0.125em 0.25em;
    &:last-child

{
    margin-right: -0.125em;
}

}
}

.toggle-text {
    margin-bottom: -0.5em;
    width: 100%;
}

.toggle-disabled {
    pointer-events: none;
}

.toggle-svg {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5em;
    width: 1.5em;
    svg

{
    flex-shrink: 0;
    height: 1em;
    width: 1em;
}

}

.toggle-checked {
    background-color: var(--brand) !important;
    color: var(--brand-bg) !important;
    svg

{
    height: 1.5em;
    width: 1.5em;
}

p > code,
strong {
    background-color: rgba(0, 0, 0, 0.3);
}

}

.toggle-correct {
    box-shadow: 0 0 0 0.1875em var(--brand) !important;
    svg

{
    height: 1.5em;
    width: 1.5em;
}

}

.toggle-wrong {
    background-color: var(--danger) !important;
    color: var(--danger-bg) !important;
    text-decoration: line-through;
}

.trackbar {
    /*background-color: var(--dark);*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    flex-wrap: wrap;
    gap: 1em;
    font-family: var(--family-alt);
}

.trackbar-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em 1em;
    flex-wrap: wrap;
    font-family: var(--family-alt);
    font-weight: 300;
    li

{
    display: flex;
    align-items: center;
    gap: 0.5em;
}

span {
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

strong {
    color: var(--text-strong);
    font-size: 1.125em;
    white-space: nowrap;
    font-weight: 300;
}

}

.trackbar-icon {
    display: flex;
    gap: 1em;
    align-items: center;
    .link

{
    display: none;
    font-size: 1em;
}

}

.trackbar .brand-type {
    display: none;
}

@media screen and (min-width: 800px) {
    .trackbar .brand-type,
    .trackbar-icon {
        width: 236px;
    }

        .trackbar-icon .link {
            display: inline;
        }
}

@media screen and (min-width: 1000px) {
    .trackbar {
        justify-content: space-between;
        .brand-type

{
    display: flex;
}

}
}

.verification-banner {
    background-color: var(--brand);
    color: var(--brand-bg);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em 1.5em;
    padding: 1em;
    align-items: center;
    p

{
    font-size: 1.125em;
}

strong {
    color: currentColor;
}

}

.works {
    /*background-color: var(--dark);
  background-image: linear-gradient(153deg, rgba(36, 36, 36, 0.6) 6.73%, rgba(18, 18, 18, 0.6) 69.09%);
  background-attachment: fixed;
  background-size: 100% 100%;*/
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1em;
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.works-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em 2em;
    li

{
    display: flex;
}

li.work-cssref {
    --h: 43px;
    --w: 215px;
}

li.work-wd4 {
    --h: 40px;
    --w: 232px;
    padding: 0 2px;
}

li.work-bulma {
    --h: 41px;
    --w: 160px;
}

li.work-htmlref {
    --h: 43px;
    --w: 228px;
}

li.work-js {
    --h: 36px;
    --w: 220px;
    padding-bottom: 12px;
}

a {
    height: var(--h);
    width: var(--w);
    flex-shrink: 0;
    display: flex;
    position: relative;
    img: first-child

{
    /* mix-blend-mode: luminosity; */
}

img:last-child {
    position: absolute;
    left: 0;
    top: 0;
    mix-blend-mode: normal;
    opacity: 0;
    transition-duration: var(--duration);
    transition-property: opacity;
}

&:hover {
    img: last-child

{
    opacity: 1;
}

}
}
}

@media screen and (min-width: 1400px) {
    .works-list {
        justify-content: space-evenly;
    }
}

.zone-heading {
    display: flex;
    gap: var(--navbar-padding);
    padding: var(--navbar-padding) 0;
    flex-direction: column;
    text-align: center;
    align-items: center;
    .emoji

{
    --d: 64px;
    background-image: url(/emojis/emojis-96.png);
}

.title {
    font-size: 2.5em;
}

.subtitle {
    color: rgb(255 255 255 / 50%);
    margin-top: 0.25em;
    strong

{
    font-weight: 600;
}

}

&.is-projects {
    border-top: 1px solid var(--border-dark);
    box-shadow: inset 0 1px 0 0 var(--border-light);
    padding: calc(2 * var(--navbar-padding)) var(--navbar-padding);
}

aside {
    padding: var(--navbar-padding) 0;
}

}

@media screen and (min-width: 800px) {
    .zone-heading {
        text-align: left;
        flex-direction: row;
        aside

{
    margin-left: auto;
}

}
}

@media screen and (min-width: 1200px) {
    .zone-heading {
        .title

{
    font-size: 3.5em;
}

.subtitle {
    font-size: 1.5em;
}

.emoji {
    --d: 96px;
}

}
}

.account {
    text-align: center;
    padding: calc(2 * var(--navbar-padding));
}

.account-form {
    max-width: 50rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media screen and (min-width: 1000px) {
    .account-form {
        padding: 3rem;
    }
}

.auth {
    --box-padding-y: 2.75em;
    --box-padding-x: 3em;
    --border-width: 2px;
    --gap: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5em;
    min-height: 100vh;
}

.auth-box {
    background-color: var(--dark);
    background-image: linear-gradient( 153deg, rgba(36, 36, 36, 0.6) 6.73%, rgba(18, 18, 18, 0.6) 69.09% );
    background-attachment: fixed;
    background-size: 1em;
    border-radius: 1em;
    border: var(--border-width) solid var(--dark);
    box-shadow: 0px 2px 1px 0px rgba(255, 255, 255, 0.05) inset, 0px -2px 1px 0px rgba(0, 0, 0, 0.1) inset;
    padding: var(--box-padding-y) var(--box-padding-x);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    .btn

{
    --pt: 0.8em;
    --pb: 0.9em;
}

}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    .btn

{
    --pt: 0.8em;
    --pb: 0.9em;
}

.notification {
    margin-left: -1em;
    margin-right: -1em;
    margin-top: -1em;
    padding: 0.75em 1em;
}

}

.auth-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em 0;
    flex-direction: column;
    gap: 1em;
    text-align: center;
}

.auth-body {
    max-width: calc( 374px + calc(calc(var(--border-width) + var(--box-padding-x)) * 2) );
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.auth-back,
.auth-footer {
    --shadow-alpha: 0.1;
}

.auth-link {
    display: inline-block;
    transition-duration: var(--duration);
    transition-property: box-shadow, color;
    box-shadow: 0 1px 0 hsla(0, 0%, 100%, var(--shadow-alpha));
    position: relative;
    &:hover

{
    --shadow-alpha: 1;
    color: var(--brand);
}

&:active {
    transform: translateY(1px);
}

}

.auth-back {
    text-align: center;
}

.auth-footer {
    padding: var(--gap) var(--box-padding-x);
}

.auth-links {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.25em;
    justify-content: center;
    justify-items: center;
    dt

{
    &:not(:first-child)

{
    padding-top: 1em;
}

}

dd {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;
}

}

@media screen and (min-width: 800px) {
    .auth {
        padding: 1.5em;
    }

    .auth-back {
        position: absolute;
        left: 1em;
        top: 1em;
    }
}

.courses {
    --x-padding: 1.5rem;
    border-top: 1px solid var(--border-dark);
    box-shadow: inset 0 1px 0 0 var(--border-light);
    /* background-color: var(--dark); */
    padding: var(--navbar-padding);
    min-height: calc(100vh - var(--navbar-height));
    display: flex;
    flex-direction: column;
    gap: var(--navbar-padding);
    align-items: stretch;
    justify-content: flex-start;
    &.is-single

{
    min-height: calc(100vh - var(--trackbar-height));
    padding: 0;
    gap: 0;
}

}

.courses-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.course-item {
    display: flex;
    &:first-child .course-block

{
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

&:last-child .course-block {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

}

.course-block {
    --radius: 1em;
    --figure: 128px;
    background-color: rgba(0, 0, 0, 0.2);
    align-items: center;
    display: flex;
    font-size: 1.125em;
    gap: 2em;
    padding: 2.5em;
    width: 100%;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    > .button

{
    flex-shrink: 0;
}

&.is-single {
    --figure: 160px;
    font-size: 1.375em;
    padding: var(--x-padding);
}

}

.course-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 1.125em;
}

.course-label {
    background: var(--brand);
    color: var(--brand-bg);
    display: flex;
    font-size: 0.875em;
    font-weight: 500;
    padding: 0.25em 0.75em;
    border-radius: 0.25em;
    flex-shrink: 0;
}

.course-figure {
    display: flex;
    height: var(--figure);
    width: var(--figure);
    flex-shrink: 0;
    img

{
    flex-grow: 1;
}

}

.course-title,
.course-subtitle {
    font-family: var(--family-alt);
    line-height: 1.125;
}

.course-title {
    font-size: 2em;
}

.course-subtitle {
    color: var(--text-bold);
    font-size: 1em;
    font-weight: 300;
}

.course-info {
    margin-top: 0.25em;
    font-size: 1em;
    span

{
    font-size: 0.875em;
}

}

.lessons-list {
    flex-grow: 1;
    padding: var(--x-padding);
}

@media screen and (min-width: 800px) {
    .courses {
        --x-padding: 3rem;
    }

    .course-block {
        flex-direction: row;
        text-align: left;
    }
}

/* Course Complete */

.course-upcoming,
.course-review,
.course-complete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--x-padding);
    background-color: var(--brand);
    color: var(--text-strong);
    padding: var(--x-padding);
    position: sticky;
    top: 0;
    > div

{
    flex-grow: 1;
}

> .button {
    flex-shrink: 0;
}

p {
    font-size: 1.25em;
}

}

.course-review {
    background: var(--brand-bg);
    color: var(--brand);
}

.course-subscribe {
    background-image: linear-gradient(to top, #131416, #13141600);
    padding: var(--x-padding);
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    z-index: 1;
    .button

{
    font-size: 2em;
}

}

.course-upcoming {
    background-color: var(--info);
}

.filters {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.filter-heading {
    align-items: center;
    color: var(--brand);
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.14em;
    display: flex;
    justify-content: space-between;
    &:not(:first-child)

{
    margin-top: 1em;
}

a {
    letter-spacing: 0;
    display: none;
    text-transform: none;
    &.is-active

{
    display: inline;
}

}
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.625em 0.75em;
    border-radius: 0.5em;
    line-height: 1.125;
    cursor: pointer;
    transition-duration: var(--duration);
    transition-property: box-shadow;
    strong

{
    font-weight: 500;
    flex-grow: 1;
}

em {
    font-style: normal;
}

}

.filter-check {
    height: 1em;
    width: 1em;
    border-radius: 0.125em;
    box-shadow: inset 0 0 0 2px rgb(255, 255, 255, 0.2);
    display: flex;
    transition-duration: var(--duration);
    transition-property: box-shadow;
    .svg

{
    --d: 0.875em;
    --p: 0;
    color: var(--brand-bg);
    opacity: 0;
    position: relative;
    right: 1px;
}

}

.filter-item:hover {
    box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 1px var(--brand);
}

.filter-item:active {
    box-shadow: inset 0 0 0 1px var(--brand);
}

.filter-item.is-active {
    background-color: #121212;
    background-image: linear-gradient(153deg, #242424 6.73%, #121212 69.09%);
    box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 1px var(--brand);
    .filter-check

{
    box-shadow: none;
    background-color: var(--brand);
    .svg

{
    opacity: 1;
}

}
}

.filter-controls {
    padding: var(--navbar-padding);
    .button

{
    font-size: 1.25em;
}

}

.filter-hide {
    padding: var(--navbar-padding);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    z-index: 20;
    gap: 1rem;
    .button

{
    font-size: 1.25em;
}

}

.filter-hide.is-active {
    display: flex;
}

@media screen and (max-width: 799px) {
    .filters {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10;
        display: none;
        inset: 0;
        backdrop-filter: blur(10px);
        padding: 2rem;
        overflow-y: auto;
        padding-bottom: 6rem;
    }

        .filters.is-active {
            display: block;
        }
}

@media screen and (min-width: 800px) {
    .filter-controls {
        display: none;
    }
}

.home {
    /* border-top: 1px solid var(--border-dark); */
    /* box-shadow: inset 0 1px 0 0 var(--border-light); */
    /* background-color: var(--dark); */
    --delay: 100ms;
    background-image: linear-gradient(#131416, #041b11);
    min-height: calc(100vh - var(--navbar-height));
    text-align: center;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
    z-index: 1;
    overflow: hidden;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.home-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 4em 2em;
    position: relative;
}

.home-intro {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.home-no-credit-card {
    padding: 0 1em;
    width: 100%;
}

.home-badges {
    padding: 0 2em;
}

.home-text {
    font-family: var(--family-alt);
    font-weight: 300;
    color: var(--text-strong);
    font-size: 1.75em;
    font-weight: inherit;
    display: block;
    text-align: center;
}

.home-subtext {
    color: rgb(255 255 255 / 40%);
    font-size: 1.25em;
    font-style: normal;
    font-weight: inherit;
    text-align: center;
    max-width: 54em;
    a

{
    display: inline-flex;
    color: var(--brand);
    vertical-align: middle;
    line-height: 1;
    font-family: var(--family-alt);
    gap: 0.25em;
    align-items: center;
    .emoji

{
    position: relative;
    top: -2px;
}

}
}

.home-headings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 3em 0;
    gap: 1.5em 0;
    padding: 0 var(--navbar-padding);
    text-align: left;
}

    .home-headings .heading {
        width: 24em;
    }

.home-footer {
    padding: var(--navbar-padding);
    position: relative;
}

.home-footer-body {
    min-height: 50px;
}

.home-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.5em;
    gap: 1em;
    justify-content: center;
    .shine, .button

{
    font-size: 1.5em;
}

.button-label {
    height: 3em;
    padding-left: 2em;
    padding-right: 2em;
}

.shine {
    padding: 1em 2em;
}

}

.home-buttons-shine {
    display: flex;
}

.home-section {
    /* background-image: linear-gradient(#131416, #041b11); */
    border-top: 1px solid var(--brand);
    /* padding: calc(3 * var(--navbar-padding)) var(--navbar-padding); */
    width: 100%;
    padding: var(--navbar-padding);
    overflow: hidden;
}

.home-heading {
    padding: 3em;
    text-align: center;
    .emoji

{
    --d: 96px;
    background-image: url(/emojis/emojis-96.png);
}

.title {
    font-size: 3.5em;
}

h3 {
    color: rgb(255 255 255 / 50%);
    margin-top: 1em;
    font-size: 1.5em;
    strong

{
    font-weight: 600;
}

}
}

@media screen and (min-height: 750px) and (min-width: 1000px) {
    .home-body {
        font-size: 1.125em;
        padding: 9em 3em;
    }
}

@media screen and (min-width: 1280px) {
    .home-headings {
        flex-wrap: nowrap;
        gap: 3em;
    }

        .home-headings .heading {
            width: auto;
        }

    .home-subtext span {
        white-space: nowrap;
    }
}

.home-counts {
    --bg: #041b11;
    --radius: 2.5rem;
    --code-Gradient: linear-gradient( 90deg, #ffea7f 0%, #f97583 33.33%, #b392f0 66.67%, #79b8ff 100% );
    /* background-color: var(--bg); */
    /* background-image: linear-gradient(to top, #131416, #041b11); */
    padding: var(--navbar-padding);
    position: relative;
    z-index: 1;
}

.home-counts-list {
    align-items: start;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: var(--navbar-padding);
    flex-grow: 1;
    font-size: 1.25em;
    padding: var(--navbar-padding);
}

.home-count-new {
    background: var(--code-Gradient);
    padding: 1px;
    border-radius: calc(var(--radius) + 1px);
}

@media screen and (min-width: 1400px) {
    .home-count-new-wrapper {
        flex-wrap: nowrap;
    }

    .home-count-new {
        margin-top: -1.5rem;
    }
}

.home-count-new-wrapper {
    background-color: var(--bg);
    display: flex;
    flex-wrap: wrap;
    padding: 1.5rem;
    gap: var(--navbar-padding);
    position: relative;
    border-radius: var(--radius);
    padding-bottom: 3rem;
}

.home-count-new-label {
    background: var(--code-Gradient);
    background-clip: text;
    font-size: 1rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.75rem;
    text-align: center;
}

.home-count {
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: start;
    min-width: 7em;
    font-family: var(--family-alt);
    flex-shrink: 0;
    line-height: 1.25;
    font-weight: 700;
    border: 1px solid var(--brand);
    text-align: left;
    padding: 0.5em 1em;
    border-radius: 1em;
    flex-grow: 1;
}

    .home-count strong {
        font-size: 2em;
    }

    .home-count span {
        font-size: 1em;
        font-weight: 400;
    }

.home-mobile-apps {
    padding: var(--navbar-padding);
}

.home-desktop-apps {
    display: none;
}

@media screen and (min-width: 1000px) {
    .home-desktop-apps {
        display: block;
    }

    .home-mobile-apps {
        display: none;
    }
}

.home-section,
.home-courses,
.home-screencasts,
.home-projects {
    background-image: var(--page-gradient);
    position: relative;
    z-index: 1;
    &.is-invert

{
    background-image: var(--page-gradient-invert);
}

}

.home-projects .projects-list,
.home-projects .project-item {
    border-bottom: none;
    border-top: none;
}

.home-cta {
    background-image: linear-gradient(to top, #131416, #13141600);
    padding: calc(2 * var(--navbar-padding));
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.home-screencasts .home-cta {
    margin-top: -12em;
}

.home-projects .home-cta {
    margin-top: -2em;
}

/* Animations */
.home .brand-logo,
.home .jgthms,
.home .navbar-end li,
.home-intro .title,
.home-intro .hr,
.home-text,
.home-buttons .button,
.home-buttons-shine,
.home-no-credit-card,
.works,
.works-header,
.home-counts,
.home-count-new {
    animation-name: anim-trans-down;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.home-intro .title {
    animation-name: anim-trans-up;
    animation-delay: calc(0 * var(--delay));
}

.home-intro .hr {
    animation-name: anim-grow;
    animation-delay: calc(1 * var(--delay));
}

.home-text {
    animation-name: anim-trans-down;
    animation-delay: calc(2 * var(--delay));
}

.home-subtext {
    animation-delay: calc(3 * var(--delay));
}

.home-buttons {
    animation-delay: calc(4 * var(--delay));
}

    .home-buttons .button:nth-child(1) {
        animation-delay: calc(5 * var(--delay));
    }

    .home-buttons-shine,
    .home-buttons .button:nth-child(2) {
        animation-delay: calc(6 * var(--delay));
    }

.home-no-credit-card {
    animation-name: anim-grow;
    animation-delay: calc(7 * var(--delay));
}

.home .brand-logo {
    animation-delay: calc(1 * var(--delay));
}

.home .jgthms {
    animation-delay: calc(2 * var(--delay));
}

.home .navbar-end .navbar-item:nth-child(1) {
    animation-delay: calc(5 * var(--delay));
}

.home .navbar-end .navbar-item:nth-child(2) {
    animation-delay: calc(6 * var(--delay));
}

.home .navbar-end .navbar-item:nth-child(3) {
    animation-delay: calc(7 * var(--delay));
}

.home .navbar-end .navbar-item:nth-child(4) {
    animation-delay: calc(8 * var(--delay));
}

.home .navbar-end .navbar-item:nth-child(5) {
    animation-delay: calc(9 * var(--delay));
}

.home .navbar-end .navbar-item:nth-child(6) {
    animation-delay: calc(10 * var(--delay));
}

.home .navbar-end .buttons li:nth-child(1) {
    animation-delay: calc(9 * var(--delay));
}

.home .navbar-end .buttons li:nth-child(2) {
    animation-delay: calc(10 * var(--delay));
}

/* 3D Animations */
.works-list li,
.home-subtext,
.home-buttons .button,
.home-buttons-shine,
.home-count {
    animation-name: anim-pivot-up;
    animation-duration: 500ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    backface-visibility: hidden;
}

.works,
.works-header {
    animation-delay: calc(10 * var(--delay));
}

.works-list li:nth-child(1) {
    animation-delay: calc(11 * var(--delay));
}

.works-list li:nth-child(2) {
    animation-delay: calc(12 * var(--delay));
}

.works-list li:nth-child(3) {
    animation-delay: calc(13 * var(--delay));
}

.works-list li:nth-child(4) {
    animation-delay: calc(14 * var(--delay));
}

.works-list li:nth-child(5) {
    animation-delay: calc(15 * var(--delay));
}

.home-counts,
.home-count:nth-child(1) {
    animation-delay: calc(16 * var(--delay));
}

.home-count:nth-child(2) {
    animation-delay: calc(17 * var(--delay));
}

.home-count:nth-child(3) {
    animation-delay: calc(18 * var(--delay));
}

.home-count:nth-child(4) {
    animation-delay: calc(19 * var(--delay));
}

.home-count-new {
    animation-delay: calc(20 * var(--delay));
}

    .home-count-new .home-count:nth-child(1) {
        animation-delay: calc(21 * var(--delay));
    }

    .home-count-new .home-count:nth-child(2) {
        animation-delay: calc(22 * var(--delay));
    }

.lesson-block {
    --lesson-text: var(--brand);
    border: 1px solid transparent;
    display: flex;
    align-items: stretch;
    border-radius: 1.25em;
    flex-direction: column;
    gap: 1em;
    color: rgba(255, 255, 255, 0.2);
    padding: 2em;
    transition-duration: var(--duration);
    transition-property: background-color;
    &:hover

{
    background-color: var(--brand-bg);
    .lesson-subtitle

{
    color: var(--brand);
}

}

&.is-ready,
&.is-in_progress {
    background-color: var(--brand-bg);
    border: 1px dashed var(--brand);
    .lesson-subtitle

{
    color: var(--brand);
}

}

&.is-unavailable {
    --lesson-text: var(--text);
    opacity: 0.3;
    pointer-events: none;
}

}

.lesson-position {
    align-self: center;
    color: var(--lesson-text);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.lesson-text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;
    flex-direction: column;
    line-height: 1.25;
}

.lesson-title,
.lesson-subtitle {
    font-family: var(--family-alt);
    font-weight: 300;
    line-height: 1.125;
}

.lesson-title {
    font-size: 1.5em;
    color: var(--text-strong);
}

.lesson-subtitle {
    font-size: 1.25em;
    transition-duration: var(--duration);
    transition-property: color;
}

.lesson-control {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.lesson-status {
    color: var(--lesson-text);
    font-family: var(--family-alt);
    font-weight: 300;
    font-size: 1.25em;
    text-transform: capitalize;
}

.lesson-cta {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 800px) {
    .lesson-block {
        flex-direction: row;
    }

    .lesson-position {
        flex-shrink: 0;
        width: 10em;
    }

    .lesson-text {
        align-items: center;
        flex-direction: row;
        column-gap: 1em;
        row-gap: 0.25em;
        flex-wrap: wrap;
    }

    .lesson-cta {
        justify-content: flex-end;
        width: 9em;
    }
}

.page-main {
    border-top: 1px solid var(--border-dark);
    box-shadow: inset 0 1px 0 0 var(--border-light);
    /* background-color: var(--dark); */
    padding: var(--navbar-padding);
    min-height: calc(100vh - var(--navbar-height));
    display: flex;
    flex-direction: column;
    gap: var(--navbar-padding);
    align-items: stretch;
    justify-content: flex-start;
    &.is-single

{
    padding: 0;
    gap: 0;
}

}

.navbar {
    display: flex;
    align-items: center;
    padding: var(--navbar-padding);
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--navbar-gap);
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    > div > ul

{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--family-alt);
    gap: 0.5em var(--navbar-gap);
    li

{
    align-items: center;
    display: flex;
    flex-shrink: 0;
}

&.buttons {
    --navbar-gap: 0.75em;
}

}
}

.navbar-item {
    font-size: 1.25rem;
    a, button

{
    color: var(--text-strong);
}

&.is-active a {
    color: var(--brand);
}

}

.navbar-start,
.navbar-end {
    display: flex;
    align-items: center;
    gap: var(--navbar-gap);
    justify-content: center;
    flex-wrap: wrap;
}

@media screen and (max-width: 999px) {
    .navbar {
        padding-block: calc(2 * var(--navbar-padding));
    }
}

@media screen and (min-width: 1000px) {
    :root {
        --navbar-padding: 2em;
        --navbar-gap: 1.5em;
    }

    .navbar {
        flex-wrap: nowrap;
        justify-content: space-between;
        > div > ul

{
    flex-wrap: nowrap;
}

}

.navbar-item.is-mobile {
    display: none;
}

.navbar-item.is-home {
    display: none;
}

.navbar-start,
.navbar-end {
    flex-wrap: nowrap;
}

.jgthms {
    display: none;
}

}

@media screen and (min-width: 1600px) {
    .navbar-item.is-home {
        display: flex;
    }
}

@media screen and (min-width: 1400px) {
    .jgthms {
        display: flex;
    }
}

/* @media screen and (min-height: 1000px) and (min-width: 1300px) {
  :root {
    --navbar-padding: 3em;
  }
}

@media screen and (min-height: 1200px) and (min-width: 1400px) {
  :root {
    --navbar-padding: 4em;
  }
} */
.profile {
    padding: var(--navbar-padding);
}

.projects {
    border-top: 1px solid var(--border-dark);
    box-shadow: inset 0 1px 0 0 var(--border-light);
    padding: var(--navbar-padding);
    gap: var(--navbar-padding);
}

/* Item */
.project-figure {
    aspect-ratio: 3 / 2;
    border-radius: 1em;
    display: flex;
    max-width: 1440px;
    position: relative;
    img

{
    border-radius: 1em;
}

}

.projects-list {
    border-top: 1px solid var(--border-dark);
}

.projects-title {
    padding-bottom: 0.25em;
}

.project-item {
    border-bottom: 1px solid var(--border-dark);
    border-top: 1px solid var(--border-light);
}

.project-block {
    display: flex;
    padding: var(--navbar-padding);
    gap: 1em 2em;
    align-items: start;
    justify-content: center;
}

.project-body {
    display: flex;
    flex-direction: column;
    align-items: start;
    flex-grow: 1;
    gap: 0.5em;
}

.project-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: start;
    gap: 1em;
    width: 100%;
}

.project-title {
    font-size: 1.75em;
}

.project-number {
    color: var(--brand);
    span

{
    opacity: 0.3;
    margin-right: 0.125em;
}

}

.project-details {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875em;
    gap: 0.25em 1em;
    margin-top: 0.25em;
    .svg

{
    --d: 0.75em;
    --p: 0;
    color: currentColor;
}

path {
    fill: currentColor;
}

}

.project-detail {
    display: flex;
    align-items: center;
    gap: 0 0.5em;
    .link:not(:hover)

{
    color: currentColor;
}

}

.project-description {
    color: var(--text-strong);
    margin: 0.25em 0 0.375em;
}

.project-buttons {
    align-items: center;
}

    .project-buttons .button.is-primary {
        font-size: 1.125em;
    }

    .project-buttons .button.is-outlined {
        font-size: 1em;
    }

/* Single */
.single-project {
    --x-padding: 1.5rem;
}

.single-project-header {
    background-color: rgba(0, 0, 0, 0.2);
    padding: var(--navbar-padding);
    font-size: 1.375em;
    display: flex;
    align-items: center;
    gap: var(--x-padding);
    padding: var(--x-padding);
    flex-direction: column;
}

.single-project-title {
    font-size: 2em;
}

.single-project-controls {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-direction: column;
    .button-label

{
    width: 10em;
}

}

.single-project-description {
    margin-top: 0.5em;
    color: var(--text-strong);
    font-size: 1em;
    font-weight: 300;
    font-family: var(--family-alt);
    line-height: 1.125;
}

.single-project-center {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

.single-project-main {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    transition-duration: var(--duration);
    transition-property: padding-right;
}

.single-project-container {
    width: 100%;
    position: relative;
}

.single-project-video {
    aspect-ratio: 16 / 9;
    display: flex;
    width: 100%;
    flex-grow: 1;
    iframe

{
    flex-grow: 1;
    height: 100%;
    width: 100%;
}

}

@media screen and (max-width: 799px) {
    .project-block {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .project-header,
    .project-body {
        align-items: center;
        justify-content: center;
    }

    .project-figure {
        height: auto;
        width: 100%;
    }
}

@media screen and (min-width: 800px) {
    .projects {
        .filters

{
    display: none;
}

}

.projects-list {
    .project-figure

{
    order: 2;
    width: 1440px;
}

.project-body {
    flex-shrink: 0;
    max-width: 20em;
    width: 20em;
}

}

.single-project {
    --x-padding: 3rem;
    .single-project-header

{
    flex-direction: row;
}

.project-figure {
    flex-shrink: 0;
    width: 240px;
}

}
}

@media screen and (min-width: 1200px) {
    .project-block {
        font-size: 1.125em;
    }
}

@media screen and (min-width: 1400px) {
    .single-project {
        .project-figure

{
    width: 360px;
}

}
}

@media screen and (min-width: 1600px) {
    .project-block {
        font-size: 1.25em;
    }
}

.screencasts {
    border-top: 1px solid var(--border-dark);
    box-shadow: inset 0 1px 0 0 var(--border-light);
    padding: var(--navbar-padding);
    gap: var(--navbar-padding);
}

/* Item */

.screencasts-title {
    padding-bottom: 0.25em;
}

.screencast-block {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    padding: 1.5em 0;
    gap: 1rem 2rem;
    align-items: start;
}

.js-open-feedback,
.js-mark-not-watched {
    display: none;
}

.video-is-watched {
    .progress

{
    display: none;
}

.js-mark-watched {
    display: none;
}

.js-open-feedback,
.js-mark-not-watched {
    display: flex;
}

.project-overlay,
.screencast-overlay {
    display: flex;
}

}

.screencast-figure {
    aspect-ratio: 3 / 2;
    border-radius: 1rem;
    flex-shrink: 0;
    height: 160px;
    width: 240px;
    max-width: 360px;
    position: relative;
    img

{
    border-radius: 1rem;
}

}

.progress {
    border-radius: 1em;
    overflow: hidden;
    height: 2em;
    position: absolute;
    display: flex;
    align-items: end;
    left: 0;
    right: 0;
    bottom: 0;
}

.progress-bar {
    height: 0.25em;
    background-color: var(--brand);
}

.screencast-overlay {
    inset: 0;
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.25em;
    font-weight: bold;
    background-color: rgb(0 0 0 / 90%);
    border-radius: 0.9rem;
}

.screencast-body {
    display: flex;
    flex-direction: column;
    align-items: start;
    flex-grow: 1;
}

.screencast-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
    width: 100%;
}

.screencast-title {
    font-size: 1.75em;
}

.screencast-number {
    color: var(--brand);
    span

{
    opacity: 0.3;
    margin-right: 0.125em;
}

}

.screencast-details {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875em;
    gap: 0.25em 1em;
    margin-top: 0.25em;
    .svg

{
    --d: 0.75em;
    --p: 0;
    color: currentColor;
}

path {
    fill: currentColor;
}

}

.screencast-detail {
    display: flex;
    align-items: center;
    gap: 0.5em;
    .link:not(:hover)

{
    color: currentColor;
}

}

.screencast-description {
    color: var(--text-strong);
    margin: 0.25em 0 0.375em;
}

.screencast-buttons .button {
    font-size: 1.125em;
}

    .screencast-buttons .button.is-smaller {
        font-size: 1em;
    }

/* Single */
.single-screencast {
    --x-padding: 1.5rem;
}

.single-screencast-header {
    background-color: rgba(0, 0, 0, 0.2);
    padding: var(--navbar-padding);
    font-size: 1.375em;
    display: flex;
    align-items: center;
    gap: var(--x-padding);
    padding: var(--x-padding);
    flex-direction: column;
}

.single-screencast-title {
    font-size: 2em;
}

.single-project-controls,
.single-screencast-controls {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-direction: column;
}

.single-screencast-description {
    margin-top: 0.5em;
    color: var(--text-strong);
    font-size: 1em;
    font-weight: 300;
    font-family: var(--family-alt);
    line-height: 1.125;
}

.single-screencast-center {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

.single-screencast-main {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

.single-screencast-container {
    width: 100%;
    position: relative;
}

.single-screencast-video {
    aspect-ratio: 16 / 9;
    flex-grow: 1;
    display: flex;
    width: 100%;
    iframe

{
    flex-grow: 1;
    height: 100%;
    width: 100%;
}

}

@media screen and (max-width: 799px) {
    .screencast-block {
        align-items: center;
        flex-direction: column;
    }

    .screencast-header,
    .screencast-body {
        align-items: center;
        justify-content: center;
    }

    .screencast-figure {
        height: auto;
        width: 100%;
    }
}

@media screen and (min-width: 800px) {
    .screencasts {
        display: grid;
        grid-template-columns: 12rem 1fr;
        .zone-heading

{
    grid-column: 1 / span 2;
    padding-inline: 0;
}

}

.single-screencast {
    --x-padding: 3rem;
}

.single-screencast-header {
    flex-direction: row;
}

.screencast-buttons {
    justify-content: start;
    width: 100%;
}

.single-project-controls,
.single-screencast-controls {
    align-items: start;
    .button

{
    align-self: end;
}

}
}

@media screen and (min-width: 1400px) {
    .screencast-figure {
        height: 240px;
        width: 360px;
    }

    .screencasts-list .screencast-body {
        font-size: 1.25em;
    }

    .single-screencast {
        .screencast-body

{
    font-size: 1.125em;
}

}
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.screencasts-grid {
    --min: 160px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
    max-width: 1800px;
    margin: 0 auto;
    position: relative;
    max-height: 50vh;
    overflow: hidden;
    .screencasts-grid-item

{
    aspect-ratio: 3 / 2;
    display: flex;
}

}

.screencasts-grid-overlay {
    background-image: linear-gradient(to top, #131416, #13141600);
    padding: var(--navbar-padding);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    height: 50%;
    width: 100%;
    left: 0;
    z-index: 1;
}

@media screen and (min-width: 600px) {
    .screencasts-grid {
        --min: 240px;
        max-height: 800px;
    }
}

@media screen and (min-width: 1200px) {
    .screencasts-grid {
        --min: 280px;
    }
}

@media screen and (min-width: 1400px) {
    .screencasts-grid {
        --min: 320px;
        max-height: none;
    }
}

.single-lesson {
    --p: 3rem;
    --g: 1.5em;
    --border-width: 1px;
    align-content: flex-start;
    border-top: var(--border-width) solid var(--border-dark);
    box-shadow: inset 0 1px 0 0 var(--border-light);
    display: grid;
    font-size: 1rem;
    padding: var(--p) 1.5rem 3rem; /* Same as Section code grid */
    gap: var(--g);
}

.single-lesson-heading,
.single-lesson-root,
.sections {
    display: grid;
    grid-template-columns: 1fr;
}

.single-lesson-root {
    min-height: 10rem;
    gap: var(--g);
}

.single-lesson-position {
    font-family: var(--family-alt);
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.single-lesson-title {
    font-size: 3.25em;
}

.single-lesson-subtitle {
    font-size: 2em;
    font-weight: 300;
    color: var(--text);
}

.single-lesson-start,
.single-lesson-end {
    .button

{
    font-size: 1.25em;
}

}

.single-review-end {
    color: white;
    display: flex;
    gap: 1em;
    align-items: start;
    flex-direction: column;
    p

{
    font-size: 1.125em;
}

.button {
    font-size: 1.25em;
}

}

@media screen and (min-width: 800px) {
    .single-lesson {
        --p: 10rem;
        font-size: 1.125rem;
    }

    .single-lesson-title,
    .single-lesson-subtitle {
        max-width: 70%;
    }
}

@media screen and (min-width: 1000px) {
    .single-lesson {
        padding-bottom: 6rem;
        grid-template-columns: 1fr minmax(0, 60rem) 1fr;
        min-height: calc(100vh - calc(var(--trackbar-height)));
        &.is-public

{
    min-height: calc(100vh - calc(var(--navbar-height)));
}

}

.single-lesson-heading,
.single-lesson-root,
.sections {
    grid-template-columns: 1fr minmax(0, 60rem) 1fr;
    grid-column: 1 / span 3;
}

.section-continue {
    grid-column: 2;
}

.single-lesson-position,
.single-lesson-title,
.single-lesson-subtitle,
.single-lesson-start,
.single-lesson-end,
.single-lesson-feedback,
.single-review-end {
    grid-column: 2;
}

.section {
    grid-column: 2;
    &.is-example, &.is-example-with-controls, &.is-large, &.is-exercise

{
    grid-column: 1 / span 3;
}

&.is-simple-exercise {
    grid-column: 2;
}

}
}

@media screen and (min-width: 1400px) and (min-height: 900px) {
    .single-lesson {
        --p: 15rem;
        font-size: 1.25rem;
        padding-bottom: 12rem;
    }
}