1.main {
2  position: relative;
3  display: flex;
4  flex-direction: column;
5  background-color: #240046;
6  max-height: 420px;
7  overflow: hidden;
8  border-radius: 12px;
9  box-shadow: 7px 7px 10px 3px #24004628;
10}
11
12.form {
13  display: flex;
14  flex-direction: column;
15  gap: 14px;
16  padding: 24px;
17}
18
19/*checkbox to switch from sign up to login*/
20#chk {
21  display: none;
22}
23
24/*Login*/
25.login {
26  position: relative;
27  width: 100%;
28  height: 100%;
29}
30
31.login label {
32  margin: 25% 0 5%;
33}
34
35label {
36  color: #fff;
37  font-size: 2rem;
38  justify-content: center;
39  display: flex;
40  font-weight: bold;
41  cursor: pointer;
42  transition: .5s ease-in-out;
43}
44
45.input {
46  width: 100%;
47  height: 40px;
48  background: #e0dede;
49  padding: 10px;
50  border: none;
51  outline: none;
52  border-radius: 4px;
53}
54
55/*Register*/
56.register {
57  background: #eee;
58  border-radius: 60% / 10%;
59  transform: translateY(5%);
60  transition: .8s ease-in-out;
61}
62
63.register label {
64  color: #573b8a;
65  transform: scale(.6);
66}
67
68#chk:checked ~ .register {
69  transform: translateY(-60%);
70}
71
72#chk:checked ~ .register label {
73  transform: scale(1);
74  margin: 10% 0 5%;
75}
76
77#chk:checked ~ .login label {
78  transform: scale(.6);
79  margin: 5% 0 5%;
80}   
81/*Button*/
82.form button {
83  width: 85%;
84  height: 40px;
85  margin: 12px auto 10%;
86  color: #fff;
87  background: #573b8a;
88  font-size: 1rem;
89  font-weight: bold;
90  border: none;
91  border-radius: 4px;
92  cursor: pointer;
93  transition: .2s ease-in;
94}
95
96.form button:hover {
97  background-color: #6d44b8;
98}