1.container {
2  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
3  font-style: italic;
4  font-weight: bold;
5  display: flex;
6  margin: auto;
7  aspect-ratio: 16/9;
8  align-items: center;
9  justify-items: center;
10  justify-content: center;
11  flex-wrap: wrap;
12  flex-direction: column;
13  gap: 1em;
14}
15
16.card-container {
17  filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9);
18  animation: blinkShadowsFilter 8s ease-in infinite;
19}
20
21.card-content {
22  display: grid;
23  align-content: center;
24  justify-items: center;
25  align-items: center;
26  text-align: center;
27  padding: 1em;
28  grid-template-rows: 0.1fr 0.7fr 0.25fr;
29  background-color: hsl(296, 59%, 10%);
30  width: 10em;
31  aspect-ratio: 9/16;
32  -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
33  clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
34}
35
36.card-content::before {
37  content: "";
38  position: absolute;
39  width: 250%;
40  aspect-ratio: 1/1;
41  transform-origin: center;
42  background: linear-gradient(to bottom, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent), linear-gradient(to left, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent);
43  animation: rotate 5s infinite linear;
44}
45
46.card-content::after {
47  content: "";
48  position: absolute;
49  top: 1%;
50  left: 1%;
51  width: 98%;
52  height: 98%;
53  background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, rgba(64, 144, 181, 0.3019607843) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%);
54  box-shadow: inset 0px 0px 30px 40px hsl(296, 59%, 10%);
55  -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
56  clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
57  animation: backglitch 94ms linear infinite;
58}
59
60.card-title {
61  z-index: 80;
62  -webkit-clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%);
63  clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%);
64  background: linear-gradient(90deg, rgba(255, 254, 250, 0) 0%, rgba(102, 224, 255, 0.3) 27%, rgba(102, 224, 255, 0.3) 63%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(102, 224, 255, 0.3) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 96%, rgba(102, 224, 255, 0.3) 100%);
65  width: 98%;
66  font-size: 1.2em;
67}
68
69.title {
70  width: 100%;
71  height: 100%;
72  text-align: right;
73  position: relative;
74  z-index: 2;
75  color: hsl(192, 100%, 88%);
76  font-size: 1em;
77  transition: all ease-in-out 2s linear;
78}
79
80.card-body {
81  padding-block: 1.5em;
82  padding-inline: 1em;
83  z-index: 80;
84  display: flex;
85  gap: 1.5em;
86  flex-wrap: wrap;
87  justify-content: space-around;
88  align-items: center;
89  align-content: center;
90}
91
92.svg-card {
93  text-decoration: none;
94  color: hsl(192, 100%, 88%);
95  background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);
96  fill: currentColor;
97  width: 2em;
98  aspect-ratio: 1/1;
99  display: flex;
100  justify-content: center;
101  align-items: center;
102  transition: 0.5s;
103}
104
105.svg-card .face {
106  width: 0.7em;
107}
108
109.svg-card .twit {
110  width: 1em;
111}
112
113.svg-card .insta {
114  width: 1em;
115}
116
117.svg-card .whats {
118  width: 1.1em;
119}
120
121.svg-card:hover {
122  cursor: pointer;
123  color: hsl(192, 100%, 100%);
124}
125
126.card-footer {
127  padding-inline: 1em;
128}
129
130@keyframes backglitch {
131  0% {
132    box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%);
133  }
134
135  50% {
136    box-shadow: inset 0px -20px 30px 40px hsl(296, 59%, 10.2%);
137  }
138
139  to {
140    box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%);
141  }
142}
143
144@keyframes rotate {
145  0% {
146    transform: rotate(0deg) translate(-50%, 20%);
147  }
148
149  50% {
150    transform: rotate(180deg) translate(40%, 10%);
151  }
152
153  to {
154    transform: rotate(360deg) translate(-50%, 20%);
155  }
156}
157
158@keyframes blinkShadowsFilter {
159  0% {
160    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);
161  }
162
163  25% {
164    filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 24px #9e30a9);
165  }
166
167  50% {
168    filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));
169  }
170
171  75% {
172    filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));
173  }
174
175  to {
176    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);
177  }
178}/*# sourceMappingURL=style.css.map */