* {
    --color-windows-11: #0C99E1;
    --color-mac: #000000;
    --color-ubuntu: #dd4814;
    --color-html: #e44d26;
    --color-css: #264de4;
    --color-javascript: #F2BF4F;
    --color-typescript: #3178C6;
    --color-java: #F58219;
    --color-sql: #00BCF2;
    --color-bash: #47B353;
    --color-swift: #F05138;
    --color-python: #FFDE56;
    --color-php: #777BB3;
    --color-cpp: #00599C;
    --color-csharp: #7355DD;
    --color-redstone: #A80700;
    --color-react: #087EA4;
    --color-vue: #41B883;
    --color-ionic: #3880FF;
    --color-fastapi: #009485;
    --color-dotnet: #512BD4;
    --color-mysql: #00758F;
    --color-timescale: #F5FF80;
    --color-mongodb: #00684A;
    --color-firebase: #FF9100;
    --color-apache: #d22128;
    --color-github: #181717;
    --color-vscode: #1F9CF0;
    --color-git: #F05133;
    --color-figma: #2E3038;
    --color-tableau: #1F447E;
    --color-docker: #1D63ED;
    --color-gimp: #5C5645;
    --color-premiere-pro: #00005B;
    --color-xcode: #0A93E9;
    --color-ssl: #4B8B3B;
    --color-webhooks: #FFD166;
    --color-automation: #FF5E78;

    --color-white: #ffffff;
    --color-black: #000000;
}

[data-theme=light] {
    --color-background: #d9d9d9;
    --color-text: rgb(44, 44, 44);
    --color-primary: #2c2c2c;
    --color-secondary: #4e4e4e;
    --color-border: rgba(44, 44, 44, 0.2);
    --color-svg-primary: var(--color-primary);
    --color-footer: #c7c7c7;
    --color-highlight: #f2f2f2;
    --color-highlight-inverted: #383838;
    --color-logo: var(--color-border);
    --color-blur-menu-background: rgba(240, 240, 240, 0.6);
    --color-blur-menu-background-inverted: rgba(44, 44, 44, 0.6);
    --color-blur-main-background: rgba(217, 217, 217, 0.8);
    --brightness: 1;

    --color-type-1: #13ad47;

    --color-type-2: #2c84be;

    --color-type-3: #c54236;

    --color-type-4: #f3b52f;
}

[data-theme=dark] {
    --color-background: #2c2c2c;
    --color-text: #d9d9d9;
    --color-primary: #d9d9d9;
    --color-secondary: #8e8e8e;
    --color-border: rgba(217, 217, 217, 0.2);
    --color-svg-primary: var(--color-primary);
    --color-footer: #353535;
    --color-highlight: #383838;
    --color-highlight-inverted: #f2f2f2;
    --color-logo: var(--color-border);
    --color-blur-menu-background: rgba(53, 53, 53, 0.6);
    --color-blur-menu-background-inverted: rgba(217, 217, 217, 0.6);
    --color-blur-main-background: rgba(44, 44, 44, 0.8);
    --brightness: 0.8;

    --color-type-1: #25cc5d;

    --color-type-2: #0f91e7;

    --color-type-3: #ff6f61;

    --color-type-4: #f2bf4f;
}

.border-white {
    border-color: var(--color-white);
}

.border-black {
    border-color: var(--color-black);
}

/* Github */
[data-theme=light] #github path {
    fill: rgb(31, 35, 40)
}

[data-theme=dark] #github path {
    fill: rgb(230, 237, 243)
}

.border-main {
    border: 1px solid var(--color-border);
}

.fill-dark {
    fill: var(--color-primary);
}

.fill-color-type-1 {
    fill: var(--color-type-1);
}

.fill-color-type-2 {
    fill: var(--color-type-2);
}

.fill-color-type-3 {
    fill: var(--color-type-3);
}

.fill-color-type-4 {
    fill: var(--color-type-4);
}

.bg-color-type-1 {
    background-color: var(--color-type-1);
}

.bg-color-type-2 {
    background-color: var(--color-type-2);
}

.bg-color-type-3 {
    background-color: var(--color-type-3);
}

.bg-color-type-4 {
    background-color: var(--color-type-4);
}

.color-type-1,
.hover\:color-type-1,
.color-type-2,
.hover\:color-type-2,
.color-type-3,
.hover\:color-type-3,
.color-type-4,
.hover\:color-type-4,
.faded-windows-11,
.hover\:faded-windows-11,
.faded-mac,
.hover\:faded-mac,
.faded-ubuntu,
.hover\:faded-ubuntu,
.faded-html,
.hover\:faded-html,
.faded-css,
.hover\:faded-css,
.faded-javascript,
.hover\:faded-javascript,
.faded-typescript,
.hover\:faded-typescript,
.faded-java,
.hover\:faded-java,
.faded-sql,
.hover\:faded-sql,
.faded-bash,
.hover\:faded-bash,
.faded-swift,
.hover\:faded-swift,
.faded-python,
.hover\:faded-python,
.faded-php,
.hover\:faded-php,
.faded-cpp,
.hover\:faded-cpp,
.faded-csharp,
.hover\:faded-csharp,
.faded-redstone,
.hover\:faded-redstone,
.faded-react,
.hover\:faded-react,
.faded-vue,
.hover\:faded-vue,
.faded-ionic,
.hover\:faded-ionic,
.faded-fastapi,
.hover\:faded-fastapi,
.faded-dotnet,
.hover\:faded-dotnet,
.faded-mysql,
.hover\:faded-mysql,
.faded-timescale,
.hover\:faded-timescale,
.faded-mongodb,
.hover\:faded-mongodb,
.faded-firebase,
.hover\:faded-firebase,
.faded-apache,
.hover\:faded-apache,
.faded-github,
.hover\:faded-github,
.faded-vscode,
.hover\:faded-vscode,
.faded-git,
.hover\:faded-git,
.faded-figma,
.hover\:faded-figma,
.faded-tableau,
.hover\:faded-tableau,
.faded-docker,
.hover\:faded-docker,
.faded-gimp,
.hover\:faded-gimp,
.faded-premiere-pro,
.hover\:faded-premiere-pro,
.faded-xcode,
.hover\:faded-xcode,
.faded-ssl,
.hover\:faded-ssl,
.faded-webhooks,
.hover\:faded-webhooks,
.faded-automation,
.hover\:faded-automation
{
    position: relative;
    overflow: hidden;
}

.color-type-1::before,
.hover\:color-type-1::before,
.color-type-2::before,
.hover\:color-type-2::before,
.color-type-3::before,
.hover\:color-type-3::before,
.color-type-4::before,
.hover\:color-type-4::before,
.faded-windows-11::before,
.hover\:faded-windows-11::before,
.faded-mac::before,
.hover\:faded-mac::before,
.faded-ubuntu::before,
.hover\:faded-ubuntu::before,
.faded-html::before,
.hover\:faded-html::before,
.faded-css::before,
.hover\:faded-css::before,
.faded-javascript::before,
.hover\:faded-javascript::before,
.faded-typescript::before,
.hover\:faded-typescript::before,
.faded-java::before,
.hover\:faded-java::before,
.faded-sql::before,
.hover\:faded-sql::before,
.faded-bash::before,
.hover\:faded-bash::before,
.faded-swift::before,
.hover\:faded-swift::before,
.faded-python::before,
.hover\:faded-python::before,
.faded-php::before,
.hover\:faded-php::before,
.faded-cpp::before,
.hover\:faded-cpp::before,
.faded-csharp::before,
.hover\:faded-csharp::before,
.faded-redstone::before,
.hover\:faded-redstone::before,
.faded-react::before,
.hover\:faded-react::before,
.faded-vue::before,
.hover\:faded-vue::before,
.faded-ionic::before,
.hover\:faded-ionic::before,
.faded-fastapi::before,
.hover\:faded-fastapi::before,
.faded-dotnet::before,
.hover\:faded-dotnet::before,
.faded-mysql::before,
.hover\:faded-mysql::before,
.faded-timescale::before,
.hover\:faded-timescale::before,
.faded-mongodb::before,
.hover\:faded-mongodb::before,
.faded-firebase::before,
.hover\:faded-firebase::before,
.faded-apache::before,
.hover\:faded-apache::before,
.faded-github::before,
.hover\:faded-github::before,
.faded-vscode::before,
.hover\:faded-vscode::before,
.faded-git::before,
.hover\:faded-git::before,
.faded-figma::before,
.hover\:faded-figma::before,
.faded-tableau::before,
.hover\:faded-tableau::before,
.faded-docker::before,
.hover\:faded-docker::before,
.faded-gimp::before,
.hover\:faded-gimp::before,
.faded-premiere-pro::before,
.hover\:faded-premiere-pro::before,
.faded-xcode::before,
.hover\:faded-xcode::before,
.faded-ssl::before,
.hover\:faded-ssl::before,
.faded-webhooks::before,
.hover\:faded-webhooks::before,
.faded-automation::before,
.hover\:faded-automation::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.1;
}

/* Default background color for type buttons */
.color-type-1[data-btn-selected="false"]::before,
.color-type-2[data-btn-selected="false"]::before,
.color-type-3[data-btn-selected="false"]::before,
.color-type-4[data-btn-selected="false"]::before {
    background-color: transparent;
}

/* Default fill color for type buttons */
.color-type-1[data-btn-selected="false"] svg,
.color-type-2[data-btn-selected="false"] svg,
.color-type-3[data-btn-selected="false"] svg,
.color-type-4[data-btn-selected="false"] svg {
    fill: var(--color-primary);
    opacity: 0.5;
}

/* Dedicated background color for type buttons */
.color-type-1[data-btn-selected="true"]::before {
    background-color: var(--color-type-1);
}

.color-type-2[data-btn-selected="true"]::before {
    background-color: var(--color-type-2);
}

.color-type-3[data-btn-selected="true"]::before {
    background-color: var(--color-type-3);
}

.color-type-4[data-btn-selected="true"]::before {
    background-color: var(--color-type-4);
}

/* Dedicated fill color for type buttons */
.color-type-1[data-btn-selected="true"] svg {
    fill: var(--color-type-1);
    opacity: 1;
}

.color-type-2[data-btn-selected="true"] svg {
    fill: var(--color-type-2);
    opacity: 1;
}

.color-type-3[data-btn-selected="true"] svg {
    fill: var(--color-type-3);
    opacity: 1;
}

.color-type-4[data-btn-selected="true"] svg {
    fill: var(--color-type-4);
    opacity: 1;
}

@media (hover: hover) {

    .color-type-1:hover::before,
    .color-type-2:hover::before,
    .color-type-3:hover::before,
    .color-type-4:hover::before {
        opacity: 0.05;
    }

    .color-type-1:hover::before {
        background-color: var(--color-type-1);
    }

    .color-type-2:hover::before {
        background-color: var(--color-type-2);
    }

    .color-type-3:hover::before {
        background-color: var(--color-type-3);
    }

    .color-type-4:hover::before {
        background-color: var(--color-type-4);
    }
}

.color-type-1::before {
    background-color: var(--color-type-1);
}

.color-type-2::before {
    background-color: var(--color-type-2);
}

.color-type-3::before {
    background-color: var(--color-type-3);
}

.color-type-4::before {
    background-color: var(--color-type-4);
}
.color-windows-11 {
    color: var(--color-windows-11);
}

.bg-windows-11,
.faded-windows-11::before,
.hover\:faded-windows-11:hover::before {
    background-color: var(--color-windows-11);
}

.border-windows-11,
.hover\:border-windows-11:hover {
    border: 1px solid var(--color-windows-11);
}

.color-mac {
    color: var(--color-mac);
}

.bg-mac,
.faded-mac::before,
.hover\:faded-mac:hover::before {
    background-color: var(--color-mac);
}

.border-mac,
.hover\:border-mac:hover {
    border: 1px solid var(--color-mac);
}

.color-ubuntu {
    color: var(--color-ubuntu);
}

.bg-ubuntu,
.faded-ubuntu::before,
.hover\:faded-ubuntu:hover::before {
    background-color: var(--color-ubuntu);
}

.border-ubuntu,
.hover\:border-ubuntu:hover {
    border: 1px solid var(--color-ubuntu);
}

.color-html {
    color: var(--color-html);
}

.bg-html,
.faded-html::before,
.hover\:faded-html:hover::before {
    background-color: var(--color-html);
}

.border-html,
.hover\:border-html:hover {
    border: 1px solid var(--color-html);
}

.color-css {
    color: var(--color-css);
}

.bg-css,
.faded-css::before,
.hover\:faded-css:hover::before {
    background-color: var(--color-css);
}

.border-css,
.hover\:border-css:hover {
    border: 1px solid var(--color-css);
}

.color-javascript,
.hover\:color-javascript:hover {
    color: var(--color-javascript);
}

.bg-javascript,
.faded-javascript::before,
.hover\:faded-javascript:hover::before {
    background-color: var(--color-javascript);
}

.border-javascript,
.hover\:border-javascript:hover {
    border: 1px solid var(--color-javascript);
}

.color-typescript {
    color: var(--color-typescript);
}

.bg-typescript,
.faded-typescript::before,
.hover\:faded-typescript:hover::before {
    background-color: var(--color-typescript);
}

.border-typescript,
.hover\:border-typescript:hover {
    border: 1px solid var(--color-typescript);
}

.color-java {
    color: var(--color-java);
}

.bg-java,
.faded-java::before,
.hover\:faded-java:hover::before {
    background-color: var(--color-java);
}

.border-java,
.hover\:border-java:hover {
    border: 1px solid var(--color-java);
}

.color-sql {
    color: var(--color-sql);
}

.bg-sql,
.faded-sql::before,
.hover\:faded-sql:hover::before {
    background-color: var(--color-sql);
}

.border-sql,
.hover\:border-sql:hover {
    border: 1px solid var(--color-sql);
}

.color-bash {
    color: var(--color-bash);
}

.bg-bash,
.faded-bash::before,
.hover\:faded-bash:hover::before {
    background-color: var(--color-bash);
}

.border-bash,
.hover\:border-bash:hover {
    border: 1px solid var(--color-bash);
}

.color-swift {
    color: var(--color-swift);
}

.bg-swift,
.faded-swift::before,
.hover\:faded-swift:hover::before {
    background-color: var(--color-swift);
}

.border-swift,
.hover\:border-swift:hover {
    border: 1px solid var(--color-swift);
}

.color-python {
    color: var(--color-python);
}

.bg-python,
.faded-python::before,
.hover\:faded-python:hover::before {
    background-color: var(--color-python);
}

.border-python,
.hover\:border-python:hover {
    border: 1px solid var(--color-python);
}

.color-php {
    color: var(--color-php);
}

.bg-php,
.faded-php::before,
.hover\:faded-php:hover::before {
    background-color: var(--color-php);
}

.border-php,
.hover\:border-php:hover {
    border: 1px solid var(--color-php);
}

.color-cpp {
    color: var(--color-cpp);
}

.bg-cpp,
.faded-cpp::before,
.hover\:faded-cpp:hover::before {
    background-color: var(--color-cpp);
}

.border-cpp,
.hover\:border-cpp:hover {
    border: 1px solid var(--color-cpp);
}

.color-csharp {
    color: var(--color-csharp);
}

.bg-csharp,
.faded-csharp::before,
.hover\:faded-csharp:hover::before {
    background-color: var(--color-csharp);
}

.border-csharp,
.hover\:border-csharp:hover {
    border: 1px solid var(--color-csharp);
}

.color-redstone {
    color: var(--color-redstone);
}

.bg-redstone,
.faded-redstone::before,
.hover\:faded-redstone:hover::before {
    background-color: var(--color-redstone);
}

.border-redstone,
.hover\:border-redstone:hover {
    border: 1px solid var(--color-redstone);
}

.color-react {
    color: var(--color-react);
}

.bg-react,
.faded-react::before,
.hover\:faded-react:hover::before {
    background-color: var(--color-react);
}

.border-react,
.hover\:border-react:hover {
    border: 1px solid var(--color-react);
}

.color-vue {
    color: var(--color-vue);
}

.bg-vue,
.faded-vue::before,
.hover\:faded-vue:hover::before {
    background-color: var(--color-vue);
}

.border-vue,
.hover\:border-vue:hover {
    border: 1px solid var(--color-vue);
}

.color-ionic {
    color: var(--color-ionic);
}

.bg-ionic,
.faded-ionic::before,
.hover\:faded-ionic:hover::before {
    background-color: var(--color-ionic);
}

.border-ionic,
.hover\:border-ionic:hover {
    border: 1px solid var(--color-ionic);
}

.color-fastapi {
    color: var(--color-fastapi);
}

.bg-fastapi,
.faded-fastapi::before,
.hover\:faded-fastapi:hover::before {
    background-color: var(--color-fastapi);
}

.border-fastapi,
.hover\:border-fastapi:hover {
    border: 1px solid var(--color-fastapi);
}

.color-dotnet {
    color: var(--color-dotnet);
}

.bg-dotnet,
.faded-dotnet::before,
.hover\:faded-dotnet:hover::before {
    background-color: var(--color-dotnet);
}

.border-dotnet,
.hover\:border-dotnet:hover {
    border: 1px solid var(--color-dotnet);
}

.color-mysql {
    color: var(--color-mysql);
}

.bg-mysql,
.faded-mysql::before,
.hover\:faded-mysql:hover::before {
    background-color: var(--color-mysql);
}

.border-mysql,
.hover\:border-mysql:hover {
    border: 1px solid var(--color-mysql);
}

.color-timescale {
    color: var(--color-timescale);
}

.bg-timescale,
.faded-timescale::before,
.hover\:faded-timescale:hover::before {
    background-color: var(--color-timescale);
}

.border-timescale,
.hover\:border-timescale:hover {
    border: 1px solid var(--color-timescale);
}

.color-mongodb {
    color: var(--color-mongodb);
}

.bg-mongodb,
.faded-mongodb::before,
.hover\:faded-mongodb:hover::before {
    background-color: var(--color-mongodb);
}

.border-mongodb,
.hover\:border-mongodb:hover {
    border: 1px solid var(--color-mongodb);
}

.color-firebase {
    color: var(--color-firebase);
}

.bg-firebase,
.faded-firebase::before,
.hover\:faded-firebase:hover::before {
    background-color: var(--color-firebase);
}

.border-firebase,
.hover\:border-firebase:hover {
    border: 1px solid var(--color-firebase);
}

.color-apache {
    color: var(--color-apache);
}

.bg-apache,
.faded-apache::before,
.hover\:faded-apache:hover::before {
    background-color: var(--color-apache);
}

.border-apache,
.hover\:border-apache:hover {
    border: 1px solid var(--color-apache);
}

.color-github {
    color: var(--color-github);
}

.bg-github,
.faded-github::before,
.hover\:faded-github:hover::before {
    background-color: var(--color-github);
}

.border-github, 
.hover\:border-github:hover {
    border: 1px solid var(--color-github);
}

.color-vscode {
    color: var(--color-vscode);
}

.bg-vscode,
.faded-vscode::before,
.hover\:faded-vscode:hover::before {
    background-color: var(--color-vscode);
}

.border-vscode,
.hover\:border-vscode:hover {
    border: 1px solid var(--color-vscode);
}

.color-git {
    color: var(--color-git);
}

.bg-git,
.faded-git::before,
.hover\:faded-git:hover::before {
    background-color: var(--color-git);
}

.border-git,
.hover\:border-git:hover {
    border: 1px solid var(--color-git);
}

.color-figma {
    color: var(--color-figma);
}

.bg-figma,
.faded-figma::before,
.hover\:faded-figma:hover::before {
    background-color: var(--color-figma);
}

.border-figma,
.hover\:border-figma:hover {
    border: 1px solid var(--color-figma);
}

.color-tableau {
    color: var(--color-tableau);
}

.bg-tableau,
.faded-tableau::before,
.hover\:faded-tableau:hover::before {
    background-color: var(--color-tableau);
}

.border-tableau,
.hover\:border-tableau:hover {
    border: 1px solid var(--color-tableau);
}

.color-docker {
    color: var(--color-docker);
}

.bg-docker,
.faded-docker::before,
.hover\:faded-docker:hover::before {
    background-color: var(--color-docker);
}

.border-docker,
.hover\:border-docker:hover {
    border: 1px solid var(--color-docker);
}

.color-gimp {
    color: var(--color-gimp);
}

.bg-gimp,
.faded-gimp::before,
.hover\:faded-gimp:hover::before {
    background-color: var(--color-gimp);
}

.border-gimp,
.hover\:border-gimp:hover {
    border: 1px solid var(--color-gimp);
}

.color-premiere-pro {
    color: var(--color-premiere-pro);
}

.bg-premiere-pro,
.faded-premiere-pro::before,
.hover\:faded-premiere-pro:hover::before {
    background-color: var(--color-premiere-pro);
}

.border-premiere-pro,
.hover\:border-premiere-pro:hover {
    border: 1px solid var(--color-premiere-pro);
}

.color-xcode {
    color: var(--color-xcode);
}

.bg-xcode,
.faded-xcode::before,
.hover\:faded-xcode:hover::before {
    background-color: var(--color-xcode);
}

.border-xcode,
.hover\:border-xcode:hover {
    border: 1px solid var(--color-xcode);
}

.color-ssl {
    color: var(--color-ssl);
}

.bg-ssl,
.faded-ssl::before,
.hover\:faded-ssl:hover::before {
    background-color: var(--color-ssl);
}

.border-ssl,
.hover\:border-ssl:hover {
    border: 1px solid var(--color-ssl);
}

.color-webhooks {
    color: var(--color-webhooks);
}

.bg-webhooks,
.faded-webhooks::before,
.hover\:faded-webhooks:hover::before {
    background-color: var(--color-webhooks);
}

.border-webhooks,
.hover\:border-webhooks:hover {
    border: 1px solid var(--color-webhooks);
}

.color-automation {
    color: var(--color-automation);
}

.bg-automation,
.faded-automation::before,
.hover\:faded-automation:hover::before {
    background-color: var(--color-automation);
}

.border-automation,
.hover\:border-automation:hover {
    border: 1px solid var(--color-automation);
}