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