/* Spiderman Comic Theme - Dark Mode */
:root {
    --spidey-red: #e23636;
    --spidey-blue: #2b3990;
    --spidey-dark: #0c0c1d;
    --spidey-light: #f5f5f5;
    --comic-yellow: #f7d038;
}

/* Dark mode base styles */
body.dark-mode {
    background-color: var(--spidey-dark);
    color: var(--spidey-light);
    transition: all 0.5s ease;
}

/* hamburger */
body.dark-mode #menu {
  color: var(--spidey-red);
}
/* Theme toggle button */
.theme-toggle {
    position: fixed;
    top: 1.5rem;
    right: 6rem;
    z-index: 1001;
    background: var(--spidey-red);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(226, 54, 54, 0.7);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(226, 54, 54, 0.9);
}

/* Dark mode navbar */
body.dark-mode header {
    background-color: rgba(12, 12, 29, 0.95);
    box-shadow: 0 1px 4px rgba(226, 54, 54, 0.3);
}

body.dark-mode header .logo {
    color: var(--spidey-light);
}

body.dark-mode header .logo:hover {
    color: var(--spidey-red);
}

body.dark-mode header .navbar ul li a {
    color: var(--spidey-light);
}

body.dark-mode header .navbar ul li a.active,
body.dark-mode header .navbar ul li a:hover {
    color: var(--spidey-red);
    border-bottom: 0.2rem solid var(--spidey-red);
}

/* Dark mode hero section */
body.dark-mode .home .content h2 {
    color: var(--spidey-light);
}

body.dark-mode .home .content h2 span {
    color: var(--spidey-red);
}

body.dark-mode .home .content p {
    color: var(--spidey-light);
}

body.dark-mode .home .content p span {
    color: var(--spidey-red);
}

body.dark-mode .home .btn {
    background: var(--spidey-red);
    box-shadow: 0px 5px 18px rgba(226, 54, 54, 0.6);
}

body.dark-mode .home .btn:hover {
    background: #c42a2a;
}

/* Comic book effect for images */
body.dark-mode .tilt {
    filter: contrast(1.1) saturate(1.2);
    border: 2px solid var(--spidey-red);
    box-shadow: 0 0 10px rgba(226, 54, 54, 0.5);
}

/* Dark mode about section */
body.dark-mode .about {
    background: var(--spidey-dark);
}

body.dark-mode .about .row .content h3 {
    color: var(--spidey-light);
}

body.dark-mode .about .row .content .tag {
    color: var(--spidey-red);
}

body.dark-mode .about .row .content p {
    color: #cccccc;
}

body.dark-mode .resumebtn .btn {
    background: var(--spidey-red);
    box-shadow: 0px 5px 10px rgba(226, 54, 54, 0.6);
}

body.dark-mode .resumebtn .btn:hover {
    background: #c42a2a;
}

/* Dark mode skills section */
body.dark-mode .skills {
    background: linear-gradient(to bottom, #1a1a40, var(--spidey-blue));
}

body.dark-mode .skills .container {
    background: rgba(12, 12, 29, 0.8);
}

body.dark-mode .skills .container .bar {
    background: rgba(43, 57, 144, 0.5);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .skills .container .bar:hover {
    box-shadow: 0 8px 10px rgba(226, 54, 54, 0.4);
    background-color: rgba(43, 57, 144, 0.8);
}

/* Dark mode education */
body.dark-mode .education {
    background: var(--spidey-dark);
}

body.dark-mode .education .box {
    background: rgba(43, 57, 144, 0.1);
    border-color: var(--spidey-red);
}

body.dark-mode .education .box:hover {
    box-shadow: 0.2rem 0.5rem 1rem rgba(226, 54, 54, 0.2);
}

/* Dark mode work section */
body.dark-mode .work {
    background: linear-gradient(to bottom, #1a1a40, var(--spidey-blue));
}

body.dark-mode .work .box-container .box .content .tag {
    background: var(--spidey-red);
}

body.dark-mode .work .desc .btns .btn:hover {
    background: var(--spidey-red);
}

body.dark-mode .work .viewall .btn {
    border: 2px solid var(--spidey-red);
    color: var(--spidey-light);
}

body.dark-mode .work .viewall .btn:hover {
    background: var(--spidey-red);
}

/* Dark mode experience */
body.dark-mode .experience .content {
    background: var(--spidey-red);
}

body.dark-mode .morebtn .btn {
    background: var(--spidey-red);
}

body.dark-mode .morebtn .btn:hover {
    background: #c42a2a;
}

/* Dark mode footer */
body.dark-mode .footer {
    background: var(--spidey-dark);
}

body.dark-mode .footer .box-container .box a:hover {
    color: var(--spidey-red);
}

body.dark-mode .footer .box-container .box .share a {
    background: var(--spidey-light);
    color: var(--spidey-dark);
}

body.dark-mode .footer .box-container .box .share a:hover {
    background: transparent;
    border: 0.1rem solid var(--spidey-light);
    color: var(--spidey-red);
}

body.dark-mode .skills .heading span {
  color: var(--spidey-red);
}
body.dark-mode .work .heading span {
  color: var(--spidey-red);
}
body.dark-mode .education .heading span {
  color: var(--spidey-red);
}
body.dark-mode .about .heading span {
  color: var(--spidey-red);
}
body.dark-mode .about .heading{
  color: var(--spidey-white);
}

body.dark-mode .experience .heading{
  color: var(--spidey-white);
}

/* Comic book panel effect */
.comic-panel {
    position: relative;
    overflow: hidden;
}

.comic-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid var(--spidey-red);
    pointer-events: none;
    z-index: 2;
}

   .spider-toggle-container {
            position: fixed;
            top: 6.5rem;
            right: 6rem;
            z-index: 1001;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .spider-thread {
            width: 2px;
            height: 90px;
            background: linear-gradient(to bottom, transparent, #000);
            margin-bottom: -5px;
            transition: all 0.5s ease;
        }
        
        body.dark-mode .spider-thread {
            background: linear-gradient(to bottom, transparent, #e23636);
            box-shadow: 0 0 8px rgba(226, 54, 54, 0.7);
        }
        
        .spider-toggle {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            background: #000;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }
        
        .spider-toggle:hover {
            transform: scale(1.1);
        }
        
        body.dark-mode .spider-toggle {
            background: #e23636;
            box-shadow: 0 0 15px rgba(226, 54, 54, 0.9);
        }
        
        .spider-toggle i {
            color: white;
            font-size: 1.5rem;
            transition: all 0.3s ease;
        }
        
        /* Spider legs effect */
        .spider-toggle::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -5px;
            width: 8px;
            height: 2px;
            background: #000;
            transition: all 0.3s ease;
        }
        
        .spider-toggle::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -5px;
            width: 8px;
            height: 2px;
            background: #000;
            transition: all 0.3s ease;
        }
        
        body.dark-mode .spider-toggle::before,
        body.dark-mode .spider-toggle::after {
            background: #e23636;
            box-shadow: 0 0 5px rgba(226, 54, 54, 0.7);
        }
        
        /* Additional decorative legs */
        .spider-leg {
            position: absolute;
            width: 8px;
            height: 2px;
            background: #000;
            transition: all 0.3s ease;
        }
        
        .leg-1 {
            top: 15px;
            left: -5px;
            transform: rotate(30deg);
        }
        
        .leg-2 {
            top: 15px;
            right: -5px;
            transform: rotate(-30deg);
        }
        
        .leg-3 {
            bottom: 15px;
            left: -5px;
            transform: rotate(-30deg);
        }
        
        .leg-4 {
            bottom: 15px;
            right: -5px;
            transform: rotate(30deg);
        }
        
        body.dark-mode .spider-leg {
            background: #e23636;
            box-shadow: 0 0 5px rgba(226, 54, 54, 0.7);
        }
        
        /* Animation for spider */
        @keyframes spider-swing {
            0% { transform: rotate(0deg); }
            25% { transform: rotate(5deg); }
            50% { transform: rotate(-5deg); }
            75% { transform: rotate(3deg); }
            100% { transform: rotate(0deg); }
        }
        
        .spider-toggle-container:hover {
            animation: spider-swing 2s ease-in-out;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .spider-toggle-container {
                top: 6.2rem;
                right: 5rem;
            }
            
            .spider-toggle {
                width: 40px;
                height: 40px;
            }
            
            .spider-toggle i {
                font-size: 1.3rem;
            }
            
            .spider-thread {
                height: 95px;
                z-index: 10;
            }
        }

/* Spidey sense animation */
@keyframes spidey-sense {
    0% { box-shadow: 0 0 5px var(--spidey-red); }
    50% { box-shadow: 0 0 20px var(--spidey-red); }
    100% { box-shadow: 0 0 5px var(--spidey-red); }
}

.spidey-sense {
    animation: spidey-sense 2s infinite;
}

/* Web effect */
.web-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    transform-origin: 0 0;
}

/* Comic text effect */
.comic-text {
    font-weight: bold;
    text-shadow: 2px 2px 0 #000, 
                -1px -1px 0 #000, 
                1px -1px 0 #000, 
                -1px 1px 0 #000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        top: 1.2rem;
        right: 5rem;
        width: 40px;
        height: 40px;
    }
}