Form by kennyotsu-monochromia

1.form {
2  --black: #000000;
3  --ch-black: #141414;
4  --eer-black: #1b1b1b;
5  --night-rider: #2e2e2e;
6  --white: #ffffff;
7  --af-white: #f3f3f3;
8  --ch-white: #e1e1e1;
9  --tomato: #fa5656;
10  font-family: Helvetica, sans-serif;
11  padding: 25px;
12  display: flex;
13  max-width: 420px;
14  flex-direction: column;
15  align-items: center;
16  overflow: hidden;
17  color: var(--af-white);
18  background-color: var(--black);
19  border-radius: 8px;
20  position: relative;
21  box-shadow: 10px 10px 10px rgba(0, 0, 0, .1);
22}
23
24/*----heading and description-----*/
25
26.info {
27  margin-bottom: 20px;
28  display: flex;
29  flex-direction: column;
30  align-items: center;
31  text-align: center;
32}
33
34.title {
35  font-size: 1.5rem;
36  font-weight: 900;
37}
38
39.description {
40  margin-top: 10px;
41  font-size: 1rem;
42}
43
44/*----input-fields------*/
45
46.form .input-fields {
47  display: flex;
48  justify-content: space-between;
49  gap: 10px;
50}
51
52.form .input-fields input {
53  height: 2.5em;
54  width: 2.5em;
55  outline: none;
56  text-align: center;
57  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
58  font-size: 1.5rem;
59  color: var(--af-white);
60  border-radius: 5px;
61  border: 2.5px solid var(--eer-black);
62  background-color: var(--eer-black);
63}
64
65.form .input-fields input:focus {
66  border: 1px solid var(--af-white);
67  box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .15);
68  transform: scale(1.05);
69  transition: 0.5s;
70}
71
72/*-----verify and clear buttons-----*/
73
74.action-btns {
75  display: flex;
76  margin-top: 20px;
77  gap: 0.5rem;
78}
79
80.verify {
81  padding: 10px 20px;
82  text-decoration: none;
83  border-radius: 5px;
84  font-size: 1rem;
85  font-weight: 500;
86  color: var(--night-rider);
87  text-shadow: none;
88  background: var(--af-white);
89  box-shadow: transparent;
90  border: 1px solid var(--af-white);
91  transition: 0.3s ease;
92  user-select: none;
93}
94
95.verify:hover,.verify:focus {
96  color: var(--night-rider);
97  background: var(--white);
98}
99
100.clear {
101  padding: 10px 20px;
102  text-decoration: none;
103  border-radius: 5px;
104  font-size: 1rem;
105  font-weight: 500;
106  color: var(--ch-white);
107  text-shadow: none;
108  background: transparent;
109  border: 1px solid var(--ch-white);
110  transition: 0.3s ease;
111  user-select: none;
112}
113
114.clear:hover,.clear:focus {
115  color: var(--tomato);
116  background-color: transparent;
117  border: 1px solid var(--tomato);
118}
119
120/*-----close button------*/
121
122.close {
123  position: absolute;
124  right: 10px;
125  top: 10px;
126  background-color: var(--night-rider);
127  color: var(--ch-white);
128  height: 30px;
129  width: 30px;
130  display: grid;
131  place-items: center;
132  border-radius: 5px;
133  cursor: pointer;
134  font-weight: 600;
135  transition: .5s ease;
136}
137
138.close:hover {
139  background-color: var(--tomato);
140  color: var(--white);
141}