1.container {
2  height: 100%;
3  width: 100%;
4}
5
6.hero {
7  padding: 60px 20px;
8  width: 100%;
9  height: 100%;
10  display: flex;
11  align-items: center;
12  justify-content: center;
13  background-color: #f7f7f7;
14}
15
16.form {
17  display: flex;
18  flex-direction: column;
19  align-items: center;
20  justify-content: center;
21  font-size: 1rem;
22}
23
24.input {
25  padding: 1rem 1.2rem;
26  margin: 1rem;
27  border-radius: 2rem;
28  display: block;
29  width: 80%;
30  border: none;
31  box-shadow: inset 6px 6px 8px rgba(97, 97, 97, 0.075),
32    6px 6px 6px rgba(255, 255, 255, 0.781);
33  outline: none;
34  background-color: inherit;
35  color: rgb(161, 161, 161);
36  font-size: inherit;
37}
38
39.submit , .btn {
40  margin-top: 20px;
41  font-weight: bold;
42  box-shadow: -3px -3px 5px white, 3px 3px 5px rgba(209, 209, 209, 0.705);
43  color: rgb(112, 112, 112);
44  cursor: pointer;
45}
46
47.btn {
48  text-align: center;
49  color: black;
50}
51
52.logo {
53  font-size: 3rem;
54  color: black;
55  font-weight: 600;
56  margin: 30px;
57}
58
59::placeholder {
60  color: rgb(161, 161, 161);
61}
62
63.forgotten {
64  text-align: center;
65  font-size: .8rem;
66  width: 80%;
67  color: gray;
68  margin: 15px 0;
69}
70
71a {
72  color: inherit;
73  font-weight: bold;
74  text-decoration: none;
75}
76
77.or {
78  position: relative;
79  font-weight: bold;
80  color: rgb(112, 112, 112);
81}
82
83.or::before , .or::after {
84  position: absolute;
85  content: '';
86  width: 700%;
87  height: 1px;
88  top: 50%;
89  margin: 0 6px;
90  background-color: rgba(0, 0, 0, 0.479);
91}
92
93.or::before {
94  right: 100%;
95}
96
97.or::after {
98}
99
100.signup {
101  color: gray;
102  margin-top: 15px;
103  font-size: 1rem;
104}