1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}
6
7.form {
8  display: flex;
9  justify-content: center;
10  align-items: center;
11  transform-style: preserve-3d;
12  transition: all 1s ease;
13}
14
15.form .form_front {
16  display: flex;
17  flex-direction: column;
18  justify-content: center;
19  align-items: center;
20  gap: 20px;
21  position: absolute;
22  backface-visibility: hidden;
23  padding: 65px 45px;
24  border-radius: 15px;
25  box-shadow: inset 2px 2px 10px rgba(0,0,0,1),
26  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
27}
28
29.form .form_back {
30  display: flex;
31  flex-direction: column;
32  justify-content: center;
33  align-items: center;
34  gap: 20px;
35  position: absolute;
36  backface-visibility: hidden;
37  transform: rotateY(-180deg);
38  padding: 65px 45px;
39  border-radius: 15px;
40  box-shadow: inset 2px 2px 10px rgba(0,0,0,1),
41  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
42}
43
44.form_details {
45  font-size: 25px;
46  font-weight: 600;
47  padding-bottom: 10px;
48}
49
50.input {
51  width: 245px;
52  min-height: 45px;
53  color: #fff;
54  outline: none;
55  transition: 0.35s;
56  padding: 0px 7px;
57  background-color: #212121;
58  border-radius: 6px;
59  border: 2px solid #212121;
60  box-shadow: 6px 6px 10px rgba(0,0,0,1),
61  1px 1px 10px rgba(255, 255, 255, 0.6);
62}
63
64.input::placeholder {
65  color: #999;
66}
67
68.input:focus.input::placeholder {
69  transition: 0.3s;
70  opacity: 0;
71}
72
73.input:focus {
74  transform: scale(1.05);
75  box-shadow: 6px 6px 10px rgba(0,0,0,1),
76  1px 1px 10px rgba(255, 255, 255, 0.6),
77  inset 2px 2px 10px rgba(0,0,0,1),
78  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
79}
80
81.btn {
82  padding: 10px 35px;
83  cursor: pointer;
84  background-color: #212121;
85  border-radius: 6px;
86  border: 2px solid #212121;
87  box-shadow: 6px 6px 10px rgba(0,0,0,1),
88  1px 1px 10px rgba(255, 255, 255, 0.6);
89  color: #fff;
90  font-size: 15px;
91  font-weight: bold;
92  transition: 0.35s;
93}
94
95.btn:hover {
96  transform: scale(1.05);
97  box-shadow: 6px 6px 10px rgba(0,0,0,1),
98  1px 1px 10px rgba(255, 255, 255, 0.6),
99  inset 2px 2px 10px rgba(0,0,0,1),
100  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
101}
102
103.btn:focus {
104  transform: scale(1.05);
105  box-shadow: 6px 6px 10px rgba(0,0,0,1),
106  1px 1px 10px rgba(255, 255, 255, 0.6),
107  inset 2px 2px 10px rgba(0,0,0,1),
108  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
109}
110
111.form .switch {
112  font-size: 13px;
113}
114
115.form .switch .signup_tog {
116  font-weight: 700;
117  cursor: pointer;
118}
119
120.container #signup_toggle {
121  display: none;
122}
123
124.container #signup_toggle:checked + .form {
125  transform: rotateY(-180deg);
126}