Welcome to the BlendBlastCSS Demo Page!

Here, you can experience the electrifying power of our revolutionary CSS color framework firsthand. With just a few lines of code, you can infuse your web projects with vibrant, eye-catching colors that will leave your users dazzled and delighted.

Ready to take your designs to the next level? Dive in and discover the endless possibilities of BlendBlastCSS today!

Prepare to embark on a journey of chromatic splendor as you invoke the unparalleled power of BlendBlastCSS with but a single line of HTML incantation!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/edwinm/blend-blast-css/src/blendblast.css">

Behold, fellow digital voyagers, the epitome of web wizardry for this page encapsulated in the code snippet below!

<style>
    body {
        font-family: sans-serif;
        max-width: 80ch;
        margin: auto;
    }

    h1 {
        color: var(--🟥);
    }

    .pop-button {
        color: var(--🟨);
        background-color: color-mix(in lch, var(--🟨) 50%, var(--🟦));
        border-color: color-mix(in lch, var(--🟨) 50%, var(--🟦));
        padding: 15px 20px;
        font-family: "Comic Sans MS", "Brush Script MT", sans-serif;
        font-size: 20px;
    }
    .pop-button:active {
        color: color-mix(in lch, var(--🟥) 50%, var(--🟦));
        background-color: color-mix(in lch, var(--🟨) 80%, var(--🟦));
        border-color: color-mix(in lch, var(--🟨) 80%, var(--🟦));
    }

    .theme1 {
        color: color-mix(in lch, var(--🟫) 20%, var(--⬛));
        background-color: color-mix(in lch, var(--🟫) 10%, var(--⬜));
    }
    .theme2 {
        color: color-mix(in lch, var(--🟨) 20%, var(--🟦));
        background-color: color-mix(in lch, var(--🟥) 20%, var(--⬜));
    }
    .theme3 {
        color: color-mix(in lch, var(--⬜) 90%, var(--⬛));
        background-color: color-mix(in lch, var(--⬜) 10%, var(--⬛));
    }
</style>

Remember, the only limit is your imagination. Let's make some digital magic happen! ✨🎨