Form by reshades

1.form {
2  display: flex;
3  flex-direction: column;
4  gap: 10px;
5  background: #333333;
6  border-radius: 5px;
7  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
8  backdrop-filter: blur(8.2px);
9  -webkit-backdrop-filter: blur(8.2px);
10  border: 1px solid #fff;
11  width: 17em;
12  height: 12em;
13}
14
15.content {
16  display: flex;
17  flex-direction: column;
18  gap: 10px;
19  margin-top: auto;
20  margin-bottom: auto;
21}
22
23.form p {
24  color: #fff;
25  font-weight: bolder;
26}
27
28.inp {
29  margin-left: auto;
30  margin-right: auto;
31  white-space: 4px;
32}
33
34.input + .input {
35  margin-left: 0.5em
36}
37
38.input {
39  color: #fff;
40  height: 2em;
41  width: 2em;
42  float: left;
43  text-align: center;
44  background: #00000000;
45  outline: none;
46  border: 1px #fff solid;
47  border-radius: 5px;
48  transition: all 0.6s ease;
49  font-size: larger;
50}
51
52.input:focus {
53  outline: none;
54  border: 1px #fff solid;
55}
56
57.input:not(:placeholder-shown) {
58  background-color: #fff;
59  width: 1em;
60  height: 1em
61}
62
63.form button {
64  margin-left: auto;
65  margin-right: auto;
66  background-color: #00000000;
67  color: #fff;
68  width: 8.5em;
69  height: 2.3em;
70  border: #fff 0.1em solid;
71  border-radius: 5px;
72  transition: all 0.5s ease;
73}
74
75.form button:hover {
76  background-color: #fff;
77  color: #000
78}
79