/* geral */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
	--dark: #292C35;
	--light: #F1F1F1;
	--label: #111;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* main */
.l-container{
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--light);
    transition: background-color 300ms;
}

/* main-checkbox */

.checkbox{
    width: 120px;
    height: 3.5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--label);
    position: relative;
    border-radius: 4.25rem;
    cursor: pointer;
}
.ball-btn-checkbox{
    width: 46px;
    height: 46px;
    background-color: var(--light);
    border-radius: 50%;
    position: absolute;
    left: 5px; 
    transition: 300ms;
    animation: ballTransitions 300ms;
}

.d-container{
    transition: 300ms;
    background-color: var(--dark);
}

.animated-ball-checkbox{
    animation: ballTransition 300ms alternate ease-in-out forwards;
}

@keyframes ballTransition{
    from{
        left:10px;
    }
    to{
        left: 68px;
    }
}

@keyframes ballTransitions{
    from{
        left:68px;
    }
    to{
        left: 5px;
    }
}