body[data-theme="dark"] {
    --custom-cursor: default;
    --custom-pointer: pointer;
    --custom-write: text;
    --paragraph: 16px;
    --exp-par: 12px;
    --main-color: #222222;
    --secondary-color: #3f3f3f;
    --card-bg-color: #a0a0a06d;
    --devCardColor: #f6f6f619;
    --form-bg: linear-gradient(45deg, #74747469, #969696);
    --form-h3: 2px 2px 2px rgba(0, 0, 0, 0.676);
    --form-labels: rgb(193, 193, 193);
    --submit-button: linear-gradient(90deg, #181818, #000000);
    --submit-hover: #181b1b;
    --text-color: white;
    --header-color: white;
    --linkText: rgba(164, 164, 164, 0.774);
    --theme-switch: #000;
    --theme-switch-active: #7a7a7a;
    --nav-text-active: white;
    --nav-text: rgb(120, 120, 120);
    --welcome-shadow:0 0 5px rgba(215, 218, 219, 0.5), 
    0 0 10px rgba(177, 188, 209, 0.5), 
    0 0 20px rgba(108, 118, 123, 0.5), 
    0 0 40px rgba(239, 239, 239, 0.5), 
    0 0 80px rgba(250, 252, 251, 0.5);
}

body[data-theme="light"] {
    --custom-cursor: default;
    --custom-pointer: pointer;
    --custom-write: text;
    --paragraph: 16px;
    --exp-par: 12px;
    --main-color: rgb(243, 243, 243);
    --secondary-color: rgb(177, 177, 177);
    --card-bg-color: #c9c9c96d;
    --devCardColor: #00000019;
    --form-bg: linear-gradient(45deg, #ffffff69, #e8e8e8);
    --form-h3: 2px 2px 2px rgba(111, 111, 111, 0.816);
    --form-labels: rgb(131, 131, 131);
    --submit-button: linear-gradient(90deg, #888888, #a4a4a4);
    --submit-hover: #a5a5a5;
    --text-color: black;
    --header-color: black;
    --linkText: rgba(164, 164, 164, 0.774);
    --theme-switch: #bbb;
    --theme-switch-active: #ddd;
    --nav-text-active: rgb(35, 35, 35);
    --nav-text: rgb(120, 120, 120);
    --welcome-shadow:0 0 5px rgba(89, 89, 89, 0.5), 
    0 0 10px rgba(134, 134, 136, 0.5), 
    0 0 20px rgba(176, 178, 180, 0.5), 
    0 0 40px rgba(72, 72, 72, 0.5), 
    0 0 80px rgba(16, 16, 16, 0.5);
}
  
body[data-theme="forest"] {
    --custom-cursor: default;
    --custom-pointer: pointer;
    --custom-write: text;
    --paragraph: 16px;
    --exp-par: 12px;
    --main-color: rgb(0, 44, 3);
    --secondary-color: rgb(40, 100, 35);
    --card-bg-color: #14b23b6d;
    --devCardColor: #00ff2219;
    --form-bg: linear-gradient(45deg, #2b6b1969, #6e974c);
    --form-h3: 2px 2px 2px rgba(145, 255, 175, 0.816);
    --form-labels: rgb(208, 208, 208);
    --submit-button: linear-gradient(90deg, #234d29, #02903b);
    --submit-hover: #96b509;
    --text-color: white;
    --header-color: rgb(215, 215, 215);
    --linkText: rgba(164, 164, 164, 0.774);
    --theme-switch: #196402;
    --theme-switch-active: #59c719;
    --nav-text-active: rgb(235, 235, 235);
    --nav-text: rgb(163, 163, 163);
    --welcome-shadow:0 0 5px rgba(136, 255, 46, 0.5), 
    0 0 10px rgba(89, 251, 97, 0.5), 
    0 0 20px rgba(161, 246, 133, 0.5), 
    0 0 40px rgba(16, 107, 6, 0.5), 
    0 0 80px rgba(0, 115, 23, 0.5);
}
  
body[data-theme="warm"] {
    --custom-cursor: default;
    --custom-pointer: pointer;
    --custom-write: text;
    --paragraph: 16px;
    --exp-par: 12px;
    /* --main-color: rgb(155, 72, 27); */
    --main-color: rgb(167, 15, 15);
    /* --secondary-color: rgba(228, 218, 31); */
    --secondary-color: black;
    --card-bg-color: #5555556d;
    --devCardColor: #5555556d;
    --form-bg: linear-gradient(45deg, #711a1a, #963900);
    --form-h3: 2px 2px 2px rgba(255, 151, 145, 0.816);
    --form-labels: rgb(255, 233, 184);
    --submit-button: #740000;
    --submit-hover: #ff4949c4;
    --text-color: white;
    --header-color: rgb(215, 215, 215);
    --linkText: rgba(164, 164, 164, 0.774);
    --theme-switch: #642c02;
    --theme-switch-active: #b6a509;
    --nav-text-active: rgb(235, 235, 235);
    --nav-text: rgb(163, 163, 163);
    --welcome-shadow:1px 1px 2px rgba(255, 151, 145, 0.816), 
    0 0 10px rgba(89, 237, 251, 0.5), 
    0 0 20px rgba(133, 225, 246, 0.5), 
    0 0 40px rgba(6, 35, 107, 0.5), 
    0 0 80px rgba(115, 29, 0, 0.5);
    
    .exp-container{
        background-color: #525b0031;
    }
    .exp-container:hover{
        background-color: #e1ff0069;
    }

    .accordion-item{
        background: var(--card-bg-color);
    }
    .accordion-item.active{
        background: #0000009e;
    }
    .submit-button:hover {
        background: linear-gradient(90deg, #961b1b, #b00e0e);
    }
    .footer {
        background-image: linear-gradient(var(--main-color), #00000091);
    }
    .cssDiv-toggle{
        background-image: linear-gradient(#893434, #52351f);
    }

    .css-option.active {
        color: white;
    }

    .play-css-div{
        background: #340404;
    }
}

body[data-theme="cold"] {
    --custom-cursor: default;
    --custom-pointer: pointer;
    --custom-write: text;
    --paragraph: 16px;
    --exp-par: 12px;
    --main-color: rgb(27, 114, 155);
    --secondary-color: rgb(21, 163, 210);
    --card-bg-color: #07c4d56d;
    --devCardColor: #00eeff2b;
    --form-bg: linear-gradient(45deg, #2882db69, #00b3d2);
    --form-h3: 2px 2px 2px rgba(145, 255, 246, 0.816);
    --form-labels: rgb(208, 208, 208);
    --submit-button: linear-gradient(90deg, #029087, #263f6d);
    --submit-hover: #4072cf;
    --text-color: white;
    --header-color: rgb(215, 215, 215);
    --linkText: rgba(164, 164, 164, 0.774);
    --theme-switch: #1f6b6e;
    --theme-switch-active: #019588;
    --nav-text-active: rgb(235, 235, 235);
    --nav-text: rgb(163, 163, 163);
    --welcome-shadow:0 0 5px rgba(46, 224, 255, 0.5), 
    0 0 10px rgba(89, 224, 251, 0.5), 
    0 0 20px rgba(133, 195, 246, 0.5), 
    0 0 40px rgba(6, 50, 107, 0.5), 
    0 0 80px rgba(0, 31, 115, 0.5);
}
  

@media screen and (max-width: 1024px) {
    [data-theme="warm"] .nav-buttons{
        background-image: linear-gradient(#893434, #52351f) !important;
    }
}