1.form {
2  display: flex;
3  flex-direction: column;
4  gap: 10px;
5  padding-top: 3em;
6  padding-left: 2.8em;
7  padding-right: 2.8em;
8  padding-bottom: 2.1em;
9  border: 2px dashed #DAA06D;
10  border-radius: 15px;
11  background-color: #EADDCA;
12  box-shadow: 0 0 0 4px #EADDCA, 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
13  transition: .4s ease-in-out;
14}
15
16::placeholder {
17  color: #DAA06D;
18  text-align: center;
19}
20
21.form .heading {
22  padding-left: 0.8em;
23  color: #DAA06D;
24  background-color: transparent;
25  letter-spacing: .5em;
26  text-align: center;
27  padding-top: 1em;
28  padding-bottom: 3em;
29  text-shadow: inset -1px -1px 1px #DAA06D;
30}
31
32.form .input {
33  outline: none;
34  padding: 0.5em;
35  border: 1px solid #DAA06D;
36  color: #DAA06D;
37  width: 14em;
38  height: 3em;
39  border-radius: 10px;
40  background-color: #EADDCA;
41  text-align: center;
42}
43
44.form .btn {
45  align-self: center;
46  margin-top: 2em;
47  border-radius: 10px;
48  outline: none;
49  border: none;
50  color: white;
51  background-color: #E5AA70;
52  font-weight: bold;
53  letter-spacing: 0.1em;
54  transition: .4s ease-in-out opacity,.1s ease-in-out active;
55  padding: 1em;
56  box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
57}
58
59.form .btn:hover {
60  opacity: 0.8;
61}
62
63.form .btn:active {
64  transform: translateX(0.1em) translateY(0.1em);
65  box-shadow: none;
66}