/*Dark Mode Button*/
#darkmode-container {
    padding: 10px;
    justify-content: right;
}
#darkmode-container img{
    height: 3vh;
}

/* Dark mode styles */
body.dark-mode{
    background-color: #121212;
    color: #eee;
}
.dark-mode p {
    color: #ccc;
}
.dark-mode #desktop-nav {
    color: #eee;
}
.dark-mode a {
    color: #eee;
    text-decoration-color: #eee;
}
.dark-mode a:hover {
    color: grey;
    text-decoration-color: rgb(181, 181, 181);
}
.dark-mode #nav {
    color: #eee;
}
.dark-mode .icon span {
    background-color: #eee;
}
.dark-mode .menu-links {
    background-color: black;
}
.dark-mode .menu-links a {
    color: white;
}
.dark-mode .btn-1, .dark-mode .btn-2 {
    color: #eee;
    background: black;
    border: rgb(202, 202, 202) 0.1rem solid;
}
.dark-mode .btn-1:hover, .dark-mode .btn-2:hover {
    background: rgb(255, 255, 255);
    color: black;
}
.dark-mode .detail-container {
    background: rgb(5, 5, 5);
    border: rgb(202, 202, 202) 0.1rem solid;
}
.dark-mode .skills-subtitle {
    color: rgb(170, 170, 170);
}
.dark-mode .color-container {
    border-color: rgb(92, 92, 92);
    background: rgb(5, 5, 5);
}
.dark-mode .project-title {
    color: white;
}
.dark-mode .project-btn {
    color: white;
    border-color: rgb(92, 92, 92);
}
.dark-mode .contact-info-upper-container {
    border: rgb(202, 202, 202) 0.1rem solid;
    background: rgb(5, 5, 5);
}
.dark-mode #contact a {
    color: white;
}
.dark-mode .footer li a {
    color: white;
}
.dark-mode #web-project .skills-subtitle {
    color: #ddd;
}
.dark-mode #web-project p, #web-project ul {
    color: #ccc;
}
.dark-mode #web-project li {
    color: #ccc;
}
.dark-mode #web-project a {
    color: #fff;
}
.dark-mode #web-project .web-project-section {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}