1.share {
2  display: flex;
3  flex-direction: row;
4  gap: 1em;
5  transition: .4s ease-in-out;
6  margin-top: 60px;
7}
8
9.btn1 {
10  position: relative;
11  width: 3em;
12  height: 3em;
13  outline: none;
14  border: none;
15  border-radius: 50%;
16  background-color: white;
17  transition: .4s all;
18}
19
20.btn1 .instagram {
21  margin-top: 0.1em;
22  fill: #cc39a4;
23}
24
25.btn1 .tooltiptext1 {
26  visibility: hidden;
27  width: 6em;
28  height: 8em;
29  background-color: whitesmoke;
30  color: black;
31  text-align: center;
32  border-radius: 10px;
33  padding: 1em;
34  position: absolute;
35  left: -1.5em;
36  top: -8em;
37  z-index: 1;
38  transition: .1s ease-in-out;
39}
40
41.btn1 .tooltiptext1 .card {
42  width: 4em;
43  height: 4em;
44  background-color: white;
45}
46
47.btn1 .tooltiptext1 .account {
48  margin-top: 1em;
49}
50
51.btn1 .tooltiptext1 .username {
52  font-size: 0.7em;
53  margin-top: 1.6em;
54  font-weight: bold;
55}
56
57.btn1:hover .tooltiptext1 {
58  transform: translateY(-1em);
59  visibility: visible;
60}
61
62.btn1:hover {
63  background-color: #cc39a4;
64}
65
66.btn1:hover .instagram {
67  fill: white;
68}
69
70.btn2 {
71  position: relative;
72  width: 3em;
73  height: 3em;
74  outline: none;
75  border: none;
76  border-radius: 50%;
77  background-color: white;
78  transition: .4s all;
79}
80
81.btn2 .twitter {
82  margin-top: .25em;
83  margin-left: .1em;
84  fill: #03A9F4;
85}
86
87.btn2 .tooltiptext2 {
88  visibility: hidden;
89  width: 6em;
90  height: 8em;
91  background-color: whitesmoke;
92  color: black;
93  text-align: center;
94  border-radius: 10px;
95  padding: 1em;
96  position: absolute;
97  left: -1.5em;
98  top: -8em;
99  z-index: 1;
100  transition: .1s ease-in-out;
101}
102
103.btn2 .tooltiptext2 .card {
104  width: 4em;
105  height: 4em;
106  background-color: white;
107}
108
109.btn2 .tooltiptext2 .account {
110  margin-top: 1em;
111}
112
113.btn2 .tooltiptext2 .username {
114  font-size: 0.6em;
115  margin-top: 1.6em;
116  font-weight: bold;
117}
118
119.btn2:hover .tooltiptext2 {
120  transform: translateY(-1em);
121  visibility: visible;
122}
123
124.btn2:hover {
125  background-color: #03A9F4;
126}
127
128.btn2:hover .twitter {
129  fill: white;
130}
131
132.btn3 {
133  position: relative;
134  width: 3em;
135  height: 3em;
136  outline: none;
137  border: none;
138  border-radius: 50%;
139  background-color: white;
140  transition: .4s all;
141}
142
143.btn3 .tooltiptext3 {
144  visibility: hidden;
145  width: 6em;
146  height: 8em;
147  background-color: whitesmoke;
148  color: black;
149  text-align: center;
150  border-radius: 10px;
151  padding: 1em;
152  position: absolute;
153  left: -1.5em;
154  top: -8em;
155  z-index: 1;
156  transition: .1s ease-in-out;
157}
158
159.btn3 .tooltiptext3 .card {
160  width: 4em;
161  height: 4em;
162  background-color: white;
163}
164
165.btn3 .tooltiptext3 .account {
166  margin-top: 1em;
167}
168
169.btn3 .tooltiptext3 .username {
170  font-size: 0.7em;
171  margin-top: 1.6em;
172  font-weight: bold;
173}
174
175.btn3:hover .tooltiptext3 {
176  transform: translateY(-1em);
177  visibility: visible;
178}
179
180.btn3:hover {
181  background-color: black;
182}
183
184.btn3:hover .git {
185  fill: white;
186}