1form {
2  background-color: #444444;
3  border-radius: 10px;
4  padding: 20px;
5  width: 300px;
6  margin: 50px auto;
7}
8
9.lb {
10  display: block;
11  margin-bottom: 10px;
12  font-size: 18px;
13  font-weight: bold;
14}
15
16.infos[type="text"], input[type="email"], input[type="date"] {
17  width: 100%;
18  padding: 10px;
19  font-size: 16px;
20  border-radius: 5px;
21  border: none;
22  margin-bottom: 20px;
23  background-color: #333333;
24  color: white;
25}
26
27#send {
28  --glow-color: rgb(176, 255, 189);
29  --glow-spread-color: rgba(123, 255, 160, 0.781);
30  --enhanced-glow-color: rgb(182, 175, 71);
31  --btn-color: rgba(13, 241, 21, 0.508);
32  border: .25em solid var(--glow-color);
33  padding: 1em 2em;
34  color: var(--glow-color);
35  font-size: 14px;
36  font-weight: bold;
37  background-color: var(--btn-color);
38  border-radius: 1em;
39  outline: none;
40  box-shadow: 0 0 1em .25em var(--glow-color),
41        0 0 4em 1em var(--glow-spread-color),
42        inset 0 0 .05em .25em var(--glow-color);
43  text-shadow: 0 0 .5em var(--glow-color);
44  position: relative;
45  transition: all 0.3s;
46}
47
48#send::after {
49  pointer-events: none;
50  content: "";
51  position: absolute;
52  top: 120%;
53  left: 0;
54  height: 100%;
55  width: 100%;
56  background-color: var(--glow-spread-color);
57  filter: blur(2em);
58  opacity: .7;
59  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
60}
61
62#send:hover {
63  color: var(--btn-color);
64  background-color: var(--glow-color);
65  box-shadow: 0 0 1em .25em var(--glow-color),
66        0 0 4em 2em var(--glow-spread-color),
67        inset 0 0 .75em .25em var(--glow-color);
68}
69
70#send:active {
71  box-shadow: 0 0 0.6em .25em var(--glow-color),
72        0 0 2.5em 2em var(--glow-spread-color),
73        inset 0 0 .5em .25em var(--glow-color);
74}
75
76#limpar {
77  --glow-color: rgb(255, 176, 176);
78  --glow-spread-color: rgba(255, 123, 123, 0.781);
79  --enhanced-glow-color: rgb(182, 175, 71);
80  --btn-color: rgba(241, 13, 13, 0.508);
81  border: .25em solid var(--glow-color);
82  padding: 1em 2em;
83  color: var(--glow-color);
84  font-size: 14px;
85  font-weight: bold;
86  background-color: var(--btn-color);
87  border-radius: 1em;
88  outline: none;
89  box-shadow: 0 0 1em .25em var(--glow-color),
90        0 0 4em 1em var(--glow-spread-color),
91        inset 0 0 .05em .25em var(--glow-color);
92  text-shadow: 0 0 .5em var(--glow-color);
93  position: relative;
94  transition: all 0.3s;
95}
96
97#limpar::after {
98  pointer-events: none;
99  content: "";
100  position: absolute;
101  top: 120%;
102  left: 0;
103  height: 100%;
104  width: 100%;
105  background-color: var(--glow-spread-color);
106  filter: blur(2em);
107  opacity: .7;
108  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
109}
110
111#limpar:hover {
112  color: var(--btn-color);
113  background-color: var(--glow-color);
114  box-shadow: 0 0 1em .25em var(--glow-color),
115        0 0 4em 2em var(--glow-spread-color),
116        inset 0 0 .75em .25em var(--glow-color);
117}
118
119#limpar:active {
120  box-shadow: 0 0 0.6em .25em var(--glow-color),
121        0 0 2.5em 2em var(--glow-spread-color),
122        inset 0 0 .5em .25em var(--glow-color);
123}