:root {
	--theme-darkmode-bg-color: #0f172a;
    --theme-darkmode-text-color: #e7e7e7;
    --theme-darkmode-content-color: #a8a8a8;
    --foreground-color: #1a253d;
    --theme-darkmode-border-color: #1a253d;
}

button.portfolio-one-dark-mode-toggle svg.svg-icon {
    fill: #fff;
}
button.portfolio-one-dark-mode-toggle span{
    display: block;
}
button.portfolio-one-dark-mode-toggle{
    position: fixed;
    top: 320px;
    padding: 5px;
    border-radius: 20px;
    box-shadow: 3px 2px 10px rgba(0, 0, 0, 0.5);
    background-color: rgb(41 50 72);
    border-color: transparent;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
button.portfolio-one-dark-mode-toggle.position-right{
    right: 5px;
}
button.portfolio-one-dark-mode-toggle.position-left{
    left: 5px;
}
button.portfolio-one-dark-mode-toggle:hover {
    box-shadow: 5px 4px 10px 0px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] button.portfolio-one-dark-mode-toggle{
    border-color: #fff;
}
button.portfolio-one-dark-mode-toggle span{
    border-radius: 50%;
    padding: 5px;
}

button.portfolio-one-dark-mode-toggle span.light{
    margin-bottom: 10px;
}

[data-theme="light"] button.portfolio-one-dark-mode-toggle .light{
    background-color: #fff;
}

[data-theme="light"] button.portfolio-one-dark-mode-toggle .light svg{
    fill: #ca8a04;
    stroke: #ca8a04;
}

[data-theme="dark"] button.portfolio-one-dark-mode-toggle .dark{
    background-color: #0b1838;
}
[data-theme="dark"] button.portfolio-one-dark-mode-toggle .dark svg{
    fill: #666;
    stroke: #666;
}
[data-theme="dark"] body{
    background-color: var(--theme-darkmode-bg-color);
    color: var(--theme-darkmode-text-color);
}

[data-theme="dark"] a.custom-logo-link,
[data-theme="light"] a.cww-dark-logo{
    display: none;
}
[data-theme="dark"] a.cww-dark-logo{
    display: block;
}

[data-theme="dark"] .elementor-shape .elementor-shape-fill{
    fill: var(--theme-darkmode-bg-color);
}
/**stylings*/
