1.container {
2  width: 300px;
3  position: relative;
4  border-radius: 5px;
5  overflow: hidden;
6  color: white;
7  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
8}
9
10.container .slider {
11  width: 200%;
12  position: relative;
13  transition: transform ease-out 0.3s;
14  display: flex;
15}
16
17#register_toggle {
18  display: none;
19}
20
21.container #register_toggle:checked + .slider {
22  transform: translateX(-50%);
23}
24
25.form {
26  display: flex;
27  flex-direction: column;
28  justify-content: center;
29  align-items: center;
30  gap: 30px;
31  padding: 1.5em 3em;
32  width: 50%;
33}
34
35.title {
36  text-align: center;
37  font-weight: 700;
38  font-size: 2em;
39}
40
41form .form_control {
42  width: 100%;
43  position: relative;
44  overflow: hidden;
45}
46
47form .form_control .label {
48  position: absolute;
49  top: 50%;
50  left: 10px;
51  transition: transform ease 0.2s;
52  transform: translate(0%, -50%);
53  font-size: 0.75em;
54  user-select: none;
55  pointer-events: none;
56  color: #b0b0b0;
57}
58
59form .form_control .input {
60  width: 100%;
61  background-color: transparent;
62  border: none;
63  outline: none;
64  color: #fff;
65  padding: 0.5rem;
66  font-size: 0.75rem;
67  border-radius: 5px;
68  transition: box-shadow ease 0.2s;
69  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;
70}
71
72form .form_control .input:focus,
73form .form_control .input:valid {
74  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 3px 3px 4px #0e0e0e, inset -3px -3px 4px #5f5e5e;
75}
76
77form .form_control .input:focus + .label,
78form .form_control .input:valid + .label {
79  transform: translate(-150%, -50%);
80}
81
82form button {
83  width: 100%;
84  background-color: transparent;
85  border: none;
86  outline: none;
87  color: #fff;
88  padding: 0.5rem;
89  font-size: 0.75rem;
90  border-radius: 5px;
91  transition: box-shadow ease 0.1s;
92  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
93}
94
95form button:active {
96  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 3px 3px 4px #0e0e0e, inset -3px -3px 4px #5f5e5e;
97}
98
99.bottom_text {
100  font-size: 0.65em;
101}
102
103.bottom_text .swtich {
104  font-weight: 700;
105  cursor: pointer;
106}