/*   darkMode toggle switch  */
.theme-switch {
    display: flex;
    justify-content: center;
    align-items: center;
}

.theme-switch .checkbox {
    opacity: 0;
    position: absolute;
}

.theme-switch .label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 50px;
    position: relative;
    height: 40px;
    width: 80px;
    cursor: pointer;
    box-shadow: var(--switch-shadow);
    transition: var(--transition);

    color: var(--text-color); /* Add this for SVG stroke inheritance */
}

.theme-switch .label:hover .moon,
.theme-switch .label:hover .sun {
    transform: rotate(360deg);
}

.theme-switch .ball {
    transition: var(--transition);
    background-color: var(--text-color);
    position: absolute;
    border-radius: 50%;
    top: 5px;
    left: 5px;
    height: 30px;
    width: 30px;
}

.theme-switch .moon {
    color: #f1c40f;
    transform-origin: center center;
    transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    transform: rotate(0);
}

.theme-switch .sun {
    color: #ff6b00;
    transform-origin: center center;
    transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    transform: rotate(0);
}

.theme-switch .ball {
    transform: translatex(0);
}

.darkMode .theme-switch .ball {
    transform: translatex(40px);
}