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(253, 255, 243);
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: translateY(14px) rotate(60deg);
32  margin-left: 0;
33  transform-origin: right;
34  transition-duration: .3s;
35  z-index: 2;
36}
37
38#checkbox:checked + .toggle #bar1 {
39  transform: translateY(28px) rotate(-60deg);
40  transition-duration: .3s;
41  transform-origin: left;
42  z-index: 1;
43}
44
45#checkbox:checked + .toggle {
46  transform: rotate(-90deg);
47}
48/* #checkbox:checked + .toggle #bar3 {
49  transform: rotate(90deg);
50  transition-duration: .3s;
51  transform-origin:right;
52} */
53