Card by vinodjangid07

1.gender-card {
2  width: fit-content;
3  height: fit-content;
4  background-color: rgb(255, 255, 255);
5  display: flex;
6  align-items: center;
7  flex-direction: column;
8  justify-content: flex-start;
9  padding: 30px;
10  border-radius: 20px;
11  font-family: Arial, Helvetica, sans-serif;
12  gap: 25px;
13}
14.large-svg-container {
15  width: auto;
16  height: auto;
17  display: flex;
18  align-items: center;
19  justify-content: center;
20  transform: rotate(45deg);
21}
22.largemalesvg {
23  transform: rotate(180deg);
24}
25.heading {
26  color: #1d1d1d;
27  font-weight: 600;
28  font-size: 25px;
29  text-align: center;
30}
31.gender-radio-buttons {
32  display: none;
33}
34.smallsvg {
35  width: 10px;
36}
37.other-gender {
38  width: 15px;
39}
40.malesmallsvg {
41  transform: rotate(225deg);
42}
43.genderlabel {
44  display: flex;
45  align-items: center;
46  justify-content: center;
47  width: fit-content;
48  height: fit-content;
49  background-color: rgb(46, 46, 46);
50  border-radius: 5px;
51  padding: 8px 16px;
52  gap: 8px;
53  color: white;
54  cursor: pointer;
55  transition: all 0.3s ease-out;
56}
57
58.radio-wrapper {
59  display: flex;
60  align-items: center;
61  justify-content: center;
62  gap: 20px;
63  margin-top: 25px;
64}
65.femalebutton:hover {
66  background-color: rgb(245, 185, 195);
67}
68.malebutton:hover {
69  background-color: #569fcf;
70}
71.otherbutton:hover {
72  background-color: #4d227a;
73}
74#female:checked + .femalebutton {
75  background-color: rgb(245, 185, 195);
76  transform: scale(1.1);
77}
78#male:checked + .malebutton {
79  background-color: #569fcf;
80  transform: scale(1.1);
81}
82#other:checked + .otherbutton {
83  background-color: #4d227a;
84  transform: scale(1.2);
85}
86