ftfty76 commited on
Commit
df9b14f
·
verified ·
1 Parent(s): 9156b45

Upload 8 files

Browse files
Files changed (8) hide show
  1. Dockerfile +17 -0
  2. README.md +5 -6
  3. deno.json +23 -0
  4. src/huggingface.ts +72 -0
  5. src/layouts/layout.tsx +20 -0
  6. src/lucinda.ts +8 -0
  7. src/main.tsx +104 -0
  8. static/global.css +329 -0
Dockerfile ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ FROM denoland/deno:latest
2
+
3
+ EXPOSE 7860
4
+
5
+ WORKDIR /app
6
+
7
+ # Prefer not to run as root.
8
+ USER deno
9
+
10
+ RUN deno install
11
+
12
+ COPY . .
13
+
14
+ # Compile the main app so that it doesn't need to be compiled each startup/entry.
15
+ RUN deno cache src/main.tsx
16
+
17
+ CMD ["task", "start"]
README.md CHANGED
@@ -1,12 +1,11 @@
1
  ---
2
- title: AGI
3
- emoji: 🌖
4
- colorFrom: yellow
5
  colorTo: green
6
  sdk: docker
7
- pinned: false
8
- license: apache-2.0
9
- short_description: AGI
10
  ---
11
 
12
  Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: AGI Demo
3
+ emoji: 🤖
4
+ colorFrom: indigo
5
  colorTo: green
6
  sdk: docker
7
+ pinned: true
8
+ short_description: Introduction to Artificial General Intelligence
 
9
  ---
10
 
11
  Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
deno.json ADDED
@@ -0,0 +1,23 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "tasks": {
3
+ "start": "deno --allow-net --allow-read --allow-env --env-file=.env --unstable-cron --watch src/main.tsx"
4
+ },
5
+ "imports": {
6
+ "@hono/hono": "jsr:@hono/hono@^4.7.1",
7
+ "@std/async": "jsr:@std/async@^1.0.11",
8
+ "@std/random": "jsr:@std/random@^0.1.0"
9
+ },
10
+ "compilerOptions": {
11
+ "jsx": "precompile",
12
+ "jsxImportSource": "@hono/hono/jsx"
13
+ },
14
+ "lock": false,
15
+ "fmt": {
16
+ "indentWidth": 2,
17
+ "lineWidth": 69420,
18
+ "proseWrap": "preserve",
19
+ "semiColons": true,
20
+ "singleQuote": true,
21
+ "useTabs": false
22
+ }
23
+ }
src/huggingface.ts ADDED
@@ -0,0 +1,72 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { delay } from '@std/async/delay';
2
+ import { shuffle } from '@std/random';
3
+
4
+ type User = {
5
+ user: string;
6
+ fullname: string;
7
+ type: string;
8
+ isFollowing?: true;
9
+ _id: string;
10
+ isPro: boolean;
11
+ avatarUrl: string;
12
+ };
13
+
14
+ export class HuggingFace {
15
+ constructor(public cookie: string) {
16
+ }
17
+
18
+ async getOrganizationFollowers(organization: string, cursor?: string) {
19
+ const url = new URL(`https://huggingface.co/api/organizations/${organization}/followers`);
20
+ cursor && url.searchParams.append('cursor', cursor);
21
+ const response = await fetch(url, {
22
+ headers: {
23
+ 'Cookie': this.cookie,
24
+ },
25
+ });
26
+ if (!response.ok) throw Error(`${response.status} ${response.statusText}`);
27
+
28
+ return await response.json() as User[];
29
+ }
30
+
31
+ async getNonFollowingUsers(organization: string) {
32
+ let cursor: string | undefined = undefined;
33
+ while (true) {
34
+ const users = await this.getOrganizationFollowers(organization, cursor);
35
+ if (!users.length) throw Error('No users found');
36
+ const nonFollowing = users.filter((user) => !user.isFollowing);
37
+ if (nonFollowing.length) return nonFollowing;
38
+ cursor = users[users.length - 1]._id;
39
+ }
40
+ }
41
+
42
+ async followRandomUsers(organization: string) {
43
+ const users = await this.getNonFollowingUsers(organization);
44
+ const shuffled = shuffle(users);
45
+ for (let i = 0; i < shuffled.length; i++) {
46
+ await delay(1000);
47
+ const user = shuffled[i];
48
+ const res = await this.follow(user.user);
49
+ if (res.status === 429) {
50
+ console.error((await res.json()).error);
51
+ return i;
52
+ }
53
+ const body = await res.text();
54
+ if (body.trim().toLowerCase() === 'ok') {
55
+ console.log(`Followed ${user.user}`);
56
+ } else {
57
+ console.warn(`Failed to follow ${user.user}`);
58
+ continue;
59
+ }
60
+ }
61
+ }
62
+
63
+ async follow(user: string) {
64
+ return await fetch(`https://huggingface.co/api/users/${user}/follow`, {
65
+ method: 'post',
66
+ headers: {
67
+ 'content-type': 'application/json',
68
+ 'Cookie': this.cookie,
69
+ },
70
+ });
71
+ }
72
+ }
src/layouts/layout.tsx ADDED
@@ -0,0 +1,20 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import type { FC } from '@hono/hono/jsx';
2
+
3
+ export const Layout: FC = (props) => {
4
+ return (
5
+ <html lang='en'>
6
+ <head>
7
+ <meta charset='UTF-8' />
8
+ <meta name='viewport' content='width=device-width, initial-scale=1.0' />
9
+ <meta name='title' content='Introduction to Artificial General Intelligence' />
10
+ <meta name='description' content='Introduction to Artificial General Intelligence' />
11
+ <meta name='color-scheme' content='light dark' />
12
+ <link rel='stylesheet' href='static/global.css' />
13
+ <title>Introduction to Artificial General Intelligence</title>
14
+ </head>
15
+ <body>
16
+ {props.children}
17
+ </body>
18
+ </html>
19
+ );
20
+ };
src/lucinda.ts ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ export async function getLatestVideo(): Promise<string> {
2
+ const res = await fetch('https://www.youtube.com/@Lucinda-0101');
3
+ if (!res.ok) throw new Error('Failed to fetch');
4
+ const text = await res.text();
5
+ const match = text.match(/https:\/\/i\.ytimg\.com\/vi\/(\S+?)\//);
6
+ if (!match) throw new Error('Failed to match');
7
+ return match[1];
8
+ }
src/main.tsx ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Hono } from '@hono/hono';
2
+ import { logger } from '@hono/hono/logger';
3
+ import { serveStatic } from '@hono/hono/deno';
4
+ import { Layout } from './layouts/layout.tsx';
5
+ import { getLatestVideo } from './lucinda.ts';
6
+ import { HuggingFace } from './huggingface.ts';
7
+
8
+ const HF_COOKIE = Deno.env.get('HF_COOKIE');
9
+ if (!HF_COOKIE) throw new Error('Missing HF_COOKIE');
10
+
11
+ const app = new Hono();
12
+
13
+ let counter = 0;
14
+
15
+ app.use(logger());
16
+
17
+ app.use('/static/*', serveStatic({ root: './' }));
18
+
19
+ app.get('/', async (c) => {
20
+ counter++;
21
+ console.log('Counter:', counter);
22
+
23
+ let video: string;
24
+ try {
25
+ video = await getLatestVideo();
26
+ } catch (e) {
27
+ console.error(e);
28
+ video = 'srs1dXyAoTQ';
29
+ }
30
+ return c.html(
31
+ <Layout>
32
+ <div class='matrix-bg'></div>
33
+ <div class='bg-animation'>
34
+ <div class='particle'></div>
35
+ <div class='particle'></div>
36
+ <div class='particle'></div>
37
+ <div class='particle'></div>
38
+ <div class='particle'></div>
39
+ </div>
40
+ <header>
41
+ <div class='visitor-counter'>Visitors: {counter}</div>
42
+ <h1>Artificial General Intelligence</h1>
43
+ <div class='subtitle'>Understanding the Future of AI</div>
44
+ </header>
45
+ <div class='container'>
46
+ <div class='video-container'>
47
+ <iframe src={`https://www.youtube.com/embed/${video}?autoplay=1`} frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen></iframe>
48
+ </div>
49
+ <section class='intro-text'>
50
+ <h2>What is Artificial General Intelligence?</h2>
51
+ <p>Artificial General Intelligence (AGI) refers to highly autonomous systems that outperform humans at most economically valuable work. Unlike narrow AI systems designed for specific tasks, AGI aims to possess the ability to understand, learn, and apply knowledge across a wide range of domains—similar to human intelligence.</p>
52
+ <p>The development of AGI represents one of the most profound technological challenges and opportunities of our time, with potential impacts across virtually every aspect of human society.</p>
53
+ </section>
54
+ <section class='key-points'>
55
+ <div class='point-card'>
56
+ <h3>Key Characteristics</h3>
57
+ <p>AGI systems would demonstrate human-like capabilities including:</p>
58
+ <ul>
59
+ <li>Abstract reasoning</li>
60
+ <li>Transfer learning across domains</li>
61
+ <li>Natural language understanding</li>
62
+ <li>Adaptability to new situations</li>
63
+ <li>Problem-solving without specific programming</li>
64
+ </ul>
65
+ </div>
66
+
67
+ <div class='point-card'>
68
+ <h3>Current Progress</h3>
69
+ <p>While we have made significant advances in AI with large language models and multimodal systems, true AGI remains a future goal. Current systems excel in specific domains but lack the generality, robustness, and adaptability that define AGI.</p>
70
+ <p>Researchers are exploring various pathways including scaling existing architectures, developing more sample-efficient learning methods, and incorporating causal reasoning.</p>
71
+ </div>
72
+
73
+ <div class='point-card'>
74
+ <h3>Ethical Considerations</h3>
75
+ <p>The development of AGI raises important questions about:</p>
76
+ <ul>
77
+ <li>Alignment with human values</li>
78
+ <li>Safety and control mechanisms</li>
79
+ <li>Equitable distribution of benefits</li>
80
+ <li>Impact on labor markets and society</li>
81
+ <li>Governance frameworks for advanced AI</li>
82
+ </ul>
83
+ </div>
84
+ </section>
85
+ </div>
86
+ </Layout>,
87
+ );
88
+ });
89
+
90
+ app.post('/', (c) => c.text('ok'));
91
+
92
+ Deno.serve({ port: 7860 }, app.fetch);
93
+
94
+ Deno.cron('follow', '0 0 * * *', async () => {
95
+ const hf = new HuggingFace(HF_COOKIE);
96
+ const count = await hf.followRandomUsers('meta-llama');
97
+ console.log('Number of users followed:', count);
98
+ });
99
+
100
+ Deno.cron('test', '0 * * * *', async () => {
101
+ const host = 'https://' + Deno.env.get('SPACE_HOST');
102
+ const res = await fetch(host, { method: 'POST' });
103
+ console.log(await res.text());
104
+ });
static/global.css ADDED
@@ -0,0 +1,329 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
+ line-height: 1.6;
10
+ color: #e0e0e0;
11
+ background-color: #121212;
12
+ padding: 0;
13
+ min-height: 100vh;
14
+ position: relative;
15
+ overflow-x: hidden;
16
+ }
17
+
18
+ /* Background Animation */
19
+ .bg-animation {
20
+ position: fixed;
21
+ top: 0;
22
+ left: 0;
23
+ width: 100%;
24
+ height: 100%;
25
+ z-index: -1;
26
+ overflow: hidden;
27
+ }
28
+
29
+ .bg-animation .particle {
30
+ position: absolute;
31
+ border-radius: 50%;
32
+ opacity: 0.3;
33
+ animation: float 15s infinite ease-in-out;
34
+ }
35
+
36
+ @keyframes float {
37
+ 0% {
38
+ transform: translateY(0) translateX(0);
39
+ }
40
+ 25% {
41
+ transform: translateY(-20px) translateX(10px);
42
+ }
43
+ 50% {
44
+ transform: translateY(0) translateX(20px);
45
+ }
46
+ 75% {
47
+ transform: translateY(20px) translateX(10px);
48
+ }
49
+ 100% {
50
+ transform: translateY(0) translateX(0);
51
+ }
52
+ }
53
+
54
+ .particle:nth-child(1) {
55
+ width: 100px;
56
+ height: 100px;
57
+ left: 10%;
58
+ top: 20%;
59
+ background: radial-gradient(
60
+ circle,
61
+ rgba(187, 134, 252, 0.3) 0%,
62
+ rgba(0, 0, 0, 0) 70%
63
+ );
64
+ animation-duration: 20s;
65
+ }
66
+
67
+ .particle:nth-child(2) {
68
+ width: 150px;
69
+ height: 150px;
70
+ right: 15%;
71
+ top: 30%;
72
+ background: radial-gradient(
73
+ circle,
74
+ rgba(3, 218, 198, 0.3) 0%,
75
+ rgba(0, 0, 0, 0) 70%
76
+ );
77
+ animation-duration: 25s;
78
+ animation-delay: 1s;
79
+ }
80
+
81
+ .particle:nth-child(3) {
82
+ width: 80px;
83
+ height: 80px;
84
+ left: 40%;
85
+ bottom: 30%;
86
+ background: radial-gradient(
87
+ circle,
88
+ rgba(187, 134, 252, 0.2) 0%,
89
+ rgba(0, 0, 0, 0) 70%
90
+ );
91
+ animation-duration: 18s;
92
+ animation-delay: 2s;
93
+ }
94
+
95
+ .particle:nth-child(4) {
96
+ width: 120px;
97
+ height: 120px;
98
+ right: 30%;
99
+ bottom: 20%;
100
+ background: radial-gradient(
101
+ circle,
102
+ rgba(3, 218, 198, 0.2) 0%,
103
+ rgba(0, 0, 0, 0) 70%
104
+ );
105
+ animation-duration: 22s;
106
+ animation-delay: 3s;
107
+ }
108
+
109
+ .particle:nth-child(5) {
110
+ width: 170px;
111
+ height: 170px;
112
+ left: 20%;
113
+ bottom: 10%;
114
+ background: radial-gradient(
115
+ circle,
116
+ rgba(187, 134, 252, 0.1) 0%,
117
+ rgba(0, 0, 0, 0) 70%
118
+ );
119
+ animation-duration: 28s;
120
+ animation-delay: 0.5s;
121
+ }
122
+
123
+ /* Matrix effect in background */
124
+ .matrix-bg {
125
+ position: fixed;
126
+ top: 0;
127
+ left: 0;
128
+ width: 100%;
129
+ height: 100%;
130
+ z-index: -2;
131
+ opacity: 0.05;
132
+ background:
133
+ linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
134
+ url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="20" font-family="monospace" font-size="20" fill="rgb(3, 218, 198)">01</text><text x="50" y="40" font-family="monospace" font-size="15" fill="rgb(3, 218, 198)">10</text><text x="30" y="60" font-family="monospace" font-size="25" fill="rgb(187, 134, 252)">01</text><text x="70" y="80" font-family="monospace" font-size="18" fill="rgb(187, 134, 252)">10</text></svg>');
135
+ }
136
+
137
+ header {
138
+ background-color: rgba(26, 26, 26, 0.8);
139
+ backdrop-filter: blur(10px);
140
+ color: white;
141
+ text-align: center;
142
+ padding: 1.5rem 1rem;
143
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
144
+ position: relative;
145
+ }
146
+
147
+ h1 {
148
+ font-size: 3rem;
149
+ margin-bottom: 0.5rem;
150
+ color: #bb86fc;
151
+ text-shadow: 0 0 10px rgba(187, 134, 252, 0.7), 0 0 20px rgba(187, 134, 252, 0.5), 0 0 30px rgba(187, 134, 252, 0.3);
152
+ background: linear-gradient(45deg, #bb86fc, #03dac6);
153
+ -webkit-background-clip: text;
154
+ background-clip: text;
155
+ color: transparent;
156
+ letter-spacing: 2px;
157
+ transform: perspective(500px) rotateX(10deg);
158
+ animation: glow 2s ease-in-out infinite alternate;
159
+ font-weight: 800;
160
+ }
161
+
162
+ @keyframes glow {
163
+ from {
164
+ filter: brightness(1);
165
+ }
166
+ to {
167
+ filter: brightness(1.3);
168
+ }
169
+ }
170
+
171
+ .subtitle {
172
+ font-size: 1.2rem;
173
+ font-weight: 300;
174
+ opacity: 0.9;
175
+ }
176
+
177
+ .visitor-counter {
178
+ position: absolute;
179
+ top: 10px;
180
+ right: 15px;
181
+ font-size: 0.75rem;
182
+ opacity: 0.5;
183
+ color: #888;
184
+ font-style: italic;
185
+ }
186
+
187
+ .container {
188
+ max-width: 1200px;
189
+ margin: 0 auto;
190
+ padding: 1.5rem;
191
+ position: relative;
192
+ z-index: 1;
193
+ }
194
+
195
+ .video-container {
196
+ width: 100%;
197
+ max-width: 900px;
198
+ margin: 0 auto 2rem auto;
199
+ aspect-ratio: 16 / 9;
200
+ background-color: #1a1a1a;
201
+ border-radius: 8px;
202
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(187, 134, 252, 0.3);
203
+ overflow: hidden;
204
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
205
+ }
206
+
207
+ .video-container:hover {
208
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(187, 134, 252, 0.4);
209
+ }
210
+
211
+ .video-container iframe {
212
+ width: 100%;
213
+ height: 100%;
214
+ border: none;
215
+ }
216
+
217
+ .intro-text {
218
+ background-color: rgba(30, 30, 30, 0.8);
219
+ backdrop-filter: blur(5px);
220
+ padding: 1.5rem;
221
+ border-radius: 8px;
222
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
223
+ margin-bottom: 2rem;
224
+ border: 1px solid rgba(187, 134, 252, 0.1);
225
+ transition: transform 0.3s ease;
226
+ }
227
+
228
+ .intro-text:hover {
229
+ transform: translateY(-3px);
230
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
231
+ }
232
+
233
+ h2 {
234
+ color: #bb86fc;
235
+ margin-bottom: 1rem;
236
+ border-bottom: 2px solid #03dac6;
237
+ padding-bottom: 0.5rem;
238
+ text-shadow: 0 0 8px rgba(187, 134, 252, 0.3);
239
+ }
240
+
241
+ p {
242
+ margin-bottom: 1rem;
243
+ }
244
+
245
+ .key-points {
246
+ display: grid;
247
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
248
+ gap: 1.5rem;
249
+ margin-bottom: 2rem;
250
+ }
251
+
252
+ .point-card {
253
+ background-color: rgba(30, 30, 30, 0.8);
254
+ backdrop-filter: blur(5px);
255
+ padding: 1.5rem;
256
+ border-radius: 8px;
257
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
258
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
259
+ border: 1px solid rgba(3, 218, 198, 0.1);
260
+ position: relative;
261
+ overflow: hidden;
262
+ }
263
+
264
+ .point-card::before {
265
+ content: '';
266
+ position: absolute;
267
+ top: 0;
268
+ left: 0;
269
+ width: 4px;
270
+ height: 0;
271
+ background: linear-gradient(to bottom, #bb86fc, #03dac6);
272
+ transition: height 0.5s ease;
273
+ }
274
+
275
+ .point-card:hover {
276
+ transform: translateY(-5px);
277
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
278
+ }
279
+
280
+ .point-card:hover::before {
281
+ height: 100%;
282
+ }
283
+
284
+ .point-card h3 {
285
+ color: #03dac6;
286
+ margin-bottom: 1rem;
287
+ text-shadow: 0 0 8px rgba(3, 218, 198, 0.3);
288
+ }
289
+
290
+ ul {
291
+ padding-left: 1.5rem;
292
+ margin-bottom: 1rem;
293
+ }
294
+
295
+ li {
296
+ margin-bottom: 0.5rem;
297
+ }
298
+
299
+ footer {
300
+ background-color: rgba(26, 26, 26, 0.8);
301
+ backdrop-filter: blur(10px);
302
+ color: white;
303
+ text-align: center;
304
+ padding: 1.5rem;
305
+ margin-top: 2rem;
306
+ position: relative;
307
+ z-index: 1;
308
+ }
309
+
310
+ @media (max-width: 768px) {
311
+ h1 {
312
+ font-size: 2rem;
313
+ }
314
+
315
+ .container {
316
+ padding: 1rem;
317
+ }
318
+
319
+ .visitor-counter {
320
+ position: static;
321
+ display: block;
322
+ margin-bottom: 0.5rem;
323
+ text-align: right;
324
+ }
325
+
326
+ .bg-animation .particle {
327
+ opacity: 0.2;
328
+ }
329
+ }