:root {
    --c-fcb-1: #191919;
    --c-fcb-2: #f2f2f2;
    --c-fcb-3: #606060;
    --c-fcb-4: #195cff;
    --c-fcb-5: #ed3d24;
    --c-fcb-6: #ec0f69;
    --c-fcb-off-white: lightgray;
    --c-gcc-fcb-1: #191919;
    --c-gcc-fcb-2: #f2f2f2;
    --c-gcc-fcb-3: #ec0f69;
}

.c-fcb-1 {
    color: var(--c-fcb-1, #191919);
}

.c-fcb-2 {
    color: var(--c-fcb-2, #f2f2f2);
}

.c-fcb-3 {
    color: var(--c-fcb-3, #606060);
}

.c-fcb-4, .c-gcc-fcb-1 {
    color: var(--c-fcb-4, #195cff);
}

.c-fcb-5, .c-gcc-fcb-2 {
    color: var(--c-fcb-5, #ed3d24);
}

.c-fcb-6, .c-gcc-fcb-3 {
    color: var(--c-fcb-6, #ec0f69);
}

.bg-fcb-1 {
    background-color: var(--c-fcb-1, #191919);
}

.bg-fcb-2 {
    background-color: var(--c-fcb-2, #f2f2f2);
}

.bg-fcb-3 {
    background-color: var(--c-fcb-3, #606060);
}

.bg-fcb-4, .bg-gcc-fcb-1 {
    background-color: var(--c-fcb-4, #195cff);
}

.bg-fcb-5, .bg-gcc-fcb-2 {
    background-color: var(--c-fcb-5, #ed3d24);
}

.bg-fcb-6, .bg-gcc-fcb-3 {
    background-color: var(--c-fcb-6, #ec0f69);
}

.bg-fcb-gray {
    background-color: rgba(140, 140, 140, 0.1);
}

.bg-fcb-off-white {
    background-color: var(--c-fcb-off-white, lightgray);
}

/* Fonts */

@font-face {
    font-family: Code Next;
    src: url('/fonts/codenext-bold.woff2') format('woff2');
    font-weight: 700;
}

@font-face {
    font-family: Code Next;
    src: url('/fonts/codenext-book.woff2') format('woff2');
    font-weight: 300;
}

@font-face {
    font-family: font-family-NVRFNSHD;
    src: url('/fonts/nvrfnshd-display-webfont.woff2') format('woff2');
}

@font-face {
    font-family: font-family-NVRFNSHD;
    src: url('/fonts/nvrfnshd-italicdisplay-webfont.woff2') format('woff2');
    font-style: italic;
}

.ff-cn-bold, ff-\[Code Next-bold\], Code Next {
    font-family: Code Next, sans-serif;
    font-weight: 700;
}

body, p, .ff-cn-book, .ff-cn, ff-\[Code Next\], Code Next {
    color: #000;
    font-family: Code Next;
    font-size: 1em;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.ff-nfd, ff-\[NVRFNSHD\] {
    font-family: font-family-NVRFNSHD, sans-serif;
}

.ff-nfd-italic {
    font-family: font-family-NVRFNSHD, sans-serif;
    font-style: italic;
}

.ff-cpb, ff-\[code-bold\] {
    font-family: Code Next, sans-serif;
}

.ff-cp, ff-\[code-bold-lc\] {
    font-family: font-family-CodeProLC, sans-serif;
    font-weight: 400;
}


.nfs {
    background: url('/media/pchpqevo/fcb_gradient_spectrum_rgb_grain-1.png') lightgray 50% / cover no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: marquee 10s linear infinite;
}

:root {
    --font-size: 16px;
}

body {
    font-size: var(--font-size);
}

/* Media Queries for Bulma Breakpoints */
@media screen and (max-width: 1023px) {
    body {
        font-size: 14px;
    }
}

@media screen and (max-width: 769px) {
    body {
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    body {
        font-size: 10px;
    }
}

[id^="tooltip-"] {
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
}

[id^="button-"] {
    position: relative;
}

/* Button Stuff */
.hover\:color\-\[white\]:hover {
    color: white !important;
}

.hover\:background\-color\-\[black\]:hover {
    background-color: black !important;
}

.hover\:border\-color\-\[white\]:hover {
    border-color: white !important;
}

.width\-\[100\%\] {
    width: 100%;
}



.grid-stack {
    display: grid;
    place-items: center;
    grid-template-areas: "stack";
    padding-bottom: 3.125rem;
}

.grid-stack-element {
    grid-area: stack;
    width: 100%;
}

.preview-item .active {
    border: 1px solid #000;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.preview-item {
    position: relative;
}

    .preview-item .tooltip {
        position: absolute;
        --background: #fff;
        --color: var(--c-fcb-6);
        height: 2.875em;
        aspect-ratio: 7.6875/2.875;
        padding-left: 0.75em;
        padding-right: 0.75em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        background: var(--background);
        box-shadow: 0.125em 0.125em 0px var(--color);
        border: 0.0625em var(--color) solid;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        display: none;
    }

    .preview-item:hover .tooltip {
        display: block;
    }

    .preview-item .tooltip p {
        color: var(--c-fcb-6);
    }