body{
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.bol{
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 300px; height: 300px;
    border-radius: 50%;
    cursor: pointer;
}
.container{
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 650px;
    height: 650px;
    overflow: hidden;
}
.lampL{
    width: 275px;
    height: 275px;
    border-radius: 50%;
    clip-path: inset(0 50% 0 0);
    background-color: rgb(215, 215, 241);
    position: absolute;
    margin: auto;
    transition:  0.5s ease;
}
.lampR{
    width: 275px;
    height: 275px;
    border-radius: 50%;
    clip-path: inset(0 0 0 50%);
    background-color: rgb(236, 236, 250);
    position: absolute;
    margin: auto;
    transition:  0.5s ease;
}

.lampL2{
    width: 35px; height: 35px;
    border-radius: 50%;
    border:rgb(167, 167, 218) thick solid ;
    background-color: transparent;
    border-width: 25px;
    position: absolute;
    margin: auto;
    transition:  0.5s ease;
    
}

.lampL3{
    width: 30px;
    height: 100px;
    background-color:rgb(167, 167, 218) ;
    position: absolute;
    margin: auto;
    margin-top: 170px;
    transition:  0.5s ease;
}
.lampR2{
    width: 35px; height: 35px;
    border-radius: 50%;
    border:rgb(214, 214, 214) thick solid ;
    background-color: transparent;
    clip-path: inset(0 0 0 50%);
    border-width: 25px;
    position: absolute;
    margin: auto;
    transition:  0.5s ease;
    
}

.lampR3{
    width: 30px;
    height: 100px;
    background-color:rgb(214, 214, 214) ;
    clip-path: inset(0 0 0 50%);
    position: absolute;
    margin: auto;
    margin-top: 170px;
    transition:  0.5s ease;
}
.lampO{
    width: 75px;
    height: 75px;
    background-color: rgb(41, 73, 102);
    position: absolute;
    margin-left: -75px;
    margin-top: 315px;

}
.lampO2{
    width: 75px;
    height: 75px;
    background-color: rgb(68, 98, 126);
    position: absolute;
    margin-left: 75px;
    margin-top: 315px;

}
.lampO3{
    width: 75px;
    height: 75px;
    background-color: rgb(32, 55, 77);
    border-bottom-left-radius: 30px;
    position: absolute;
    margin-left: -75px;
    margin-top: 465px;

}
.lampO4{
    width: 75px;
    height: 75px;
    background-color: rgb(84, 110, 134);
    border-bottom-right-radius:30px ;
    position: absolute;
    margin-left: 75px;
    margin-top: 465px;

}
.lampO5{
    width: 60px; height: 60px;
    background-color: rgb(32, 55, 77);
    border-radius: 50px;
    clip-path: inset(50% 50% 0 0);
    position: absolute;
    margin-top: 540px;
}
.lampO6{
    width: 60px; height: 60px;
    background-color: rgb(84, 110, 134);
    border-radius: 50px;
    clip-path: inset(50% 0 0 50%);
    position: absolute;
    margin-top: 540px;
}

.bol input:checked ~ .lampL{
    background-color: yellow;

}
.bol input:checked ~ .lampL2{
    border-color: orange;

}
.bol input:checked ~ .lampL3{
    background-color: orange;

}
.bol input:checked ~ .lampR{
    background-color: rgb(255, 255, 95);

}
.bol input:checked ~ .lampR2{
    border-color: rgb(252, 187, 67);

}
.bol input:checked ~ .lampR3{
    background-color: rgb(252, 187, 67);

}

