1.group {
2  position: relative;
3}
4
5.form {
6  display: -webkit-box;
7  display: -ms-flexbox;
8  display: flex;
9  -webkit-box-pack: center;
10  -ms-flex-pack: center;
11  justify-content: center;
12  -webkit-box-align: center;
13  -ms-flex-align: center;
14  align-items: center;
15  -webkit-box-orient: vertical;
16  -webkit-box-direction: normal;
17  -ms-flex-direction: column;
18  flex-direction: column;
19  border: 1px solid white;
20  padding: 120px 40px;
21  padding-top: 60px;
22  padding-bottom: 90px;
23  padding-right: 40px;
24  padding-left: 40px;
25  background-color: black;
26  border-radius: 20px;
27  position: relative;
28}
29
30.form p {
31  padding-bottom: 20px;
32  font-size: 24px;
33  font-weight: bold;
34  letter-spacing: .5px;
35  color: white;
36}
37
38.container-1 {
39  padding-top: 30px;
40}
41
42.main-input {
43  font-size: 16px;
44  padding: 10px 10px 10px 5px;
45  display: block;
46  width: 185px;
47  border: none;
48  border-bottom: 1px solid #6c6c6c;
49  background: transparent;
50  color: #ffffff;
51}
52
53.main-input:focus {
54  outline: none;
55  border-bottom-color: #42ff1c;
56}
57
58.lebal-email {
59  color: #999999;
60  font-size: 18px;
61  font-weight: normal;
62  position: absolute;
63  pointer-events: none;
64  left: 5px;
65  top: 10px;
66  transition: 0.2s ease all;
67  -moz-transition: 0.2s ease all;
68  -webkit-transition: 0.2s ease all;
69}
70
71.main-input:focus ~ .lebal-email,
72.main-input:valid ~ .lebal-email {
73  top: -20px;
74  font-size: 14px;
75  color: #42ff1c;
76}
77
78.highlight-span {
79  position: absolute;
80  height: 60%;
81  width: 0px;
82  top: 25%;
83  left: 0;
84  pointer-events: none;
85  opacity: 0.5;
86}
87
88.main-input:focus ~ .highlight-span {
89  -webkit-animation: input-focus 0.3s ease;
90  animation: input-focus 0.3s ease;
91}
92
93@keyframes input-focus {
94  from {
95    background: #42ff1c;
96  }
97
98  to {
99    width: 185px;
100  }
101}
102
103.submit {
104  margin-top: 1.2rem;
105  padding: 10px 20px;
106  border-radius: 10px;
107}