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