:root {
    --delay: 0s;
    --sidebar-width: 220px;
    --color-data-up: #00c288;
    --color-data-down: #dc3545;
    --color-dark: #212529;
    --preset-1: rgb(13, 110, 253);
}

body.crypt-dark {
    --color-primary-50: #f9fafb;
    --color-primary-100: #f3f4f6;
    /*--primary text, level text --*/
    --color-primary-200: #e5e7eb;
    --color-primary-300: #d1d5db;
    /*--table text, thead text --*/
    --color-primary-400: #9ca3af;
    --color-primary-500: #6b7280;
    /*--thead text, form-select text, info text --*/
    --color-primary-600: #4b5563;
    --color-primary-700: #374151;
    /*--meta --*/
    --color-primary-800: #1f2937;
    --color-primary-900: #111827;
    --color-primary-950: #030712;
    --dl-reverse: #ffffff;
    /*--This function inverts the color of background section.  --*/
    --brand-color: #facc15;
    --brand-hover-color: #eab308;
    --brand-hover-bg: hsla(0, 0%, 100%, 0.020);
    --card-color: #121212;
    /*--all card --*/
    --border-color: #ffffff0c;
    /*--card border color --*/
    --color-bg: #06090b;
    /*--template background --*/
    --tab-bg-color: #030507;
    /*--all tab background color --*/
    --color-input-field: #1b1b1b;
    /*--search, input box --*/
}

body.crypt-light {
    --color-primary-50: #030712;
    --color-primary-100: #111827;
    /*--primary text, level text --*/
    --color-primary-200: #1f2937;
    --color-primary-300: #374151;
    /*--table text, thead text --*/
    --color-primary-400: #4b5563;
    --color-primary-500: #6b7280;
    /*--thead text, form-select text, info text --*/
    --color-primary-600: #9ca3af;
    --color-primary-700: #d1d5db;
    /*--meta --*/
    --color-primary-800: #e5e7eb;
    --color-primary-900: #f3f4f6;
    --color-primary-950: #f9fafb;
    --dl-reverse: #121212;
    /*--This function inverts the color of background section.  --*/
    --brand-color: #facc15;
    --brand-hover-color: #eab308;
    --brand-hover-bg: hsl(210, 17%, 95%);
    --card-color: #ffffff;
    /*--all card --*/
    --border-color: #00000013;
    /*--card border color --*/
    --color-bg: #f1f3f5;
    /*--template background --*/
    --tab-bg-color: #f3f4f6;
    /*--all tab background color --*/
    --color-input-field: #f1f3f5;
    /*--search, input box --*/
}

@import url('https://unpkg.com/normalize.css') layer(normalize);
@layer normalize foundation;
@layer attributes {
    .attributes {
        position: absolute;
        top: 80%;
        left: 40%;
        z-index: 1;
    }
    .attribute {
        --font-size: 2rem;
        --hue: 10;
        --ox: 0;
        --oy: 0;
        --dx: 0;
        --dy: 0;
        --or: 0;
        --dr: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--font-size);
        border: 1px solid hsl(var(--hue) 100% 80%);
        padding: 8px 14px !important;
        border-radius: 14px;
        position: absolute;
        bottom: 0%;
        left: 0%;
        translate: 0% 0%;
        background: #000000;
        color: hsl(var(--hue) 100% 40% / 0.8);
        box-shadow: 1px -1px 0.5rem 0rem hsl(var(--hue) 100% 30%) inset;
        transform: translate(var(--ox), var(--oy)) rotate(var(--or))
    }
    .attribute:nth-of-type(1) {
        --hue: 10;
        --ox: 10%;
        --oy: 0%;
        --or: 7deg;
    }
    .attribute:nth-of-type(2) {
        --hue: 60;
        --ox: 10%;
        --oy: -5%;
        --or: 12deg;
    }
    .attribute:nth-of-type(3) {
        --hue: 180;
        --ox: -20%;
        --oy: -23%;
        --or: -10deg;
    }
    .attribute:nth-of-type(4) {
        --hue: 120;
        --ox: -13%;
        --oy: 6%;
        --or: 15deg;
    }
    .attribute:nth-of-type(5) {
        --hue: 210;
        --ox: -21%;
        --oy: 18%;
        --or: 10deg;
    }
    .attribute:nth-of-type(6) {
        --hue: 280;
        --ox: 15%;
        --oy: 5%;
        --or: -8deg;
    }
    .attribute svg {
        width: var(--font-size);
        stroke-width: 2;
    }
}

.gsap-text {
    position: relative;
    width: 100%;
    height: 30vh;
}

.gsap-text.meme {
    position: relative;
    width: 100%;
    height: auto;
}

.gsap-text .scroll {
    width: 100%;
    display: flex;
}

.gsap-text .scroll div {
    color: var(--brand-color);
    font-size: 4em;
    font-weight: 900;
    white-space: nowrap;
    text-transform: uppercase;
    animation: animate 40s linear infinite;
    animation-delay: -40s;
}

.gsap-text .scroll div:nth-child(2) {
    animation: animate2 40s linear infinite;
    animation-delay: -20s;
}

.gsap-text .scroll div span {
    -webkit-text-stroke: 2px var(--card-color);
    color: transparent;
}

@keyframes animate {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes animate2 {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-200%);
    }
}

.gsap-text .scroll.text1 {
    transform: rotate(2deg) translateY(200px) translateX(-200px);
}

.gsap-text .scroll.text2 {
    transform: none;
    padding-top: 20px;
}

.gsap-text .scroll.text3 div {
    font-size: 20px;
    white-space: nowrap;
    text-transform: uppercase;
}

.gsap-text .scroll.text3 div span {
    -webkit-text-stroke: 1.2px #000000;
    color: transparent;
    .meme-chart {
        margin: -.5em auto;
        text-align: center;
        width: 90%;
        height: 390px
    }
}