:root {
    --rgb-blue-100: #ebf3f8;
    --rgb-blue-200: #c6def2;
    --rgb-blue-300: #82b6e6;
    --rgb-blue-400: #368ad9;
    --rgb-blue-500: #066fd1;
    --rgb-blue-600: #095fb1;
    --rgb-blue-700: #0e467d;
    --rgb-blue-800: #12304e;
    --rgb-blue-900: #142435;
    --rgb-indigo-100: #edf2f9;
    --rgb-indigo-200: #d2dcf7;
    --rgb-indigo-300: #9fb1f3;
    --rgb-indigo-400: #6681ee;
    --rgb-indigo-500: #4263eb;
    --rgb-indigo-600: #3956c5;
    --rgb-indigo-700: #2b4189;
    --rgb-indigo-800: #1e2e53;
    --rgb-indigo-900: #172436;
    --rgb-purple-100: #f1f1f8;
    --rgb-purple-200: #e6d4f1;
    --rgb-purple-300: #d29fe3;
    --rgb-purple-400: #bc63d3;
    --rgb-purple-500: #ae3ec9;
    --rgb-purple-600: #8f38aa;
    --rgb-purple-700: #5e2f79;
    --rgb-purple-800: #32274d;
    --rgb-purple-900: #1b2235;
    --rgb-pink-100: #f3f0f5;
    --rgb-pink-200: #eed2df;
    --rgb-pink-300: #e699b6;
    --rgb-pink-400: #dc5a88;
    --rgb-pink-500: #d6336c;
    --rgb-pink-600: #af2f60;
    --rgb-pink-700: #71294c;
    --rgb-pink-800: #3a243b;
    --rgb-pink-900: #1c2231;
    --rgb-red-100: #f3f1f3;
    --rgb-red-200: #eed3d5;
    --rgb-red-300: #e69c9e;
    --rgb-red-400: #dc5f60;
    --rgb-red-500: #d63939;
    --rgb-red-600: #af3437;
    --rgb-red-700: #712c34;
    --rgb-red-800: #3a2531;
    --rgb-red-900: #1c222f;
    --rgb-orange-100: #f4f2f1;
    --rgb-orange-200: #f4dccc;
    --rgb-orange-300: #f5b286;
    --rgb-orange-400: #f68438;
    --rgb-orange-500: #f76707;
    --rgb-orange-600: #ca590f;
    --rgb-orange-700: #82431c;
    --rgb-orange-800: #412f27;
    --rgb-orange-900: #1e242d;
    --rgb-yellow-100: #f4f5f0;
    --rgb-yellow-200: #f4e7ca;
    --rgb-yellow-300: #f5cd82;
    --rgb-yellow-400: #f5b132;
    --rgb-yellow-500: #f59f00;
    --rgb-yellow-600: #c88609;
    --rgb-yellow-700: #805e18;
    --rgb-yellow-800: #403926;
    --rgb-yellow-900: #1e262d;
    --rgb-green-100: #ecf5f3;
    --rgb-green-200: #ceebd7;
    --rgb-green-300: #95d7a2;
    --rgb-green-400: #56c168;
    --rgb-green-500: #2fb344;
    --rgb-green-600: #2a9640;
    --rgb-green-700: #226739;
    --rgb-green-800: #1a3d33;
    --rgb-green-900: #162730;
    --rgb-teal-100: #ebf5f5;
    --rgb-teal-200: #c7e8e1;
    --rgb-teal-300: #84d0bc;
    --rgb-teal-400: #3ab692;
    --rgb-teal-500: #0ca678;
    --rgb-teal-600: #0e8b69;
    --rgb-teal-700: #116152;
    --rgb-teal-800: #133b3d;
    --rgb-teal-900: #152632;
    --rgb-cyan-100: #ecf5f7;
    --rgb-cyan-200: #cae8ed;
    --rgb-cyan-300: #8acfda;
    --rgb-cyan-400: #43b3c5;
    --rgb-cyan-500: #17a2b8;
    --rgb-cyan-600: #17889d;
    --rgb-cyan-700: #165f71;
    --rgb-cyan-800: #153a49;
    --rgb-cyan-900: #152634;
    --rgb-grey-100: #eff3f6;
    --rgb-grey-200: #dae0e6;
    --rgb-grey-300: #b3bbc8;
    --rgb-grey-400: #8793a6;
    --rgb-grey-500: #6c7a91;
    --rgb-grey-600: #5b687d;
    --rgb-grey-700: #3f4c5e;
    --rgb-grey-800: #263242;
    --rgb-grey-900: #182433;
    --rgb-white: #f4f8fa;
    --rgb-black: #15212f;
    --shadow: 0 0 1rem 0 rgb(var(--rgb-grey-600), var(--alpha-20));
    --text: var(--rgb-grey-700);
    --text-alt: var(--rgb-grey-300);
    --bg-main: var(--rgb-white);
    --bg-alt: #fdfeff;
    --borders: var(--rgb-blue-300);
    --borders-alt: var(--rgb-grey-100);
    --primary: var(--rgb-blue-500);
    --secondary: var(--rgb-orange-500);
    --font-size-xs: calc(var(--font-size-md) * 0.75);
    --font-size-sm: calc(var(--font-size-md) * 0.875);
    --font-size-md: 18px;
    --font-size-lg: calc(var(--font-size-md) * 1.125);
    --font-size-xl: calc(var(--font-size-md) * 1.25);
    --font-weight-xlight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-semi: 500;
    --font-weight-bold: 600;
    --font-weight-xbold: 700;
    --base-margin: 1.66667rem;
    --margin-xs: calc(var(--base-margin) * 0.5);
    --margin-sm: calc(var(--base-margin) * 0.75);
    --margin-md: calc(var(--base-margin) * 1);
    --margin-lg: calc(var(--base-margin) * 1.25);
    --margin-xl: calc(var(--base-margin) * 1.5);
    font-family: inter, system-ui, ui-sans-serif, sans-serif;
    font-size: var(--font-size-md);
    font-feature-settings: "calt", "cv10", "cv11", "liga", "ss01", "ss03";
    font-variation-settings: normal;
    letter-spacing: -0.01111rem;
    -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
    :root {
        --shadow: 0 0 1rem 0 rgb(var(--rgb-grey-200), var(--alpha-20));
        --text: var(--rgb-grey-100);
        --text-alt: var(--rgb-grey-400);
        --bg-main: var(--rgb-grey-800);
        --bg-alt: var(--rgb-grey-700);
        --borders: var(--rgb-grey-600);
        --borders-alt: var(--rgb-grey-500);
        --primary: var(--rgb-blue-300);
        --secondary: var(--rgb-orange-500);
    }
}
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}
@media screen and (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}
*,
:before,
:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    -webkit-text-size-adjust: 100%;
}
html,
body {
    height: 100%;
}
body {
    color: var(--text);
    background: var(--bg-main);
    font-size: 100%;
    line-height: var(--margin-md);
    display: flex;
    overflow-y: scroll;
}
main {
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    margin-block: 0.25rem;
    display: flex;
}
main .container {
    width: calc(100% - var(--margin-lg));
    max-width: 33.5rem;
    margin-block: calc(var(--margin-xl) + 0.5rem);
    margin-inline: auto;
}
a {
    text-decoration: none;
    transition: color 0.5s ease-in-out;
}
a:link,
a:visited {
    color: var(--primary);
}
a:hover,
a:active {
    color: var(--secondary);
}
abbr,
span.def {
    cursor: help;
}
b,
strong {
    font-weight: var(--font-weight-bold);
}
i,
em {
    font-style: italic;
}
h1 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semi);
    line-height: var(--margin-xl);
}
h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semi);
    line-height: var(--margin-lg);
}
h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semi);
    line-height: var(--margin-md);
}
h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semi);
    line-height: var(--margin-md);
}
h5 {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    line-height: var(--margin-md);
    text-transform: uppercase;
}
.eventbar {
    z-index: 9999;
    background: var(--primary);
    background-position: 50%;
    width: 100%;
    height: 0.25rem;
    position: fixed;
    top: 0;
    left: 0;
}
.page-center {
    margin-block: -2rem 0;
    margin-inline: auto;
}
#camoji {
    width: 4rem;
    height: 4rem;
    margin-block-start: var(--margin-xs);
    position: relative;
    top: -0.5rem;
    left: 0;
    overflow: visible;
}
#camoji img {
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#intro {
    padding-block: var(--margin-xs);
    padding-inline: var(--margin-sm);
    border: 1px solid var(--borders);
    border-radius: calc(var(--margin-xs) / 4);
    background: var(--bg-alt);
    display: inline-block;
    position: relative;
}
#intro:before {
    content: "";
    border-style: solid;
    border-width: 0.66667rem 0.66667rem 0;
    border-color: var(--borders) transparent transparent;
    position: absolute;
    bottom: 0;
    left: 2rem;
    translate: -50% 100%;
}
#intro:after {
    content: "";
    border-style: solid;
    border-width: 0.61111rem 0.61111rem 0;
    border-color: var(--bg-alt) transparent transparent;
    position: absolute;
    bottom: 0;
    left: 2rem;
    translate: -50% 100%;
}
#intro h1,
#intro p {
    font-weight: var(--font-weight-normal);
    font-size: 1rem;
    line-height: var(--margin-md);
    display: inline;
}
@font-face {
    font-family: inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/InterVariable.woff2) format("woff2");
}
@font-face {
    font-family: inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/InterVariable-Italic.woff2) format("woff2");
}
@font-feature-values inter {
    @character-variant {
        cv01: 1;
        cv02: 2;
        cv03: 3;
        cv04: 4;
        cv05: 5;
        cv06: 6;
        cv07: 7;
        cv08: 8;
        cv09: 9;
        cv10: 10;
        cv11: 11;
        cv12: 12;
        cv13: 13;
        alt-1: 1;
        alt-3: 9;
        open-4: 2;
        open-6: 3;
        open-9: 4;
        lc-l-with-tail: 5;
        simplified-u: 6;
        alt-double-s: 7;
        uc-i-with-serif: 8;
        uc-g-with-spur: 10;
        single-story-a: 11;
        compact-lc-f: 12;
        compact-lc-t: 13;
    }
    @styleset {
        ss01: 1;
        ss02: 2;
        ss03: 3;
        ss04: 4;
        ss05: 5;
        ss06: 6;
        ss07: 7;
        ss08: 8;
        open-digits: 1;
        disambiguation: 2;
        disambiguation-except-zero: 4;
        round-quotes-and-commas: 3;
        square-punctuation: 7;
        square-quotes: 8;
        circled-characters: 5;
        squared-characters: 6;
    }
}