.hard-light{
    mix-blend-mode: hard-light;
}
.zoom:hover{
    transform: scale(1.1);
}
body {
    margin: 0;
}

.glitch {
    background: #000 no-repeat center;
    background-size: 0;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.glitch::before, .glitch::after,
.glitch .channel {
    background: inherit;
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.glitch::before {
    animation: glitch-before 3s linear infinite alternate both;
    content: "";
}
@keyframes glitch-before {
    0% {
        clip-path: polygon(0% 72.2925177058%, 100% 72.2925177058%, 100% 80.485360814%, 0% 80.485360814%);
        transform: translate(-5.1991554654%, -0.2152994086%);
    }
    2% {
        clip-path: polygon(0% 4.6768006193%, 100% 4.6768006193%, 100% 9.5559745592%, 0% 9.5559745592%);
        transform: translate(-0.3723104516%, 0.2624783327%);
    }
    4% {
        clip-path: polygon(0% 8.8750500984%, 100% 8.8750500984%, 100% 17.6109507641%, 0% 17.6109507641%);
        transform: translate(-7.8519730015%, -0.1875098265%);
    }
    6% {
        clip-path: polygon(0% 81.5557587015%, 100% 81.5557587015%, 100% 83.7471117661%, 0% 83.7471117661%);
        transform: translate(0.1163049323%, -0.0971763399%);
    }
    8% {
        clip-path: polygon(0% 13.2241354805%, 100% 13.2241354805%, 100% 16.9605520039%, 0% 16.9605520039%);
        transform: translate(2.4244590887%, 0.1426383628%);
    }
    10% {
        clip-path: polygon(0% 55.5172486451%, 100% 55.5172486451%, 100% 63.7865081822%, 0% 63.7865081822%);
        transform: translate(0.1549583773%, -0.138903014%);
    }
    12% {
        clip-path: polygon(0% 40.5735791869%, 100% 40.5735791869%, 100% 47.8872198415%, 0% 47.8872198415%);
        transform: translate(2.1499545767%, 0.3947782465%);
    }
    14% {
        clip-path: polygon(0% 12.5458115882%, 100% 12.5458115882%, 100% 14.0449768908%, 0% 14.0449768908%);
        transform: translate(-1.0883097422%, 0.3867604153%);
    }
    16% {
        clip-path: polygon(0% 31.3185435187%, 100% 31.3185435187%, 100% 33.4648795298%, 0% 33.4648795298%);
        transform: translate(4.73148288%, -0.2528259957%);
    }
    18% {
        clip-path: polygon(0% 79.1154036193%, 100% 79.1154036193%, 100% 80.815655226%, 0% 80.815655226%);
        transform: translate(7.8460198597%, 0.4744178164%);
    }
    20%, 100% {
        clip-path: none;
        transform: none;
    }
}
.glitch::after {
    animation: glitch-after 3s linear infinite alternate both;
    content: "";
}
@keyframes glitch-after {
    0% {
        clip-path: polygon(0% 89.4134580534%, 100% 89.4134580534%, 100% 97.1445063577%, 0% 97.1445063577%);
        transform: translate(-3.0002878988%, 0.4544129394%);
    }
    2% {
        clip-path: polygon(0% 38.5791868287%, 100% 38.5791868287%, 100% 46.6045985911%, 0% 46.6045985911%);
        transform: translate(-6.5859399068%, -0.1802442667%);
    }
    4% {
        clip-path: polygon(0% 5.9355627686%, 100% 5.9355627686%, 100% 15.5684891776%, 0% 15.5684891776%);
        transform: translate(-3.8447119663%, 0.4570746734%);
    }
    6% {
        clip-path: polygon(0% 32.6607326062%, 100% 32.6607326062%, 100% 41.128684311%, 0% 41.128684311%);
        transform: translate(5.09356375%, -0.2612777687%);
    }
    8% {
        clip-path: polygon(0% 83.0525100387%, 100% 83.0525100387%, 100% 84.6973589662%, 0% 84.6973589662%);
        transform: translate(4.4491524195%, -0.3116555338%);
    }
    10% {
        clip-path: polygon(0% 58.6293052171%, 100% 58.6293052171%, 100% 62.9997001709%, 0% 62.9997001709%);
        transform: translate(2.4502227171%, 0.0478547163%);
    }
    12% {
        clip-path: polygon(0% 24.3878613389%, 100% 24.3878613389%, 100% 30.4634347997%, 0% 30.4634347997%);
        transform: translate(-2.4193409957%, -0.0086719148%);
    }
    14% {
        clip-path: polygon(0% 18.7092883864%, 100% 18.7092883864%, 100% 20.2459987108%, 0% 20.2459987108%);
        transform: translate(2.2650997512%, -0.1156192081%);
    }
    16% {
        clip-path: polygon(0% 49.6914871182%, 100% 49.6914871182%, 100% 51.9398577892%, 0% 51.9398577892%);
        transform: translate(-1.7132038303%, -0.2072154219%);
    }
    18% {
        clip-path: polygon(0% 26.8437128711%, 100% 26.8437128711%, 100% 35.300749415%, 0% 35.300749415%);
        transform: translate(-2.2299160653%, -0.0532406596%);
    }
    20%, 100% {
        clip-path: none;
        transform: none;
    }
}
.glitch .channel {
    mix-blend-mode: screen;
}
.glitch .channel::before {
    bottom: 0;
    content: "";
    display: block;
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}
.glitch .r {
    animation: rgb-shift-r 3s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-r {
    0% {
        transform: translate(0.7322039572%, -0.4276093924%);
    }
    2% {
        transform: translate(0.8127055324%, -0.0156246598%);
    }
    4% {
        transform: translate(0.7178928367%, -0.1740112889%);
    }
    6% {
        transform: translate(1.248916718%, -0.1058856284%);
    }
    8% {
        transform: translate(0.7991042588%, -0.1874169671%);
    }
    10% {
        transform: translate(-0.7148567715%, 0.2809853283%);
    }
    12% {
        transform: translate(-0.2222943826%, -0.4566778255%);
    }
    14% {
        transform: translate(1.3898838202%, 0.0203783916%);
    }
    16% {
        transform: translate(-1.1667044599%, 0.154723417%);
    }
    18% {
        transform: translate(1.3129884131%, 0.1802339394%);
    }
    20%, 100% {
        transform: none;
    }
}
.glitch .r::before {
    background: #f00;
}
.glitch .g {
    animation: rgb-shift-g 3s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-g {
    0% {
        transform: translate(-0.4584695378%, 0.4533266338%);
    }
    2% {
        transform: translate(0.8330061414%, -0.1532651629%);
    }
    4% {
        transform: translate(0.5966326215%, 0.0034795394%);
    }
    6% {
        transform: translate(-1.397853374%, 0.1890320881%);
    }
    8% {
        transform: translate(-1.9192535509%, -0.2809396324%);
    }
    10% {
        transform: translate(1.5891455869%, 0.0006154019%);
    }
    12% {
        transform: translate(0.5157350388%, 0.1305134894%);
    }
    14% {
        transform: translate(1.4802512505%, 0.4049031252%);
    }
    16% {
        transform: translate(-1.9543780164%, 0.1295113882%);
    }
    18% {
        transform: translate(-1.8777577204%, -0.4110513105%);
    }
    20%, 100% {
        transform: none;
    }
}
.glitch .g::before {
    background: #0f0;
}
.glitch .b {
    animation: rgb-shift-b 3s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-b {
    0% {
        transform: translate(0.5027056981%, 0.4064328768%);
    }
    2% {
        transform: translate(-0.9714660459%, 0.4929774217%);
    }
    4% {
        transform: translate(-0.9265823451%, -0.3421559842%);
    }
    6% {
        transform: translate(-1.6742532402%, 0.2866939259%);
    }
    8% {
        transform: translate(0.2489139183%, 0.2028454493%);
    }
    10% {
        transform: translate(-0.229537343%, -0.247774898%);
    }
    12% {
        transform: translate(1.5448884126%, -0.4494805715%);
    }
    14% {
        transform: translate(-0.3412063046%, 0.1856603367%);
    }
    16% {
        transform: translate(1.5714445733%, 0.0783504094%);
    }
    18% {
        transform: translate(1.7945182366%, 0.2464229882%);
    }
    20%, 100% {
        transform: none;
    }
}
.glitch .b::before {
    background: #00f;
}


.palette-card-color{
    height: 50px;
    margin-right: 10px;
}