Form by ayyjayy2

1.form {
2  --input-focus: #2d8cf0;
3  --font-color: #323232;
4  --font-color-sub: #666;
5  --bg-color: beige;
6  --main-color: black;
7  padding: 20px;
8  background: lightblue;
9  display: flex;
10  flex-direction: column;
11  align-items: flex-start;
12  justify-content: center;
13  gap: 20px;
14  border-radius: 5px;
15  border: 2px solid var(--main-color);
16  box-shadow: 4px 4px var(--main-color);
17}
18
19.title {
20  color: var(--font-color);
21  font-weight: 900;
22  font-size: 20px;
23  margin-bottom: 25px;
24}
25
26.title span {
27  color: var(--font-color-sub);
28  font-weight: 600;
29  font-size: 17px;
30}
31
32.input {
33  width: 250px;
34  height: 40px;
35  border-radius: 5px;
36  border: 2px solid var(--main-color);
37  background-color: var(--bg-color);
38  box-shadow: 4px 4px var(--main-color);
39  font-size: 15px;
40  font-weight: 600;
41  color: var(--font-color);
42  padding: 5px 10px;
43  outline: none;
44}
45
46.input::placeholder {
47  color: var(--font-color-sub);
48  opacity: 0.8;
49}
50
51.input:focus {
52  border: 2px solid var(--input-focus);
53}
54
55.login-with {
56  display: flex;
57  gap: 20px;
58}
59
60.button-log {
61  cursor: pointer;
62  width: 40px;
63  height: 40px;
64  border-radius: 100%;
65  border: 2px solid var(--main-color);
66  background-color: var(--bg-color);
67  box-shadow: 4px 4px var(--main-color);
68  color: var(--font-color);
69  font-size: 25px;
70  display: flex;
71  justify-content: center;
72  align-items: center;
73}
74
75.icon {
76  width: 24px;
77  height: 24px;
78  fill: var(--main-color);
79}
80
81.button-log:active, .button-confirm:active {
82  box-shadow: 0px 0px var(--main-color);
83  transform: translate(3px, 3px);
84}
85
86.button-confirm {
87  margin: 50px auto 0 auto;
88  width: 120px;
89  height: 40px;
90  border-radius: 5px;
91  border: 2px solid var(--main-color);
92  background-color: var(--bg-color);
93  box-shadow: 4px 4px var(--main-color);
94  font-size: 17px;
95  font-weight: 600;
96  color: var(--font-color);
97  cursor: pointer;
98}
99