body {
    @apply font-body antialiased;
    line-height: 1;
    font-size: 14px;
    scroll-behavior: smooth;

    /* This stops the page jumping around on Windows
       when the scrollbar appears or disappears. */
    overflow-y: scroll;
    overflow-x: auto;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    /*
         * app/images/bg-pattern.svg
         * https://pattern.monster/hexagon-1/
         * https://base64.guru/converter/encode/image/svg
         * */
    --hex-bg-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ncGF0dGVybklkJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxkZWZzPjxwYXR0ZXJuIGlkPSdhJyBwYXR0ZXJuVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB3aWR0aD0nMjknIGhlaWdodD0nNTAuMTE1JyBwYXR0ZXJuVHJhbnNmb3JtPSdzY2FsZSgyKSByb3RhdGUoMCknPjxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J2hzbGEoMCwwJSwxMDAlLDEpJy8+PHBhdGggZD0nTTE0LjQ5OCAxNi44NThMMCA4LjQ4OC4wMDItOC4yNTdsMTQuNS04LjM3NEwyOS04LjI2bC0uMDAyIDE2Ljc0NXptMCA1MC4wNkwwIDU4LjU0OGwuMDAyLTE2Ljc0NSAxNC41LTguMzczTDI5IDQxLjhsLS4wMDIgMTYuNzQ0ek0yOC45OTYgNDEuOGwtMTQuNDk4LTguMzcuMDAyLTE2Ljc0NEwyOSA4LjMxMmwxNC40OTggOC4zNy0uMDAyIDE2Ljc0NXptLTI5IDBsLTE0LjQ5OC04LjM3LjAwMi0xNi43NDRMMCA4LjMxMmwxNC40OTggOC4zNy0uMDAyIDE2Ljc0NXonICBzdHJva2Utd2lkdGg9JzAuNScgc3Ryb2tlPSdoc2xhKDI1OSwgMCUsIDkwJSwgMSknIGZpbGw9J25vbmUnLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSc4MDAlJyBoZWlnaHQ9JzgwMCUnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC0zOCwtNi40NiknIGZpbGw9J3VybCgjYSknLz48L3N2Zz4K");
    --c-perk-a-width: 325px;
}
@media screen and (prefers-reduced-motion: reduce) {
    body {
        scroll-behavior: auto;
    }
}
code {
    @apply leading-code;
    white-space: pre-wrap;
}

.js-focus-visible :focus {
    outline: 5px auto -webkit-focus-ring-color;
    &:not(.focus-visible) {
        outline: none;
    }
}

pre {
    @apply font-mono text-14 leading-160;
}

/*******************/
/* HTML/Body Setup */
/*******************/
html {
    height: 100%;
}
body {
    min-height: 100%;
    @apply flex flex-col;
}

/**************/
/* Containers */
/**************/
.sm-container,
.md-container,
.lg-container {
    width: 100%;
    @apply mx-auto;
}

.sm-container {
    max-width: 1056px;
    padding: 0 var(--container-padding-x);
}

.md-container {
    max-width: 1248px;
    padding: 0 var(--container-padding-x);
}

.lg-container {
    max-width: 1440px;
    padding: 0 var(--container-padding-x);
}

[data-react-data] {
    /* width: 100%; */
    /* height: 100%; */
}

.c-react-component {
    &.--fitted {
        width: fit-content;
        height: fit-content;
    }
}

.c-count-bubble {
    @apply border-1 border-borderLight rounded-100 px-12;
    @apply text-textColor6 text-13 leading-200 font-medium;
}

/* Override the tailwind default */
img {
    max-width: none;
}
