@media (prefers-color-scheme: dark) {
    :root{
        --bg: #202020;
            
        --text: #a0a0a0;
        --text2: #1a1a1a;

        --bg-header: rgba(53, 53, 53, 0.6);

        --logo: './img/logo/mini logo a0.png';

        --btn-bg: #878787;
        --btn-bg-hover: #6e6e6e;

        --prj-mini-bg: #353535;
        --prj-mini-bg-hover: #2c2b2b;
        --prj-mini-bg-dark: #d9d9d9;
        --prj-mini-bg-hover-dark: #a0a0a0;

        --pMITexrMore-text: #787878;
    }

    ::selection {background-color: #bebebe; color: #202020;}

    .navbar a, .navbar p{color: var(--text);}
    .burgerMenu span{background-color: var(--text);}

    footer {background-color: var(--prj-mini-bg);}
    .fLanguage a{color: var(--text2);}
    .fMenu a, .fBigText h1{color: var(--text);}
    .fMenu a::after{background: var(--text);}

    .pMITech{background-color: #444242;}
    .pMITech p{color: #a59f9f;}

    .pTitle h1 {color: var(--text2);}
    .pTitle svg {background-color: var(--text);}
    .pCardMain:hover svg{background-color: var(--text2);}
    .pCardMain:hover svg path {stroke: var(--text);}

    .cookieContent{background-color: rgba(42, 42, 42, 0.85);}
    .cookieContent h2{color: #e0e0e0;}
    .cookieContent p.cookieText{color: #b0b0b0;}
    .cookieTooltip{background: #2a2a2a; color: #b0b0b0;}
    .cookieTooltip::after{border-color: #2a2a2a transparent transparent transparent;}
    .cAccept{
        background-color: #4a4a4a;
        color: #e0e0e0;
        border: 1px solid #5a5a5a;
        &:hover{background-color: #5a5a5a;}
    }
    .cDecline{
        background-color: transparent;
        color: #b0b0b0;
        &:hover{background-color: rgba(255, 255, 255, 0.05);}
    }
    .cCloseBtn span{background: #b0b0b0;}

    .changeLangContent{background-color: rgba(42, 42, 42, 0.85);}
    .changeLangContent h2{color: #e0e0e0;}
    .changeLangContent select{background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");}
    .changeLangContent select, .nextCL{background-color: #4a4a4a; color: #e0e0e0;}
    .changeLangContent .nextCL:hover{background-color: #5a5a5a;}
    .closeBtnCL span{background: #b0b0b0;}
    
    svg.scrollSvg path{stroke: #e0e0e0;}
    .aContainer h1,
    .aContainer h2,
    .aContainer p{color: #acacac;}
    
    .pContainer h1,
    .pContainer p,
    .pTech {color: #acacac;}

    .cIcon, .cGithub{background-color: #bbbbbb;}
    .cIcon svg{fill: #1a1a1a;}
    .cGithub svg{color: #1a1a1a;}
    .cContainer a h2{color: #373737;}

    .changeTheme p{color: #a0a0a0;}
    .changeThemeBtn .icon svg {color: #a0a0a0}


    .card{
        box-shadow: 0 0 40px rgba(89, 89, 89, 0.2), 
                    0 0 40px rgba(70, 70, 70, 0.15);
    }



    .btnPrj, .sortPrj select{background-color: #a0a0a0; color: #202020;}
    .titleLine h2{color: #acacac;}
    .filterBtn svg{fill: #acacac;}
    .totalPrj:hover::before{    
        background-color: #a0a0a0;
        color: #202020;
    }
    .filterClose span{background-color: #a0a0a0;}
    .sliderBg{background: #202020;}
    .filterPrj{background: rgba(42, 42, 42, 0.8);}
    #allPrjBtn.active, 
    #frontPrjBtn.active, 
    #backPrjBtn.active,
    #fullPrjBtn.active{
        background: linear-gradient(135deg, #a0a0a0, #c9c9c9);
        color: #1a1a1a;
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
        transform: scale(1.09);
    }

    .searchPrj{background-color: rgba(33, 33, 33, 0.9);}
    .searchPrj input {background-color: rgba(18, 18, 18, 0.9); color: rgba(108, 107, 107, 0.9);}
    .searchPrj input:focus {background-color: rgba(11, 11, 11, 0.9);}
    .searchPrj input::placeholder {color: rgba(108, 107, 107, 0.9);}
    .searchInput input.active{background: rgba(5, 5, 5, 0.9); &:focus{background: rgba(13, 13, 13, 0.9);}}
    .searchInput:has(input.active:focus) button {background-color: rgba(13, 13, 13, 0.9);}
    .searchInput:has(input:focus) button {background-color: rgba(11, 11, 11, 0.9);}
    .searchPrj button{background-color: rgba(18, 18, 18, 0.9); color: #f0f0f5;}
    .btnPrjSearch.active{background-color: rgba(5, 5, 5, 0.9);}
    .searchOptions a, .searchOptions p{color: #a0a0a0;}
    
    .searchPrj button svg{fill: rgba(108, 107, 107, 0.9);}
    .navSwitch{background-color: #a0a0a0;}
    .navBtn{color: #202020; &.active{color: #a0a0a0;}}

    .FilterAvailability .btnAFilter{
        background: rgba(160, 160, 160, 0.15);
        color: #a0a0a0;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        &:hover{background: rgba(200, 200, 200, 0.25); color: #fff; transform: scale(1.05);}
    }

    .FilterAvailability .btnAFilter.active{
        background: linear-gradient(135deg, #a0a0a0, #c9c9c9);
        color: #1a1a1a;
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
    }

    .projects.err h1, .projectsLive h1{color: #a0a0a0;}


    .prjError h1 {color: #a0a0a0;}
    .prjImage{background-color: #1a1a1a;}
    .prjImageTablet, .prjImageMobile{background-color: #1a1a1a;}

    .btnsSlider {
        background: rgba(20, 20, 20, 0.3);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
    
    .btnsSlider button {color: #fff;}
    .btnsSlider button:hover {background: rgba(255, 255, 255, 0.15);}
    .prjSliderDot {background-color: rgba(200, 200, 200, 0.3);}
    
    .prjSliderDot.active {
        background-color: #fff;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    }

    .prjMoreImages.noData{background-color: #1a1a1a;}
    .prjMoreImages.noData h1{color: #a0a0a0;}
    
    .prjImageTablet span,
    .prjImageMobile span {
        background: rgba(20, 20, 20, 0.3);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        color: #fff;
    }

    .prjRight {color: #acacac;}

    .prjBack{
        color: #a0a0a0;
        background-color: rgba(172, 172, 172, 0.2); 
    }

    .prjBack::before, .mediaTitle a {color: #a0a0a0;}
    .prjBack:hover::before {color: #d9d9d9;}
    .prjRight h1, .mediaTitle h1 {color: #a0a0a0;}
    .prjRight h1::after {background: linear-gradient(90deg, #a0a0a0, transparent);}

    .prjTitle2 h2 {
        background-color: #111111; 
        color: #a0a0a0;
    }

    .prjInfo p{color: #7c7c7c;}

    .prjNavbar li:nth-child(3){
        background-color: rgba(172, 172, 172, 0.2); 
        & a::after{content: 'Back'; color: var(--text); position: relative;}
    }

    .prjRight p {color: #a6a6a6;}
    .prjRight p strong {color: #d9d9d9;}
    .prjRight p strong::after {background-color: rgba(172, 172, 172, 0.3);}
    .prjFeatures {color: #acacac;}
    .prjFeature i {color: #a0a0a0;}
    .prjFeature h3 {color: #d9d9d9;}
    .prjFeature p {color: #7d7d7d;}

    

    .prjWebsite{
        background-color: #878787;
        color: #1a1a1a;
    }

    .prjGithub{
        background-color: #404040;
        color: #a0a0a0;
    }

    .prjWebsite:hover {background-color: #6e6e6e;}
    .prjGithub:hover {background-color: #383838;}


    .aInfo{background-color: #313131;}
    .aSkill{background-color: #1a1a1a;}

    
}