.darkMode {
    
    .body-color {
        background-color: #222  !important;
    }
    
    .section-name {
        color: whitesmoke;
    }
    
    .nav-container {
        background-color: rgb(169, 57, 57)  !important;
        color: white;
    }
    .nav-links a{
        color: white;
    }
    .nav-links a:hover{
        color: yellow;
    }
    .aboutme-section{
        font-family: "Source Code Pro";
        color: #c97b7b;
    }
    .project-card {
        background-color: #1f2f34; 
           color: white;
    }
    .project-card:hover {
        background-color: #254955; 
    }
    .aboutme-section .secondary-header {
        color: white !important;
    }
    .aboutme-section .secondary-header:hover {
        color: white !important;
    }
    .secondary-header {
        color: rgb(203, 60, 41) !important;
    }
    .secondary-header:hover {
        color: rgb(212, 124, 124) !important;
    }
    .project-links {
        color: rgba(240, 215, 19, 0.846);
    }
    .project-links:hover {
        color: rgba(231, 69, 20, 0.846);
    }
    
    .project-btn{
        background-color: #ffffff;
        border: 3px black solid;
        background: url("../imgs/plus-sign.png") no-repeat center center white;
        background-size: 30px;
        background-position: center;
        background-position-x: center;
    }
    
    .project-btn:hover{
        opacity: .2;
    }
}





.lightMode {
.body-color {
        background-color: #FFFBE7 !important;
}
.section-name {
    color: black;
}

.nav-container {
    background-color: #222  !important;
}

.aboutme-section{
    font-family: "Source Code Pro";
    color: #c97b7b; /* Dark Mode*/

    color: black !important;
}
.project-card {
    /* background-color: #1f2f34;  darkmode 
       color: white;*/
       background-color: #f5db99; /* Light Mode */
       color: rgb(201, 123, 123);
}
.project-card:hover {
    /* background-color: #254955; darkmode */
    background-color: #FFEECB;
}
.aboutme-section .secondary-header {
    color:black  !important;
}
.aboutme-section .secondary-header:hover {
    color: black !important;
}
.secondary-header {
    color: rgb(13, 110, 253) !important;
}
.secondary-header:hover{
    color: rgb(9, 204, 243) !important;
}
.project-links {
    color: rgba(235, 98, 24, 0.846);
}
.project-links:hover {
    color: rgba(27, 22, 22, 0.846);
}
.right-border {
    border-color: black;
}
.project-btn{
    color: #453a3a;
    background: url("../imgs/plus-sign.png") no-repeat scroll center center transparent;
    background-size: 30px;
    background-position: center;
    background-position-x: center;
}

}