1.cyberpunk-button {
2  background-color: #30cfd0;
3  color: #fff;
4  font-size: 18px;
5  border: none;
6  border-radius: 5px;
7  padding: 15px 25px;
8  cursor: pointer;
9  transition: all 0.3s ease-in-out;
10}
11
12.cyberpunk-checkbox {
13  appearance: none;
14  width: 20px;
15  height: 20px;
16  border: 2px solid #30cfd0;
17  border-radius: 5px;
18  background-color: transparent;
19  display: inline-block;
20  position: relative;
21  margin-right: 10px;
22  cursor: pointer;
23}
24
25.cyberpunk-checkbox:before {
26  content: "";
27  background-color: #30cfd0;
28  display: block;
29  position: absolute;
30  top: 50%;
31  left: 50%;
32  transform: translate(-50%, -50%) scale(0);
33  width: 10px;
34  height: 10px;
35  border-radius: 3px;
36  transition: all 0.3s ease-in-out;
37}
38
39.cyberpunk-checkbox:checked:before {
40  transform: translate(-50%, -50%) scale(1);
41}
42
43.cyberpunk-checkbox-label {
44  font-size: 18px;
45  color: #fff;
46  cursor: pointer;
47  user-select: none;
48  display: flex;
49  align-items: center;
50}