1<label class="uiverse-pixel-checkbox">
2  <input type="checkbox" class="uiverse-pixel-checkbox-input" />
3  <span class="uiverse-pixel-checkbox-box"></span>
4  <span class="uiverse-pixel-checkbox-label">ENABLE CHEATS</span>
5</label>          

 1.uiverse-pixel-checkbox {
 2  display: flex;
 3  align-items: center;
 4  gap: 0.75em;
 5  font-family: "Courier New", monospace;
 6  font-size: 1em;
 7  font-weight: bold;
 8  color: #fff;
 9  text-shadow: 0.125em 0.125em 0 #000;
10  cursor: pointer;
11  user-select: none;
12}
13 
14.uiverse-pixel-checkbox-input {
15  appearance: none;
16  margin: 0;
17  width: 1.5em;
18  height: 1.5em;
19  background: #ff6b35;
20  image-rendering: pixelated;
21  position: relative;
22  border: none;
23  box-shadow:
24    0 0 0 0.15em #000,
25    0 0 0 0.3em #fff,
26    0 0 0 0.45em #000,
27    0 0.4em 0 0 #d1451e,
28    0 0.4em 0 0.15em #000;
29  transition: background 0.2s steps(1);
30}
31 
32.uiverse-pixel-checkbox-input:checked {
33  background: #00cc66;
34}
35 
36.uiverse-pixel-checkbox-input:checked::after {
37  content: "✓";
38  position: absolute;
39  top: 0;
40  left: 0;
41  width: 100%;
42  height: 100%;
43  font-size: 1.1em;
44  color: #000;
45  display: flex;
46  align-items: center;
47  justify-content: center;
48  text-shadow: 1px 1px #fff;
49}
50 
51.uiverse-pixel-checkbox-input:hover {
52  background: #ff8c42;
53  animation: uiverse-glitch 0.3s steps(2) infinite;
54}
55 
56.uiverse-pixel-checkbox-input:focus-visible {
57  outline: 2px dashed #fff;
58  outline-offset: 0.2em;
59}
60 
61.uiverse-pixel-checkbox-label {
62  pointer-events: none;
63}
64 
65/* Glitch effect */
66@keyframes uiverse-glitch {
67  0% {
68    transform: translate(0, 0);
69  }
70  20% {
71    transform: translate(-1px, 1px);
72  }
73  40% {
74    transform: translate(1px, -1px);
75  }
76  60% {
77    transform: translate(-1px, -1px);
78  }
79  80% {
80    transform: translate(1px, 1px);
81  }
82  100% {
83    transform: translate(0, 0);
84  }
85}