*,:before,:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}


:root {
    --top-border-dst: 20px;

    --font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --name-background: -webkit-linear-gradient( 120deg, var(--c-brand-1) 30%, var(--c-brand-next) );
    --image-background-image: linear-gradient( -45deg, var(--c-brand-1) 30%, var(--c-brand-next) );
    --image-filter: blur(80px);

    /*buttons*/
    --button-brand-bg: var(--c-brand-1);
    --button-brand-hover-border: var(--c-brand-light);
    --button-brand-hover-text: var(--c-bg);
    --button-brand-hover-bg: var(--c-brand-light);
    --button-brand-active-border: var(--c-brand-light);
    --button-brand-active-text: var(--c-bg);
    --button-brand-active-bg: var(--button-brand-bg);

    --button-alt-bg: #ebebef;

    /*BG*/
    --c-bg: #ffffff;
    --c-bg-alt: #f6f6f7;
    --c-bg-elv: #ffffff;
    --c-bg-soft: #f6f6f7;

    /*misc*/
    --c-vip-name: #009f00;
    --c-brand-1: #00a98e;
    --c-brand-light: #4ad1b4;
    --c-brand-lighter: #78fadc;
    --c-brand-dark: #008269;
    --c-brand-darker: #005d47;
    --c-brand-next: #009ff7;
    --c-brand-2: var(--c-brand-darker);
    animation: rainbowAnimation 10s linear infinite
}

@media (min-width: 640px) {
    :root {
        --image-filter: blur(120px);
        --top-border-dst: 60px;
    }
}

@media (min-width: 1080px) {
    :root {
        --image-filter: blur(120px);
        --top-border-dst: 120px;
    }
}

@media (max-height: 600px) {
    :root {
        --top-border-dst: 60px;
    }
}

@media (max-height: 500px) {
    :root {
        --top-border-dst: 20px;
    }
}

:root.dark {
    --c-brand-2: var(--c-brand-light)
}

:root {
    --c-text-1: rgba(60, 60, 67);
    --c-text-2: rgba(60, 60, 67, .78);
    --c-text-3: rgba(60, 60, 67, .56)
}

.dark {
    --c-text-1: rgba(255, 255, 245, .86);
    --c-text-2: rgba(235, 235, 245, .6);
    --c-text-3: rgba(235, 235, 245, .38);

    --c-bg: #1b1b1f;
    --c-bg-alt: #161618;
    --c-bg-elv: #202127;
    --c-bg-soft: #202127;

    --button-alt-bg: #32363f;
}

@keyframes rainbowAnimation{0%{--c-brand-1:#00a98e;--c-brand-light:#4ad1b4;--c-brand-lighter:#78fadc;--c-brand-dark:#008269;--c-brand-darker:#005d47;--c-brand-next:#009ff7}1.25%{--c-brand-1:#00a996;--c-brand-light:#4bd1bd;--c-brand-lighter:#79fbe5;--c-brand-dark:#008371;--c-brand-darker:#005e4f;--c-brand-next:#009dfa}2.5%{--c-brand-1:#00a99f;--c-brand-light:#4cd1c6;--c-brand-lighter:#7afbee;--c-brand-dark:#00837a;--c-brand-darker:#005e56;--c-brand-next:#009bfc}3.75%{--c-brand-1:#00a9a7;--c-brand-light:#4dd1cf;--c-brand-lighter:#7bfbf8;--c-brand-dark:#008382;--c-brand-darker:#005e5e;--c-brand-next:#0098fd}5%{--c-brand-1:#00a9b0;--c-brand-light:#4ed1d7;--c-brand-lighter:#7dfaff;--c-brand-dark:#00838a;--c-brand-darker:#005e65;--c-brand-next:#0096fd}6.25%{--c-brand-1:#00a9b8;--c-brand-light:#4fd1e0;--c-brand-lighter:#7efaff;--c-brand-dark:#008391;--c-brand-darker:#005e6d;--c-brand-next:#0093fd}7.5%{--c-brand-1:#00a9c0;--c-brand-light:#50d0e8;--c-brand-lighter:#7ffaff;--c-brand-dark:#008399;--c-brand-darker:#005e74;--c-brand-next:#2e90fc}8.75%{--c-brand-1:#00a8c7;--c-brand-light:#51d0f0;--c-brand-lighter:#81f9ff;--c-brand-dark:#0082a0;--c-brand-darker:#005e7b;--c-brand-next:#4d8dfa}10%{--c-brand-1:#00a8cf;--c-brand-light:#52cff7;--c-brand-lighter:#82f8ff;--c-brand-dark:#0082a7;--c-brand-darker:#005e81;--c-brand-next:#638af8}11.25%{--c-brand-1:#00a7d5;--c-brand-light:#53cfff;--c-brand-lighter:#84f8ff;--c-brand-dark:#0081ae;--c-brand-darker:#005d87;--c-brand-next:#7587f5}12.5%{--c-brand-1:#00a6dc;--c-brand-light:#55ceff;--c-brand-lighter:#85f7ff;--c-brand-dark:#0081b4;--c-brand-darker:#005d8d;--c-brand-next:#8583f1}13.75%{--c-brand-1:#00a6e2;--c-brand-light:#56cdff;--c-brand-lighter:#87f6ff;--c-brand-dark:#0080b9;--c-brand-darker:#005c93;--c-brand-next:#9280ed}15%{--c-brand-1:#00a4e7;--c-brand-light:#57ccff;--c-brand-lighter:#88f4ff;--c-brand-dark:#007fbf;--c-brand-darker:#005b98;--c-brand-next:#9f7ce9}16.25%{--c-brand-1:#00a3ec;--c-brand-light:#58caff;--c-brand-lighter:#89f3ff;--c-brand-dark:#007ec3;--c-brand-darker:#005b9c;--c-brand-next:#aa78e3}17.5%{--c-brand-1:#00a2f1;--c-brand-light:#58c9ff;--c-brand-lighter:#8af1ff;--c-brand-dark:#007dc8;--c-brand-darker:#0059a0;--c-brand-next:#b574dd}18.75%{--c-brand-1:#00a0f4;--c-brand-light:#59c7ff;--c-brand-lighter:#8bf0ff;--c-brand-dark:#007bcb;--c-brand-darker:#0058a3;--c-brand-next:#be71d7}20%{--c-brand-1:#009ff7;--c-brand-light:#5ac5ff;--c-brand-lighter:#8ceeff;--c-brand-dark:#007ace;--c-brand-darker:#0057a6;--c-brand-next:#c76dd1}21.25%{--c-brand-1:#009dfa;--c-brand-light:#5ac3ff;--c-brand-lighter:#8decff;--c-brand-dark:#0078d0;--c-brand-darker:#0055a8;--c-brand-next:#cf69c9}22.5%{--c-brand-1:#009bfc;--c-brand-light:#5bc1ff;--c-brand-lighter:#8de9ff;--c-brand-dark:#0076d2;--c-brand-darker:#0053aa;--c-brand-next:#d566c2}23.75%{--c-brand-1:#0098fd;--c-brand-light:#5bbfff;--c-brand-lighter:#8ee7ff;--c-brand-dark:#0074d3;--c-brand-darker:#0051ab;--c-brand-next:#dc63ba}25%{--c-brand-1:#0096fd;--c-brand-light:#5bbcff;--c-brand-lighter:#8ee4ff;--c-brand-dark:#0071d4;--c-brand-darker:#004fab;--c-brand-next:#e160b3}26.25%{--c-brand-1:#0093fd;--c-brand-light:#5bb9ff;--c-brand-lighter:#8ee1ff;--c-brand-dark:#006fd3;--c-brand-darker:#004dab;--c-brand-next:#e65eab}27.5%{--c-brand-1:#2e90fc;--c-brand-light:#69b6ff;--c-brand-lighter:#99deff;--c-brand-dark:#006cd2;--c-brand-darker:#004baa;--c-brand-next:#e95ca2}28.75%{--c-brand-1:#4d8dfa;--c-brand-light:#7eb3ff;--c-brand-lighter:#abdbff;--c-brand-dark:#0069d1;--c-brand-darker:#0048a9;--c-brand-next:#ed5a9a}30%{--c-brand-1:#638af8;--c-brand-light:#8fb0ff;--c-brand-lighter:#bbd7ff;--c-brand-dark:#3066cf;--c-brand-darker:#0045a7;--c-brand-next:#ef5992}31.25%{--c-brand-1:#7587f5;--c-brand-light:#9fadff;--c-brand-lighter:#cad4ff;--c-brand-dark:#4963cc;--c-brand-darker:#0941a4;--c-brand-next:#f15989}32.5%{--c-brand-1:#8583f1;--c-brand-light:#aea9ff;--c-brand-lighter:#d8d1ff;--c-brand-dark:#5b5fc8;--c-brand-darker:#2e3ea1;--c-brand-next:#f25981}33.75%{--c-brand-1:#9280ed;--c-brand-light:#bca6ff;--c-brand-lighter:#e6cdff;--c-brand-dark:#6a5cc4;--c-brand-darker:#413a9d;--c-brand-next:#f25a79}35%{--c-brand-1:#9f7ce9;--c-brand-light:#c8a2ff;--c-brand-lighter:#f2c9ff;--c-brand-dark:#7758c0;--c-brand-darker:#503598;--c-brand-next:#f25c71}36.25%{--c-brand-1:#aa78e3;--c-brand-light:#d39eff;--c-brand-lighter:#fec6ff;--c-brand-dark:#8354bb;--c-brand-darker:#5c3193;--c-brand-next:#f15e69}37.5%{--c-brand-1:#b574dd;--c-brand-light:#de9bff;--c-brand-lighter:#ffc2ff;--c-brand-dark:#8d50b5;--c-brand-darker:#662c8e;--c-brand-next:#ef6061}38.75%{--c-brand-1:#be71d7;--c-brand-light:#e897ff;--c-brand-lighter:#ffbfff;--c-brand-dark:#964baf;--c-brand-darker:#6f2688;--c-brand-next:#ed635a}40%{--c-brand-1:#c76dd1;--c-brand-light:#f194fa;--c-brand-lighter:#ffbcff;--c-brand-dark:#9e47a9;--c-brand-darker:#772082;--c-brand-next:#eb6552}41.25%{--c-brand-1:#cf69c9;--c-brand-light:#f991f2;--c-brand-lighter:#ffb9ff;--c-brand-dark:#a643a2;--c-brand-darker:#7e197c;--c-brand-next:#e8694b}42.5%{--c-brand-1:#d566c2;--c-brand-light:#ff8deb;--c-brand-lighter:#ffb6ff;--c-brand-dark:#ac3f9b;--c-brand-darker:#841075;--c-brand-next:#e46c44}43.75%{--c-brand-1:#dc63ba;--c-brand-light:#ff8be3;--c-brand-lighter:#ffb3ff;--c-brand-dark:#b23b94;--c-brand-darker:#89046f;--c-brand-next:#e06f3d}45%{--c-brand-1:#e160b3;--c-brand-light:#ff88db;--c-brand-lighter:#ffb1ff;--c-brand-dark:#b7378c;--c-brand-darker:#8d0068;--c-brand-next:#db7336}46.25%{--c-brand-1:#e65eab;--c-brand-light:#ff86d2;--c-brand-lighter:#ffaffb;--c-brand-dark:#bb3485;--c-brand-darker:#910060;--c-brand-next:#d77630}47.5%{--c-brand-1:#e95ca2;--c-brand-light:#ff84ca;--c-brand-lighter:#ffadf2;--c-brand-dark:#be317d;--c-brand-darker:#940059;--c-brand-next:#d17a2a}48.75%{--c-brand-1:#ed5a9a;--c-brand-light:#ff83c1;--c-brand-lighter:#fface9;--c-brand-dark:#c12f75;--c-brand-darker:#970052;--c-brand-next:#cc7d24}50%{--c-brand-1:#ef5992;--c-brand-light:#ff82b8;--c-brand-lighter:#ffabe0;--c-brand-dark:#c32d6d;--c-brand-darker:#98004b;--c-brand-next:#c6811e}51.25%{--c-brand-1:#f15989;--c-brand-light:#ff82af;--c-brand-lighter:#ffabd7;--c-brand-dark:#c52d65;--c-brand-darker:#9a0043;--c-brand-next:#bf8418}52.5%{--c-brand-1:#f25981;--c-brand-light:#ff82a7;--c-brand-lighter:#ffabce;--c-brand-dark:#c52e5e;--c-brand-darker:#9a003c;--c-brand-next:#b98713}53.75%{--c-brand-1:#f25a79;--c-brand-light:#ff839e;--c-brand-lighter:#ffacc5;--c-brand-dark:#c62f56;--c-brand-darker:#9a0035;--c-brand-next:#b28a0f}55%{--c-brand-1:#f25c71;--c-brand-light:#ff8496;--c-brand-lighter:#ffadbc;--c-brand-dark:#c5314e;--c-brand-darker:#99002e;--c-brand-next:#ab8d0c}56.25%{--c-brand-1:#f15e69;--c-brand-light:#ff868d;--c-brand-lighter:#ffaeb4;--c-brand-dark:#c43447;--c-brand-darker:#980027;--c-brand-next:#a3900b}57.5%{--c-brand-1:#ef6061;--c-brand-light:#ff8885;--c-brand-lighter:#ffb0ab;--c-brand-dark:#c3373f;--c-brand-darker:#970020;--c-brand-next:#9c920d}58.75%{--c-brand-1:#ed635a;--c-brand-light:#ff8a7d;--c-brand-lighter:#ffb2a3;--c-brand-dark:#c13b38;--c-brand-darker:#940619;--c-brand-next:#949510}60%{--c-brand-1:#eb6552;--c-brand-light:#ff8d76;--c-brand-lighter:#ffb59b;--c-brand-dark:#be3e31;--c-brand-darker:#921111;--c-brand-next:#8b9715}61.25%{--c-brand-1:#e8694b;--c-brand-light:#ff8f6e;--c-brand-lighter:#ffb794;--c-brand-dark:#bb4229;--c-brand-darker:#8f1908;--c-brand-next:#83991b}62.5%{--c-brand-1:#e46c44;--c-brand-light:#ff9367;--c-brand-lighter:#ffba8c;--c-brand-dark:#b74622;--c-brand-darker:#8c1f00;--c-brand-next:#7a9b21}63.75%{--c-brand-1:#e06f3d;--c-brand-light:#ff9661;--c-brand-lighter:#ffbd86;--c-brand-dark:#b44a1a;--c-brand-darker:#882500;--c-brand-next:#719d27}65%{--c-brand-1:#db7336;--c-brand-light:#ff995a;--c-brand-lighter:#ffc17f;--c-brand-dark:#af4e11;--c-brand-darker:#842a00;--c-brand-next:#679e2e}66.25%{--c-brand-1:#d77630;--c-brand-light:#ff9c54;--c-brand-lighter:#ffc47a;--c-brand-dark:#ab5206;--c-brand-darker:#802f00;--c-brand-next:#5da035}67.5%{--c-brand-1:#d17a2a;--c-brand-light:#fea04f;--c-brand-lighter:#ffc774;--c-brand-dark:#a55600;--c-brand-darker:#7b3300;--c-brand-next:#51a13c}68.75%{--c-brand-1:#cc7d24;--c-brand-light:#f8a34a;--c-brand-lighter:#ffca70;--c-brand-dark:#a05900;--c-brand-darker:#773700;--c-brand-next:#44a244}70%{--c-brand-1:#c6811e;--c-brand-light:#f2a646;--c-brand-lighter:#ffce6c;--c-brand-dark:#9b5d00;--c-brand-darker:#713b00;--c-brand-next:#34a44b}71.25%{--c-brand-1:#bf8418;--c-brand-light:#ebaa42;--c-brand-lighter:#ffd168;--c-brand-dark:#956000;--c-brand-darker:#6c3e00;--c-brand-next:#1ba553}72.5%{--c-brand-1:#b98713;--c-brand-light:#e4ad3f;--c-brand-lighter:#ffd466;--c-brand-dark:#8e6300;--c-brand-darker:#674100;--c-brand-next:#00a65b}73.75%{--c-brand-1:#b28a0f;--c-brand-light:#ddb03d;--c-brand-lighter:#ffd764;--c-brand-dark:#886600;--c-brand-darker:#614400;--c-brand-next:#00a663}75%{--c-brand-1:#ab8d0c;--c-brand-light:#d5b33c;--c-brand-lighter:#ffda63;--c-brand-dark:#816900;--c-brand-darker:#5b4700;--c-brand-next:#00a76c}76.25%{--c-brand-1:#a3900b;--c-brand-light:#cdb63c;--c-brand-lighter:#f8dd63;--c-brand-dark:#7a6b00;--c-brand-darker:#554900;--c-brand-next:#00a874}77.5%{--c-brand-1:#9c920d;--c-brand-light:#c5b83d;--c-brand-lighter:#f0e064;--c-brand-dark:#736e00;--c-brand-darker:#4e4b00;--c-brand-next:#00a87d}78.75%{--c-brand-1:#949510;--c-brand-light:#bdbb3e;--c-brand-lighter:#e7e366;--c-brand-dark:#6c7000;--c-brand-darker:#474d00;--c-brand-next:#00a985}80%{--c-brand-1:#8b9715;--c-brand-light:#b4bd41;--c-brand-lighter:#dee668;--c-brand-dark:#647200;--c-brand-darker:#404f00;--c-brand-next:#00a98e}81.25%{--c-brand-1:#83991b;--c-brand-light:#abc045;--c-brand-lighter:#d4e86c;--c-brand-dark:#5c7400;--c-brand-darker:#385100;--c-brand-next:#00a996}82.5%{--c-brand-1:#7a9b21;--c-brand-light:#a2c249;--c-brand-lighter:#cbea70;--c-brand-dark:#537600;--c-brand-darker:#2f5200;--c-brand-next:#00a99f}83.75%{--c-brand-1:#719d27;--c-brand-light:#98c44e;--c-brand-lighter:#c1ec75;--c-brand-dark:#4a7700;--c-brand-darker:#255300;--c-brand-next:#00a9a7}85%{--c-brand-1:#679e2e;--c-brand-light:#8ec654;--c-brand-lighter:#b7ee7a;--c-brand-dark:#407900;--c-brand-darker:#185500;--c-brand-next:#00a9b0}86.25%{--c-brand-1:#5da035;--c-brand-light:#84c75a;--c-brand-lighter:#acf080;--c-brand-dark:#357a0a;--c-brand-darker:#015600;--c-brand-next:#00a9b8}87.5%{--c-brand-1:#51a13c;--c-brand-light:#79c961;--c-brand-lighter:#a1f287;--c-brand-dark:#277b16;--c-brand-darker:#005700;--c-brand-next:#00a9c0}88.75%{--c-brand-1:#44a244;--c-brand-light:#6dca68;--c-brand-lighter:#96f48e;--c-brand-dark:#117c1f;--c-brand-darker:#005700;--c-brand-next:#00a8c7}90%{--c-brand-1:#34a44b;--c-brand-light:#60cc70;--c-brand-lighter:#89f595;--c-brand-dark:#007d28;--c-brand-darker:#005801;--c-brand-next:#00a8cf}91.25%{--c-brand-1:#1ba553;--c-brand-light:#51cd77;--c-brand-lighter:#7cf69d;--c-brand-dark:#007e30;--c-brand-darker:#00590d;--c-brand-next:#00a7d5}92.5%{--c-brand-1:#00a65b;--c-brand-light:#48ce80;--c-brand-lighter:#75f7a6;--c-brand-dark:#007f38;--c-brand-darker:#005917;--c-brand-next:#00a6dc}93.75%{--c-brand-1:#00a663;--c-brand-light:#48cf88;--c-brand-lighter:#75f8ae;--c-brand-dark:#008040;--c-brand-darker:#005a20;--c-brand-next:#00a6e2}95%{--c-brand-1:#00a76c;--c-brand-light:#49cf91;--c-brand-lighter:#76f9b7;--c-brand-dark:#008049;--c-brand-darker:#005b28;--c-brand-next:#00a4e7}96.25%{--c-brand-1:#00a874;--c-brand-light:#49d099;--c-brand-lighter:#76f9c0;--c-brand-dark:#008151;--c-brand-darker:#005c30;--c-brand-next:#00a3ec}97.5%{--c-brand-1:#00a87d;--c-brand-light:#49d0a2;--c-brand-lighter:#77fac9;--c-brand-dark:#008159;--c-brand-darker:#005c37;--c-brand-next:#00a2f1}98.75%{--c-brand-1:#00a985;--c-brand-light:#4ad1ab;--c-brand-lighter:#77fad3;--c-brand-dark:#008261;--c-brand-darker:#005d3f;--c-brand-next:#00a0f4}to{--c-brand-1:#00a98e;--c-brand-light:#4ad1b4;--c-brand-lighter:#78fadc;--c-brand-dark:#008269;--c-brand-darker:#005d47;--c-brand-next:#009ff7}}

.notify {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--c-text-2);
    font-size: 10px;
}


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

a,area,button,[role=button],input,label,select,summary,textarea {
    touch-action: manipulation
}

html,:host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    background: var(--c-bg);
}

.body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    line-height: 24px;
    font-family: var(--font-family-base), serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--c-text-1);
    background-color: var(--c-bg);
    font-synthesis: style;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: calc((var(--top-border-dst)) * -1) 0 0;
    padding: calc(var(--top-border-dst) + 48px) 24px 48px
}

@media (min-width: 640px) {
    .body {
        padding:calc(var(--top-border-dst) + 80px) 48px 64px
    }
}

@media (min-width: 1080px) {
    .body {
        padding:calc(var(--top-border-dst) + 80px) 64px 64px
    }
}

.main {
    position: relative;
    z-index: 10;
    order: 2;
    flex-grow: 1;
    flex-shrink: 0
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1152px;
    text-align: center;
    margin: calc(0px  * -1) auto auto;
    padding: calc(var(--top-border-dst) + 48px) 24px 48px
}

@media (min-width: 1080px) {
    .container {
        flex-direction:row;
        text-align:left;
        padding:calc(var(--top-border-dst) + 80px) 48px 64px
    }
    .main {
        top: -28px;
        order: 1;
        width: calc((100% / 3) * 2);
        max-width: 592px;
    }
}

.name {
    max-width: 392px;
    letter-spacing: -.4px;
    line-height: 40px;
    font-size: 30px;
    font-weight: 700;
    white-space: pre-wrap;
    margin: 0 auto;
    color: var(--c-brand-1);
    background: var(--name-background);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (min-width: 640px) {
    .name {
        max-width:576px;
        line-height: 56px;
        font-size: 48px;
        margin: 0 auto;
    }
}

@media (min-width: 1080px) {
    .name {
        line-height:64px;
        font-size: 56px;
        margin: 0 auto;
    }
}

.rogers-name {
    font-weight: 900;
    display: block;
    height: .3em;
}

.rogers-name::after {
    background: url('../image/zap.svg') no-repeat;
    position: relative;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: .2em;
}


.name rt {
    position: relative;
    left: -6%;
    bottom: 0;
    -webkit-text-fill-color: var(--c-vip-name);
    font-size: 0.25em;
    color: var(--c-vip-name) !important;
}

.safari .name rt {
    position: absolute;
    transform: translateY(0) translateX(-4px);
}

.firefox .name rt {
    position: relative;
    left: -4px;
}

.unsupported-browser .name rt{
    transform: translateY(0) translateX(-4px);
    position: relative;
    left: -4px;
}


.donor {
    width: auto;
    height: auto;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 90%;
    max-height: 80%;
}

.firefox .donor {
    transform: translateY(-50%) translateX(14px);
}

@media (min-width: 640px) {
    .firefox .donor {
        transform: translateY(-50%) translateX(22px);
    }
}

@media (min-width: 1080px) {
    .firefox .donor {
        transform: translateY(-50%) translateX(25px);
    }
}


.tagline {
    padding-top: 8px;
    max-width: 392px;
    line-height: 28px;
    font-size: 18px;
    font-weight: 500;
    white-space: pre-wrap;
    color: var(--c-text-2);
    margin: 0 auto;
}

@media (min-width: 640px) {
    .tagline {
        padding-top:12px;
        max-width: 576px;
        line-height: 32px;
        font-size: 20px;
        margin: 0 auto;
    }
}

@media (min-width: 1080px) {
    .tagline {
        line-height:36px;
        font-size: 24px;
        margin: 0 auto;
    }
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    margin: -6px;
    padding-top: 18px;
    column-gap: 50px;
    row-gap: 10px;
    justify-content: center;

}

@media (min-width: 640px) {
    .buttons {
        padding-top:24px
    }
}

@media (min-width: 1080px) {
    .buttons {
        padding-top:30px;
        justify-content: left;
        padding-left: 16px;
    }
}

.button {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    transition: color .25s, border-color .25s, background-color .25s;

    border-radius: 20px;
    padding: 0 20px;
    line-height: 38px;
    font-size: 14px;
}

.button.rainbow {
    border-color: var(--button-brand-hover-border);
    color: var(--button-brand-hover-text);
    background-color: var(--button-brand-hover-bg);
}

.button.alt {
    border-color: transparent;
    color: var(--c-text-1);
    background-color: var(--button-alt-bg);
}

.button:active {
    transition: color .1s,border-color .1s,background-color .1s
}

.button:hover {
    cursor: pointer;
    border-color: var(--button-brand-hover-border);
    color: var(--button-brand-hover-text);
    background-color: var(--button-brand-hover-bg)
}

.button:active {
    border-color: var(--button-brand-active-border);
    color: var(--button-brand-active-text);
    background-color: var(--button-brand-active-bg)
}

#blur {
    transition: filter 0.5s ease, pointer-events 0.5s ease, user-select 0.5s ease;
}

#blur.active {
    filter: blur(20px);
    pointer-events: none;
    user-select: none;
}

.safari #blur.active {
    .button.rainbow {
        -webkit-backdrop-filter: var(--image-filter);
    }

    .name {
        -webkit-backdrop-filter: var(--image-filter);
    }
}

.popup {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: min(60%, 700px);
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    background: var(--c-bg);
    border-radius: 20px;
    color: var(--c-text-1);
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    font-size: 14px;
}

.popup.active {
    visibility: visible;
    opacity: 1;
    top: 50%;
}

@media (min-width: 640px) {
    .popup {
        padding: 40px;
        font-size: 16px;
    }
}

@media (min-width: 1080px) {
    .popup {
        padding: 60px;
        font-size: 18px;
    }
}


.popup-container {
    text-align: center;
}

@media (min-width: 1080px) {
    .popup-container {
        text-align: left;
    }
}

.popup-container .buttons {
    padding-left: 0;
    padding-top: 0
}


.avatar {
    order: 1;
    margin: -76px -24px -48px
}

@media (min-width: 640px) {
    .avatar {
        margin:-108px -24px -48px
    }
}

@media (min-width: 1080px) {
    .avatar {
        flex-grow:1;
        order: 2;
        margin: 0;
        min-height: 100%
    }
}


.avatar-container {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 40px auto 0;
}

@media (min-width: 640px) {
    .avatar-container {
        width:392px;
        height: 392px;
        margin: 60px auto 0;
    }
}

@media (min-width: 1080px) {
    .avatar-container {
        margin: 0 auto 0;
        display:flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        transform: translate(-32px,-32px)
    }
}


.avatar-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    width: 144px;
    height: 144px;
    background-image: var(--image-background-image);
    filter: var(--image-filter);
    transform: translate(-50%,-50%);
}

.safari .avatar-bg {
    -webkit-backdrop-filter: var(--image-filter);
}

.unsupported-browser .avatar-bg {
    -webkit-backdrop-filter: var(--image-filter);
}

@media (min-width: 640px) {
    .avatar-bg {
        width:256px;
        height: 256px
    }
}

@media (min-width: 1080px) {
    .avatar-bg {
        width:320px;
        height: 320px
    }
}


.avatar-src {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 192px;
    max-height: 192px;
    display: block;
    vertical-align: middle;
    overflow-clip-margin: content-box;
    overflow: clip;
    transform: translate(-50%,-50%);
    border-radius: 50%;
}

.avatar-src:hover {
    cursor: pointer;
}

@media (min-width: 640px) {
    .avatar-src {
        max-width: 256px;
        max-height: 256px
    }
}

@media (min-width: 1080px) {
    .avatar-src {
        max-width:320px;
        max-height: 320px
    }
}