1#checkbox {
2  display: none;
3}
4
5.toggle {
6  position: relative;
7  width: 40px;
8  height: 40px;
9  cursor: pointer;
10  display: flex;
11  flex-direction: column;
12  align-items: center;
13  justify-content: center;
14  gap: 10px;
15  transition-duration: .3s;
16}
17
18.bars {
19  width: 100%;
20  height: 4px;
21  background-color: rgb(76, 189, 151);
22  border-radius: 5px;
23  transition-duration: .3s;
24}
25
26#checkbox:checked + .toggle .bars {
27  margin-left: 13px;
28}
29
30#checkbox:checked + .toggle #bar2 {
31  transform: rotate(135deg);
32  margin-left: 0;
33  transform-origin: center;
34  transition-duration: .3s;
35}
36
37#checkbox:checked + .toggle #bar1 {
38  transform: rotate(45deg);
39  transition-duration: .3s;
40  transform-origin: left center;
41}
42
43#checkbox:checked + .toggle #bar3 {
44  transform: rotate(-45deg);
45  transition-duration: .3s;
46  transform-origin: left center;
47}
48