Form by D3OXY

1/* DEOXY Was Here */
2.form {
3  --background: #d3d3d3;
4  --input-focus: #2d8cf0;
5  --font-color: #323232;
6  --font-color-sub: #666;
7  --bg-color: #fff;
8  --main-color: #323232;
9  padding: 20px;
10  background: var(--background);
11  display: flex;
12  flex-direction: column;
13  align-items: flex-start;
14  justify-content: center;
15  gap: 20px;
16  border-radius: 5px;
17  border: 2px solid var(--main-color);
18  box-shadow: 4px 4px var(--main-color);
19}
20
21.form > p {
22  font-family: var(--font-DelaGothicOne);
23  color: var(--font-color);
24  font-weight: 700;
25  font-size: 20px;
26  margin-bottom: 15px;
27  display: flex;
28  flex-direction: column;
29}
30
31.form > p > span {
32  font-family: var(--font-SpaceMono);
33  color: var(--font-color-sub);
34  font-weight: 600;
35  font-size: 17px;
36}
37
38.separator {
39  width: 100%;
40  display: flex;
41  align-items: center;
42  justify-content: center;
43  gap: 5px;
44}
45
46.separator > div {
47  width: 100px;
48  height: 3px;
49  border-radius: 5px;
50  background-color: var(--font-color-sub);
51}
52
53.separator > span {
54  color: var(--font-color);
55  font-family: var(--font-SpaceMono);
56  font-weight: 600;
57}
58
59.oauthButton {
60  display: flex;
61  justify-content: center;
62  align-items: center;
63  gap: 5px;
64    /* margin: 50px auto 0 auto; */
65  padding: auto 15px 15px auto;
66  width: 250px;
67  height: 40px;
68  border-radius: 5px;
69  border: 2px solid var(--main-color);
70  background-color: var(--bg-color);
71  box-shadow: 4px 4px var(--main-color);
72  font-size: 16px;
73  font-weight: 600;
74  color: var(--font-color);
75  cursor: pointer;
76  transition: all 250ms;
77  position: relative;
78  overflow: hidden;
79  z-index: 1;
80}
81
82.oauthButton::before {
83  content: "";
84  position: absolute;
85  top: 0;
86  left: 0;
87  height: 100%;
88  width: 0;
89  background-color: #212121;
90  z-index: -1;
91  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
92  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
93  transition: all 250ms;
94}
95
96.oauthButton:hover {
97  color: #e8e8e8;
98}
99
100.oauthButton:hover::before {
101  width: 100%;
102}
103
104.form > input {
105  width: 250px;
106  height: 40px;
107  border-radius: 5px;
108  border: 2px solid var(--main-color);
109  background-color: var(--bg-color);
110  box-shadow: 4px 4px var(--main-color);
111  font-size: 15px;
112  font-weight: 600;
113  color: var(--font-color);
114  padding: 5px 10px;
115  outline: none;
116}
117
118.icon {
119  width: 1.5rem;
120  height: 1.5rem;
121}
122