1.singup {
2  color: #000;
3  text-transform: uppercase;
4  letter-spacing: 2px;
5  display: block;
6  font-weight: bold;
7  font-size: x-large;
8  margin-top: 1.5em;
9}
10
11.card {
12  display: flex;
13  justify-content: center;
14  align-items: center;
15  min-height: 350px;
16  width: 300px;
17  flex-direction: column;
18  gap: 35px;
19  border-radius: 15px;
20  background: #e3e3e3;
21  box-shadow: 16px 16px 32px #c8c8c8,
22        -16px -16px 32px #fefefe;
23  border-radius: 8px;
24}
25
26.inputBox,
27.inputBox1 {
28  position: relative;
29  width: 250px;
30}
31
32.inputBox input,
33.inputBox1 input {
34  width: 100%;
35  padding: 10px;
36  outline: none;
37  border: none;
38  color: #000;
39  font-size: 1em;
40  background: transparent;
41  border-left: 2px solid #000;
42  border-bottom: 2px solid #000;
43  transition: 0.1s;
44  border-bottom-left-radius: 8px;
45}
46
47.inputBox span,
48.inputBox1 span {
49  margin-top: 5px;
50  position: absolute;
51  left: 0;
52  transform: translateY(-4px);
53  margin-left: 10px;
54  padding: 10px;
55  pointer-events: none;
56  font-size: 12px;
57  color: #000;
58  text-transform: uppercase;
59  transition: 0.5s;
60  letter-spacing: 3px;
61  border-radius: 8px;
62}
63
64.inputBox input:valid~span,
65.inputBox input:focus~span {
66  transform: translateX(113px) translateY(-15px);
67  font-size: 0.8em;
68  padding: 5px 10px;
69  background: #000;
70  letter-spacing: 0.2em;
71  color: #fff;
72  border: 2px;
73}
74
75.inputBox1 input:valid~span,
76.inputBox1 input:focus~span {
77  transform: translateX(156px) translateY(-15px);
78  font-size: 0.8em;
79  padding: 5px 10px;
80  background: #000;
81  letter-spacing: 0.2em;
82  color: #fff;
83  border: 2px;
84}
85
86.inputBox input:valid,
87.inputBox input:focus,
88.inputBox1 input:valid,
89.inputBox1 input:focus {
90  border: 2px solid #000;
91  border-radius: 8px;
92}
93
94.enter {
95  height: 45px;
96  width: 100px;
97  border-radius: 5px;
98  border: 2px solid #000;
99  cursor: pointer;
100  background-color: transparent;
101  transition: 0.5s;
102  text-transform: uppercase;
103  font-size: 10px;
104  letter-spacing: 2px;
105  margin-bottom: 3em;
106}
107
108.enter:hover {
109  background-color: rgb(0, 0, 0);
110  color: white;
111}