body.purple-mode .header {    
    background: var(--purple);
    scrollbar-color: rgba(0,0,0,0.2) var(--purple);
}

body.purple-mode .header::-webkit-scrollbar {
    background-color:  var(--purple);
}

body.purple-mode .purple-mode-toggle .toggle:checked+.toggle-btn:after {
    background: var(--darkpurple);
}

body.purple-mode .theme-bg-light,
body.purple-mode,
body.purple-mode #root {
    background: var(--darkpurple) !important;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, var(--darkpurple) 30%, rgba(0,0,0,1) 100%) !important;
    color: white;
}

body.purple-mode .about-me-section,
body.purple-mode .theme-bg-light-gradient,
body.purple-mode .section-proof,
body.purple-mode .skills-section {
    background: var(--darkpurple);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, var(--darkpurple) 30%);
    color: white;
}

body.purple-mode .section-proof .uruca .logo-light {
    display: none;
}

body.purple-mode .section-proof .uruca .logo-purple {
    display: block;
}

body.purple-mode .bg-header {
    opacity: .05;
}

body.purple-mode .profile-teaser .tagline,
body.purple-mode .item-title {
    color: white;
}

body.purple-mode .wave {
    filter: brightness(0);
}

body.purple-mode .skills-block .box {
    background: #222222;
}

body.purple-mode .skills-block .box:before {
    background: rgba(255, 255, 255, .03);
}

body.purple-mode .skills-block {
    box-shadow: inset 2px 5px 5px rgba(0, 0, 0, 0.1),
        inset -2px -5px 15px rgba(88, 88, 88, 0.5),
        2px 5px 15px rgba(0, 0, 0, 0.15), 
        -2px -5px 15px rgba(255, 255, 255, 0.05);
}

body.purple-mode .section-title:before {
    background: var(--purple);
}

body.purple-mode .waveWrapperInner {
    background-image: linear-gradient(to bottom, #853fcb 30%, var(--darkpurple) 95%);
}

body.purple-mode .btn-primary {
    background-color: var(--purple);
    border-color: var(--eletricpurple);
}

body.purple-mode .btn-secondary {
    background-color: #222222;
    border-color: #292929;
}

body.purple-mode section.section-proof .box,
body.purple-mode .talks-block,
body.purple-mode section.portfolio-section .box {
    box-shadow: 0px 30px 40px -20px #525252;    
    background: rgb(0,0,0);
    background: radial-gradient(circle, var(--darkpurple) 0%, rgba(0,0,0,1) 50%) !important;
}

body.purple-mode .talks-block {
    border-top-color: var(--purple);
}

body.purple-mode .talks-block .talk-year {
    background-color: var(--bs-orange);
}

body.purple-mode #footer {
    color: white;
    background: radial-gradient(circle at bottom, var(--purple) 0, #000 40%);
}

body.purple-mode .space {
    background: rgba(0, 0, 0, 0.5) center / 200px 200px round;
}


body.purple-mode .stars1 {
    animation: space 200s ease-in-out infinite;
    background-image: 
        radial-gradient(1px 1px at 25px 5px, white, rgba(255, 255, 255, 0)), 
        radial-gradient(1px 1px at 50px 25px, white, rgba(255, 255, 255, 0)), 
        radial-gradient(1px 1px at 125px 20px, white, rgba(255, 255, 255, 0)), 
        radial-gradient(1.5px 1.5px at 50px 75px, white, rgba(255, 255, 255, 0)), 
        radial-gradient(2px 2px at 15px 125px, white, rgba(255, 255, 255, 0)), 
        radial-gradient(2.5px 2.5px at 110px 80px, white, rgba(255, 255, 255, 0));
}

body.purple-mode .stars2 {
    animation: space 150s ease-in-out infinite;
    background-image: 
        radial-gradient(1px 1px at 75px 125px, white, rgba(255, 255, 255, 0)), 
        radial-gradient(1px 1px at 100px 75px, white, rgba(255, 255, 255, 0)), 
        radial-gradient(1.5px 1.5px at 199px 100px, white, rgba(255, 255, 255, 0)), 
        radial-gradient(2px 2px at 20px 50px, white, rgba(255, 255, 255, 0)), 
        radial-gradient(2.5px 2.5px at 100px 5px, white, rgba(255, 255, 255, 0)), 
        radial-gradient(2.5px 2.5px at 5px 5px, white, rgba(255, 255, 255, 0));
}

body.purple-mode .btn-outline-primary {
    color: var(--lightpurple);
    border-color: var(--purple);
}

body.purple-mode .btn-outline-primary:hover {
    background-color: var(--eletricpurple);
    border-color: var(--purple);
}