Form by adamgiebl

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