* {box-sizing: border-box;}

.collection {background-image:url(images/scramble.png);
position:relative;
height:500px;
width:500px;
margin:auto;}

.buttons {margin-left:-100px;}

.collection label {display:block;
border-radius: 100%;
height:50px;
width:50px;}

.collection:has(#green:checked) span[class~="mover"] {
   animation-play-state: running;}
.collection:has(#red:checked) span[class~="mover"] {
animation-play-state: paused;}
.collection:has(#yellow:checked) span[class~="mover"] {
animation-play-state: running;
animation-duration: 8s;}

.collection span {position:absolute;
border:1px solid black;
background-color:white;
height:20px;
width:20px;
border-radius:100%;}

.leftright {animation: LtoR 1s linear infinite alternate;
animation-play-state: paused;
left:0px;
}

.rightleft {animation: RtoL linear 1s infinite alternate;
animation-play-state: paused;
right:0px;}

.updown {animation: UtoD linear 1s infinite alternate;
animation-play-state: paused;
top:0px;
left:50%;}

.downup {animation: DtoU linear 1s infinite alternate;
animation-play-state: paused;
bottom:0px;
left:50%;
}

.Ldiagonal {animation: ldiag linear 1s infinite alternate;
animation-play-state: paused;
top:0px;
left:0px;
}

.Rdiagonal {animation:rdiag linear 1s infinite alternate;
animation-play-state: paused;
top:0px;
right:0px;}

.BLdiagonal {animation: bldiag linear 1s infinite alternate;
animation-play-state: paused;
bottom:0px;
left:0px;}

.BRdiagonal {animation: brdiag linear 1s infinite alternate;
animation-play-state: paused;
bottom:0px;
right:0px;}

#redlight {background-color:red;
}
#greenlight {background-color: green;}
#yellowlight {background-color:yellow;}

input[type="radio"] {
  position: absolute;
  opacity: 0;
} 

@keyframes LtoR {
  from {
left:0px}
  to {
left:100%;}
}
    @keyframes RtoL {
  from {
right:0px}
  to {
right:100%;}
        
    }

@keyframes UtoD {
  from {
top:0px}
  to {
top:100%;}
}

@keyframes DtoU {

  from {
bottom:0px}
  to {
bottom:100%;}
    
}

@keyframes ldiag {

from {top:0px;
left:0px;}

to {top:100%;
left:100%;}
    
}

@keyframes rdiag {

from {top:0px;
right:0px;}

to {top:100%;
right:100%;}
    
}

@keyframes bldiag {

from {bottom:0px;
left:0px}
to {bottom:100%;
left:100%}
    
}

@keyframes brdiag {

from {bottom:0px;
right:0px;}
to {bottom:100%;
right:100%;}}