/*
CBAnim 2026
Coded by fhtgames
x: @fhtgames bsky: fhtgames.com
Initial Datestamp: 2026-03-03T23:00:00-06:00
*/
@property --gradient-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@property --gradient-per {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
:root {
    color-scheme: dark;
    --font-body:
        "Cabin", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
        "Open Sans", "Helvetica Neue", sans-serif;
    --font-head: "Jura", sans-serif;
    --font-mono: "Agave Nerd Font Mono", monospace;
    --color-back: oklch(17.629% 0.01404 258.383);
    --color-back-hi: oklch(from var(--color-back) calc(l + 0.06) c h);
    --color-font: oklch(95.514% 0.00011 271.152);
    --color-font-lo: oklch(from var(--color-font) calc(l - 0.22) c h);
    --color-link: oklch(66.319% 0.16926 255.935);
    --color-vstd: oklch(73.983% 0.15793 49.886);
    --color-head: oklch(86.065% 0.03511 78.618);
    --color-bttn: oklch(54.604% 0.14741 146.278);
    --color-tip: oklch(83.089% 0.21105 125.869);
    --color-warn: oklch(56.523% 0.11838 74.925);
    --color-fhtg: oklch(54.757% 0.22283 29.036);
    --wrap-wdth: min(90vw, 50rem);
}
.grid {
    display: grid;
}
.flex {
    display: flex;
}
.wrap {
    width: var(--wrap-wdth);
    margin-inline: auto;
}
img,
svg {
    display: block;
    max-width: 100%;
}
.navi {
    list-style: none;
    margin: 0;
    padding: 0;
}
.align-center {
    text-align: center;
}
.strong {
    font-weight: 700;
}
a[href^="http"]:not([href*="fhtgames.com"])::after {
    content: "";
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.25em;
    display: inline-block;
    background-color: currentColor;
    mask: url("open-in-new.svg") no-repeat center / contain;
}

body {
    grid-template-rows: auto 1fr auto;
    min-height: 100svh;
    background-color: var(--color-back);
    font-family: var(--font-body);
    color: var(--color-font);
    line-height: 1.4;
}

/*****HEADER*****/
header {
    background-color: var(--color-fhtg);
    & .wrap {
        grid-template-columns: auto 1fr;
        align-items: center;
    }
}
.header-logo {
    height: 1.5rem;
    width: auto;
    margin-right: 2rem;
    filter: drop-shadow(5px 5px 0 hwb(0 0% 100% / 0.4));
    transition: filter 200ms ease-in;
    & path {
        fill: white;
    }
}
.header-logo:hover,
.header-logo:focus-visible {
    filter: drop-shadow(5px 5px 0 hwb(0 0% 100% / 0.8));
}
.main-nav {
    gap: 0.3rem;
    font-weight: 700;
    & a {
        text-decoration: none;
        color: var(--color-font);
    }
    & li {
        padding: 1.2em 0.5em;
        background: linear-gradient(180deg, var(--color-fhtg) var(--gradient-per), var(--color-back) 30%);
        transition: --gradient-per 200ms ease-in;
    }
    & li:hover,
    .active-li {
        --gradient-per: 5%;
    }
}

/*****MAIN*****/
main {
    margin-block: 1rem;
    padding: 1rem;
}
article {
    --syntax-color-0: oklch(83.089% 0.21105 125.869);
    --syntax-color-1: oklch(59.686% 0.16812 249.816);
    --syntax-color-2: oklch(55.035% 0.27364 313.293);
    --syntax-color-3: oklch(75.899% 0.15555 84.732);
    --color-vitashell: oklch(85.632% 0.14195 189.268);
}
main a {
    color: var(--color-link);
    text-underline-offset: 0.25em;
}
main a:visited {
    color: var(--color-vstd);
}
h1,
h2,
h4 {
    font-family: var(--font-head);
    color: var(--color-head);
    letter-spacing: -1px;
    text-wrap: balance;
    border-bottom: 2px solid var(--color-back-hi);
}
h1 {
    padding-bottom: 0.4em;
}
h2,
h4 {
    padding-bottom: 0.2em;
}
h4 {
    font-size: 1.2rem;
    border-bottom: 2px dashed var(--color-back-hi);
}
main ul li {
    margin-block: 0.5em;
}
main p {
    text-wrap: pretty;
}
main code {
    padding: 0.2em 0.4em;
    background-color: var(--color-back-hi);
    font-family: var(--font-mono);
    box-decoration-break: clone;
    border-radius: 0.25em;
}

/***Syntax***/
.syntax {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45em;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    background: #000;
    padding: 0.6em 0.9em;
    margin-block: 1rem;
    border-radius: 0.35rem;
}
.syntax::before {
    content: ">";
    color: var(--color-font-lo);
    margin-right: 0.2em;
}
.cmd {
    color: var(--syntax-color-0);
    font-weight: 700;
}
.flag {
    color: var(--syntax-color-1);
}
.param {
    color: var(--syntax-color-2);
}
.optional {
    color: var(--syntax-color-3);
}

.foot-note {
    margin-block: 0.5em;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-font-lo);
}
.vitashell {
    color: var(--color-vitashell);
}

/* .inline-icon {
    display: inline-block;
    height: 1.4em;
    margin-block: -0.4em;
    & path {
        fill: currentColor;
    }
} */

/***Button***/
.button {
    display: inline-block;
    padding: 0.6em 1em;
    color: var(--color-font);
    font-weight: 700;
    text-decoration: none;
    background-color: var(--color-bttn);
    border-radius: 0.35em;
}
.button:visited {
    color: currentColor;
}
.button:hover,
.button:focus-visible {
    background-color: oklch(from var(--color-bttn) calc(l + 0.05) c h);
}
.fancy-button {
    border: 0.1875em solid transparent;
    background:
        linear-gradient(0deg, var(--color-bttn), var(--color-bttn)),
        linear-gradient(
            var(--gradient-angle),
            var(--color-bttn) 35%,
            oklch(from var(--color-bttn) calc(l + 0.3) c h) 50%,
            var(--color-bttn) 65%
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: glow 10s linear infinite;
}

/***Alerts***/
.alert {
    grid-template-columns: 1fr auto;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    gap: 0.5em;
    background-color: var(--color-back-hi);
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    & p {
        margin: 0;
    }
}
.alert > :first-child {
    display: flex;
    place-items: center;
    font-weight: 300;
}
.alert .button-area {
    grid-row: span 2;
    place-self: center;
}
.alert-icon {
    height: 1.6rem;
}
.alert_warning {
    border-left: 4px solid var(--color-warn);
}
.alert_warning > :first-child {
    color: var(--color-warn);
}
.icon-warning path {
    fill: var(--color-warn);
}
.alert_tip {
    border-left: 4px solid var(--color-tip);
}
.alert_tip > :first-child {
    color: var(--color-tip);
}
.icon-tip {
    fill: var(--color-tip);
}

/***Window***/
.window {
    --color-background: #000000;
    --color-title: #333333;
    --color-button: #e81123;
    --color-border: #545454;
    grid-template-rows: auto 1fr;
    user-select: none;
    background-color: var(--color-background);
    line-height: 1;
    border: 1px solid var(--color-border);
    min-height: 10rem;
    max-height: 16rem;
    max-width: min(100%, 30rem);
}
.window-title {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5em;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
    background-color: var(--color-title);
    font-size: 0.875rem;
}
.window-title img {
    margin-left: 1em;
}
.window-close-btn {
    padding: 0.9em 1.2em;
}
.window-close-btn svg {
    height: 1em;
}
.window-close-btn:hover {
    background-color: var(--color-button);
}
.window p {
    font-family: var(--font-mono);
    padding: 1em;
    margin: 0;
    overflow-x: auto;
}
.blink {
    animation: blink 1s step-start infinite;
}

/***Command***/
.command {
    margin-block: 1rem;
    border: 0.125rem solid transparent;
    background:
        linear-gradient(var(--color-back), var(--color-back)),
        radial-gradient(circle at bottom right, var(--syntax-color), var(--color-back-hi) 40%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 0.5em;
    overflow: hidden;
}
.command p {
    padding-inline: 1rem;
}
.command h3 {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: center;
    padding: 0.8rem 1rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--syntax-color);
    background: radial-gradient(circle at top right, var(--syntax-color), var(--color-back-hi) 12%);
}
.cmd-required {
    font-family: var(--font-body);
    color: var(--color-font);
    font-size: 0.8rem;
    padding: 0.2em 0.4em;
    background-color: var(--color-warn);
    border-radius: 0.3em;
    align-self: center;
}
.option-color {
    color: var(--syntax-color);
}
.option-1 {
    --syntax-color: var(--syntax-color-1);
}
.option-2 {
    --syntax-color: var(--syntax-color-2);
}
.option-3 {
    --syntax-color: var(--syntax-color-3);
}

/***Changelog***/
.changelog {
    font-size: 0.9rem;
    grid-template-columns: auto 1fr;
    grid-auto-rows: auto;
    gap: 0.2em;
}
.changelog > div {
    padding: 0.5em;
    border: 1px solid var(--color-back-hi);
}
.changelog p {
    margin: 0;
}
.changelog p:not(:last-of-type) {
    margin-bottom: 0.7em;
}

/*****FOOTER*****/
footer {
    padding-block: 1rem;
    background-color: var(--color-back-hi);
    font-size: 0.8rem;
    color: var(--color-font-lo);
}
.footer-logo {
    height: 1.5rem;
    width: auto;
    filter: drop-shadow(0.25em 0.25em 2px hwb(0 0% 100% / 0.7));
    & path {
        fill: var(--color-font);
    }
}

/***Animations***/
@keyframes glow {
    100% {
        --gradient-angle: 360deg;
    }
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}

/***Desktop Styling***/
@media screen and (width > 600px) {
    main {
        border: 1px solid var(--color-back-hi);
    }
    main h1 {
        font-size: 2.4rem;
    }
    .command > h3 {
        background: radial-gradient(circle at top right, var(--syntax-color), var(--color-back-hi) 8%);
    }
}