Form by Yaya12085

1.form {
2  background-color: #fff;
3  box-shadow: 0 10px 60px rgb(218, 229, 255);
4  border: 1px solid rgb(159, 159, 160);
5  border-radius: 20px;
6  padding: 2rem .7rem .7rem .7rem;
7  text-align: center;
8  font-size: 1.125rem;
9  max-width: 320px;
10}
11
12.form-title {
13  color: #000000;
14  font-size: 1.8rem;
15  font-weight: 500;
16}
17
18.form-paragraph {
19  margin-top: 10px;
20  font-size: 0.9375rem;
21  color: rgb(105, 105, 105);
22}
23
24.drop-container {
25  background-color: #fff;
26  position: relative;
27  display: flex;
28  gap: 10px;
29  flex-direction: column;
30  justify-content: center;
31  align-items: center;
32  padding: 10px;
33  margin-top: 2.1875rem;
34  border-radius: 10px;
35  border: 2px dashed rgb(171, 202, 255);
36  color: #444;
37  cursor: pointer;
38  transition: background .2s ease-in-out, border .2s ease-in-out;
39}
40
41.drop-container:hover {
42  background: rgba(0, 140, 255, 0.164);
43  border-color: rgba(17, 17, 17, 0.616);
44}
45
46.drop-container:hover .drop-title {
47  color: #222;
48}
49
50.drop-title {
51  color: #444;
52  font-size: 20px;
53  font-weight: bold;
54  text-align: center;
55  transition: color .2s ease-in-out;
56}
57
58#file-input {
59  width: 350px;
60  max-width: 100%;
61  color: #444;
62  padding: 2px;
63  background: #fff;
64  border-radius: 10px;
65  border: 1px solid rgba(8, 8, 8, 0.288);
66}
67
68#file-input::file-selector-button {
69  margin-right: 20px;
70  border: none;
71  background: #084cdf;
72  padding: 10px 20px;
73  border-radius: 10px;
74  color: #fff;
75  cursor: pointer;
76  transition: background .2s ease-in-out;
77}
78
79#file-input::file-selector-button:hover {
80  background: #0d45a5;
81}