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