:root {
    --cycle-duration: 1500ms;
    --light-color: #e3f2fd; /* Light blue */
    --background-color: #fafafa; /* Light gray */
}

body {
    background-color: var(--background-color);
    color: #fff;
    overflow-x: hidden;
}

body.dark-mode {
    --light-color: #bda739; /* Dark blue */
    --background-color: #212121; /* Dark gray */
}

#rail {
    width: 100%;
    height: 25px;
    background-color: #555;
    position: relative;
}

#light {
    width: 35px;
    height: 35px;
    background-color: var(--light-color);
    border-radius: 50%;
    position: relative;
    top: -5px;
    left: -2px;
    filter: blur(4px); /* Apply blur effect */
    border: #e3f2fd 4px solid;
}

#light-fixture {
    width: 100%;
    position: absolute;
}

.animate-right {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transition: transform linear var(--cycle-duration);
    transition-duration: var(--cycle-duration);
}

.animate-left {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transition: transform linear var(--cycle-duration);
    transition-duration: var(--cycle-duration);
}
.reset-animation {
    left: 0;
    transform: none;
}