1.card-border {
2  z-index: 0;
3  position: relative;
4  padding: 1rem;
5  width: 300px;
6  height: 350px;
7  box-sizing: border-box;
8  background: transparent;
9  backdrop-filter: blur(40px);
10  border-radius: 0px 2rem;
11  background-image: radial-gradient(#2121218a, #212121cc), linear-gradient(35deg,#124926 62%,#57ff94 100%);
12  background-origin: border-box;
13  background-clip: content-box, border-box;
14  box-shadow: 1px 1px 3rem #57ff95;
15  transition: all 0.5s;
16  animation: pulse_3011 3s infinite;
17}
18
19.card-bg {
20  position: relative;
21  box-sizing: border-box;
22  width: 100%;
23  height: 100%;
24  overflow: hidden;
25  border-radius: 0px 0.8rem;
26  background: linear-gradient(346.80deg, #124926 30%, #165c30 30%, rgba(255, 70, 84, 0) 30%, rgba(255, 70, 84, 0) 32%, #124926 32%, #124926  35%, transparent 35%);
27}
28
29strong {
30  display: flex;
31  height: 100%;
32  width: 100%;
33  text-transform: uppercase;
34  font-family: 'Open Sans Pro', sans-serif;
35  font-size: 1.6rem;
36  font-weight: 900;
37  align-items: center;
38  letter-spacing: 0.5rem;
39}
40
41#text-border {
42  position: absolute;
43  top: 15.35rem;
44  left: 1.5rem;
45  width: 100%;
46  height: fit-content;
47  color: transparent;
48  -webkit-text-stroke-width: 1px;
49  -webkit-text-stroke-color: rgb(255, 255, 255);
50  background: linear-gradient(90deg,  transparent 100%, #ffffff  65%);
51  background-size: cover;
52  background-clip: text;
53  -webkit-background-clip: text;
54}
55
56#text-ext {
57  z-index: -1;
58  display: flex;
59  position: absolute;
60  inset: 1rem;
61  -webkit-text-stroke-width: 1px;
62  -webkit-text-stroke-color: #ffffff;
63  background: linear-gradient(346.80deg, rgb(255, 255, 255)  30%, #ffffff 30%, #ffffff 30%, rgb(255, 255, 255)  32%, rgb(255, 255, 255)  32%, rgb(255, 255, 255) 35%);
64  background-size: cover;
65  background-clip: text;
66  -webkit-background-clip: text;
67  -webkit-text-fill-color: transparent;
68  padding: 9rem 0 0 0.5rem;
69}
70
71.marquee {
72  top: 0;
73  z-index: -5;
74  width: 100%;
75  height: 100%;
76  position: absolute;
77  overflow: hidden;
78  --offset: 2rem;
79  --move-initial: calc(-20% + var(--offset));
80  --move-final: calc(-85% + var(--offset));
81  border-radius: 0px 1rem;
82  filter: opacity(0.3);
83}
84
85.marquee__inner {
86  width: fit-content;
87  display: flex;
88  position: relative;
89  transform: translate3d(var(--move-initial), 0, 0);
90  animation: slide 60s linear infinite;
91  border-radius: 0px 1rem;
92}
93
94.marquee__inner {
95  animation-play-state: running;
96}
97
98#blur-area {
99  display: block;
100  position: absolute;
101  z-index: -1;
102  inset: 0;
103  /* border: 1px solid rgb(12, 255, 65); */
104  border-radius: 0 1rem;
105  backdrop-filter: blur(3px);
106  background: linear-gradient(90deg, transparent  0%, #00000044 100%);
107}
108
109.viper {
110  display: flex;
111  text-transform: uppercase;
112  font-family: 'Open Sans Pro', sans-serif;
113  font-size: 8rem;
114  font-weight: 900;
115  align-items: center;
116  line-height: 0.9em;
117  color: transparent;
118  -webkit-text-stroke-width: 2px;
119  -webkit-text-stroke-color: rgb(255, 255, 255);
120}
121
122.container-logo {
123  display: flex;
124  position: absolute;
125  width: 3.5rem;
126  height: 3em;
127  top: 1rem;
128  left: 1rem;
129  align-items: center;
130  justify-content: center;
131  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
132}
133
134.logo {
135  position: absolute;
136  width: 200%;
137  height: 200%;
138  background: conic-gradient(#228647 0%, #fff 10%, #7bffac 25%, #0d381c 50%, #1ccc5d 70%, #69b384 90%);
139  animation: spin 5s linear infinite;
140}
141
142.logo-inside {
143  display: flex;
144  width: 85%;
145  height: 85%;
146  align-items: center;
147  justify-content: center;
148  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
149  background-color: #212121;
150}
151
152.first, .second {
153  position: absolute;
154  width: 30px;
155  height: 30px;
156  background-color: #57ff95;
157}
158
159.first {
160  clip-path: polygon(0 10%, 70% 90%, 35% 90%, 0 50%);
161}
162
163.second {
164  clip-path: polygon(100% 10%, 100% 50%, 88% 65%, 55% 65%);
165}
166
167.mist-container {
168  position: absolute;
169  width: 450px;
170  height: 150px;
171  overflow: hidden;
172  filter: blur(1rem);
173  top: 60%;
174  left: 0;
175}
176
177.mist {
178  width: 100%;
179  height: 100%;
180  background: radial-gradient(circle, rgba(131, 255, 158, 0.63) 10%, rgba(255, 255, 255, 0) 50%);
181  animation: mist 10s infinite both;
182}
183
184svg {
185  position: absolute;
186  top: 0%;
187  width: 18rem;
188  height: 100%;
189  z-index: -2;
190}
191
192.card-border:hover {
193  transform: rotateY(20deg);
194}
195
196@keyframes spin {
197  from {
198    transform: rotate(0deg);
199  }
200
201  to {
202    transform: rotate(360deg);
203  }
204}
205
206@keyframes mist {
207  0% {
208    transform: translateX(-50%) translateY(0%) scaleY(0.7) rotate(0deg);
209    opacity: 0.3;
210  }
211
212  50% {
213    transform: translateX(0%) translateY(50%) scaleY(-10.3) rotate(20deg);
214    opacity: 0.5;
215  }
216
217  100% {
218    transform: translateX(-50%) translateY(0%) scaleY(0.7) rotate(-20deg);
219    opacity: 0.3;
220  }
221}
222
223@keyframes pulse_3011 {
224  0% {
225    box-shadow: 0 0 1rem #57ff95;
226  }
227
228  70% {
229    box-shadow: 0 0 2rem #57ff95;
230  }
231
232  100% {
233    box-shadow: 0 0 1rem #57ff95;
234  }
235}
236
237@keyframes slide {
238  0% {
239    transform: translate3d(var(--move-initial), 0, 0);
240  }
241
242  100% {
243    transform: translate3d(var(--move-final), 0, 0);
244  }
245}