1.login-card {
2  width: 250px;
3  height: 240px;
4  background-color: #f2f2f2;
5  border-radius: 25px;
6  box-shadow: 2px 2px 15px rgb(193, 193, 193);
7}
8
9.instruction-text {
10  color: rgb(150, 150, 150);
11  text-align: center;
12  font-size: 12px;
13  margin-top: 10px;
14  margin-bottom: px;
15}
16
17.login-card button {
18  cursor: pointer;
19}
20
21.normal-signin {
22  padding: 10px;
23  font-size: 17px;
24  width: 70%;
25  margin-top: 25px;
26  margin-left: 37px;
27  border: 2px solid transparent;
28  border-radius: 5em;
29  background-color: #1b77da;
30  color: #f2f2f2;
31  font-weight: bold;
32  font-family: sans-serif;
33  transition: 0.2s;
34}
35
36.normal-signin:hover {
37  background-color: transparent;
38  color: #1b77da;
39  border: 2px solid #1b77da;
40}
41
42.create-account {
43  padding: 10px;
44  font-size: 17px;
45  width: 70%;
46  margin-top: 5px;
47  margin-left: 37px;
48  margin-bottom: 5px;
49  border: 2px solid transparent;
50  border-radius: 5em;
51  background-color: #e8e8e8;
52  color: #1b77da;
53  font-weight: bold;
54  font-family: sans-serif;
55  transition: 0.2s;
56}
57
58.create-account:hover {
59  background-color: transparent;
60  color: #1b77da;
61  border: 2px solid #1b77da;
62}
63
64.alternate-login {
65  margin-left: 42px;
66  margin-top: 5px;
67  background-color: #f2f2f2;
68  border-radius: 5em;
69}
70
71.m-sign {
72  padding: 7px;
73  font-size: 14px;
74  height: 40px;
75  width: 40px;
76  border-radius: 5em;
77  margin-top: 5px;
78  background-color: #7FBA00;
79  border: 2px solid transparent;
80  transition: 0.2s;
81}
82
83.m-sign svg {
84  width: 27px;
85  height: 27px;
86  margin-top: -2px;
87  margin-left: -2px;
88  fill: #f2f2f2;
89}
90
91.m-sign:hover {
92  background-color: transparent;
93  border: 2px solid #7FBA00;
94}
95
96.m-sign:hover svg {
97  fill: #7FBA00;
98}
99
100.g-sign {
101  padding: 7px;
102  font-size: 14px;
103  height: 40px;
104  width: 40px;
105  border-radius: 5em;
106  margin-top: 5px;
107  margin-left: 15px;
108  background-color: #DB4437;
109  border: 2px solid transparent;
110  transition: 0.2s;
111}
112
113.g-sign svg {
114  width: 23px;
115  height: 25px;
116  margin-top: -1.5px;
117  fill: #f2f2f2;
118}
119
120.g-sign:hover {
121  background-color: transparent;
122  border: 2px solid #DB4437;
123}
124
125.g-sign:hover svg {
126  fill: #DB4437;
127}
128
129.a-sign {
130  padding: 7px;
131  font-size: 14px;
132  height: 40px;
133  width: 40px;
134  border-radius: 5em;
135  margin-top: 5px;
136  margin-left: 15px;
137  background-color: #000000;
138  border: 2px solid transparent;
139  transition: 0.2s;
140}
141
142.a-sign svg {
143  width: 25px;
144  height: 25px;
145  margin-top: -1px;
146  margin-left: -1px;
147  fill: #f2f2f2;
148}
149
150.a-sign:hover {
151  background-color: transparent;
152  border: 2px solid #000000;
153}
154
155.a-sign:hover svg {
156  fill: #000000;
157}