From dfa2ad7288582a836252271a55ff0f3b65c8c8a4 Mon Sep 17 00:00:00 2001
From: 9pfs <9pfs@amcforum.wiki>
Date: Sun, 1 Oct 2023 22:21:42 -0400
Subject: [PATCH] Make lots of changes

I made lots of changes and removed a few leftover dependencies that got copied over from the world of Replit.

Reviewed-on: https://git.amcforum.wiki/Firepup650/firepup-site/pulls/5
Co-authored-by: 9pfs <9pfs@amcforum.wiki>
Co-committed-by: 9pfs <9pfs@amcforum.wiki>
---
 public/dynamic/about-you.ejs              |    2 +-
 public/dynamic/raw.ejs                    |    2 +-
 public/dynamic/server-info.ejs            |    8 +-
 public/dynamic/spotify-history.ejs        |    8 +-
 public/dynamic/spotify-queue.ejs          |    8 +-
 public/dynamic/spotify.ejs                |    8 +-
 public/errors/403.ejs                     |    6 +-
 public/errors/404.ejs                     |    6 +-
 public/errors/422.ejs                     |    6 +-
 public/errors/500.ejs                     |    6 +-
 public/pages/cheese.html                  |    2 +-
 public/pages/construction.html            |    2 +-
 public/pages/dvd-screensaver.html         |    2 +-
 public/pages/forbidden.html               |    2 +-
 public/pages/hidden.html                  |    2 +-
 public/pages/index.html                   |    2 +-
 public/pages/maintenance.html             |    2 +-
 public/pages/password-generator.html      |    2 +-
 public/pages/pfps.html                    |    2 +-
 public/pages/ratings.html                 |    2 +-
 public/pages/ratings/9pfs.html            |    2 +-
 public/pages/ratings/bigminiboss.html     |    2 +-
 public/pages/ratings/coderelijah.html     |    2 +-
 public/pages/ratings/jayayseaohbee14.html |    2 +-
 public/pages/ratings/pikachub2005.html    |    2 +-
 public/pages/ratings/youngchief.html      |    2 +-
 public/pages/usage.html                   |    2 +-
 public/pages/users.html                   |    2 +-
 public/pages/users/9pfs.html              |    2 +-
 public/pages/users/bigminiboss.html       |    2 +-
 public/pages/users/coderelijah.html       |    2 +-
 public/pages/users/jayayseaohbee14.html   |    2 +-
 public/pages/users/pikachub2005.html      |    2 +-
 public/pages/users/youngchief.html        |    2 +-
 public/pages/visits.html                  |    2 +-
 public/styles/bounce.css                  | 1142 +++++++++++++++++++++
 36 files changed, 1197 insertions(+), 55 deletions(-)
 create mode 100644 public/styles/bounce.css

diff --git a/public/dynamic/about-you.ejs b/public/dynamic/about-you.ejs
index bea3fa8..992ebb7 100644
--- a/public/dynamic/about-you.ejs
+++ b/public/dynamic/about-you.ejs
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - About You</title>
     <link href="ejsstyle.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/abtbrow"></script> -->
     <h1 class="rainbow block">About Your Browser</h1>
diff --git a/public/dynamic/raw.ejs b/public/dynamic/raw.ejs
index a88eb5d..3abf2ca 100644
--- a/public/dynamic/raw.ejs
+++ b/public/dynamic/raw.ejs
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - Raw - <%= fileName %></title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/raw"></script> -->
   </head>
diff --git a/public/dynamic/server-info.ejs b/public/dynamic/server-info.ejs
index 92ed1cc..af64851 100644
--- a/public/dynamic/server-info.ejs
+++ b/public/dynamic/server-info.ejs
@@ -2,9 +2,9 @@
 <html>
   <head>
     <title>FP650 - Server Info</title>
-    <link href="https://firepup650.repl.co/ejsstyle.css" rel="stylesheet" type="text/css" />
-    <link rel="icon" type="image/x-icon" href="https://firepup650.repl.co/favicon.ico">
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/ejsstyle.css" rel="stylesheet" type="text/css" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/abtserv"></script> -->
   </head>
@@ -13,6 +13,6 @@
     <p class=rainbow>Author: <%= author %></p>
     <p class=rainbow>Uptime: <%= uptime %> seconds</p>
     <p class=rainbow>Total Pages: <%= images %></p>
-    <script src="https://firepup650.repl.co/footer.js"></script>
+    <script src="/footer.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/public/dynamic/spotify-history.ejs b/public/dynamic/spotify-history.ejs
index 527c1ae..4f8ef9c 100644
--- a/public/dynamic/spotify-history.ejs
+++ b/public/dynamic/spotify-history.ejs
@@ -2,9 +2,9 @@
 <html>
   <head>
     <title>FP650 - YCS - History</title>
-    <link href="https://firepup650.repl.co/ejsstyle.css" rel="stylesheet" type="text/css" />
-    <link rel="icon" type="image/x-icon" href="https://firepup650.repl.co/favicon.ico">
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/ejsstyle.css" rel="stylesheet" type="text/css" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/YCSP"></script> -->
   </head>
@@ -20,6 +20,6 @@
       <p class=rainbow>Error: <%= err %></p>
     <% } %>
     <p class=rainbow>Raw data: <%= raw %></p>
-    <script src="https://firepup650.repl.co/footer.js"></script>
+    <script src="/footer.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/public/dynamic/spotify-queue.ejs b/public/dynamic/spotify-queue.ejs
index 350f6ce..483a79c 100644
--- a/public/dynamic/spotify-queue.ejs
+++ b/public/dynamic/spotify-queue.ejs
@@ -2,9 +2,9 @@
 <html>
   <head>
     <title>FP650 - YCS - Queue</title>
-    <link href="https://firepup650.repl.co/ejsstyle.css" rel="stylesheet" type="text/css" />
-    <link rel="icon" type="image/x-icon" href="https://firepup650.repl.co/favicon.ico">
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/ejsstyle.css" rel="stylesheet" type="text/css" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/YCSP"></script> -->
   </head>
@@ -20,6 +20,6 @@
       <p class=rainbow>Error: <%= err %></p>
     <% } %>
     <p class=rainbow>Raw data: <%= raw %></p>
-    <script src="https://firepup650.repl.co/footer.js"></script>
+    <script src="/footer.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/public/dynamic/spotify.ejs b/public/dynamic/spotify.ejs
index dc299b0..7069d74 100644
--- a/public/dynamic/spotify.ejs
+++ b/public/dynamic/spotify.ejs
@@ -2,9 +2,9 @@
 <html>
   <head>
     <title>FP650 - Youngchief's Spotify</title>
-    <link href="https://firepup650.repl.co/style.css" rel="stylesheet" type="text/css" />
-    <link rel="icon" type="image/x-icon" href="https://firepup650.repl.co/favicon.ico">
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/style.css" rel="stylesheet" type="text/css" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/YCSP"></script> -->
   </head>
@@ -25,6 +25,6 @@
     <p class=rainbow>Raw data: <%= raw %></p>
     <p class=rainbow>Cover Art:</p>
     <img src="<%= cal %>" class="no-bounce">
-    <script src="https://firepup650.repl.co/footer.js"></script>
+    <script src="/footer.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/public/errors/403.ejs b/public/errors/403.ejs
index 85f1457..f471124 100644
--- a/public/errors/403.ejs
+++ b/public/errors/403.ejs
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>FP650 - 403 Error</title>
-    <link href="https://firepup650.repl.co/ejsstyle.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/ejsstyle.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/403error"></script> -->
   </head>
@@ -17,6 +17,6 @@
     <% } else { %>
       <p class="center warning">The requested page is forbidden to access on the server.</p>
     <% } %>
-    <script src="https://firepup650.repl.co/footer.js"></script>
+    <script src="/footer.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/public/errors/404.ejs b/public/errors/404.ejs
index b6f6998..a96a851 100644
--- a/public/errors/404.ejs
+++ b/public/errors/404.ejs
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>FP650 - 404 Error</title>
-    <link href="https://firepup650.repl.co/ejsstyle.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/ejsstyle.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/404error"></script> -->
   </head>
@@ -17,6 +17,6 @@
     <% } else { %>
       <p class="center warning">The requested page was not found on the server.</p>
     <% } %>
-    <script src="https://firepup650.repl.co/footer.js"></script>
+    <script src="/footer.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/public/errors/422.ejs b/public/errors/422.ejs
index 7492ce0..44a5f5a 100644
--- a/public/errors/422.ejs
+++ b/public/errors/422.ejs
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>FP650 - 422 Error</title>
-    <link href="https://firepup650.repl.co/ejsstyle.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/ejsstyle.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
     <h1 class="center warning">422 Unprocessable Entity</h1>
@@ -15,6 +15,6 @@
     <% } else { %>
       <p class="center warning">The requested url did not match a valid image request format.</p>
     <% } %>
-    <script src="https://firepup650.repl.co/footer.js"></script>
+    <script src="/footer.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/public/errors/500.ejs b/public/errors/500.ejs
index 980682d..b997c15 100644
--- a/public/errors/500.ejs
+++ b/public/errors/500.ejs
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>FP650 - 500 Error</title>
-    <link href="https://firepup650.repl.co/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/style.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/500error"></script> -->
   </head>
@@ -18,6 +18,6 @@
       <h2 class="center warning">Stack trace:</h2>
       <pre class="center warning"><%= error.stack %></pre>
     <% } %>
-    <script src="https://firepup650.repl.co/footer.js"></script>
+    <script src="/footer.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/public/pages/cheese.html b/public/pages/cheese.html
index 1a0ac7d..df7b187 100644
--- a/public/pages/cheese.html
+++ b/public/pages/cheese.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - Cheese</title>
     <link href="cheese.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/cheese"></script> -->
     <div id="preloads">
diff --git a/public/pages/construction.html b/public/pages/construction.html
index 45d7c59..faa5adf 100644
--- a/public/pages/construction.html
+++ b/public/pages/construction.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - Unfinished page</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/construction"></script> -->
   </head>
diff --git a/public/pages/dvd-screensaver.html b/public/pages/dvd-screensaver.html
index ef29fdd..ee3b4d1 100644
--- a/public/pages/dvd-screensaver.html
+++ b/public/pages/dvd-screensaver.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - DVD Screensaver</title>
     <link href="cheese.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/dvdscreensaver"></script> -->
     <!-- this is a preload \/ -->
diff --git a/public/pages/forbidden.html b/public/pages/forbidden.html
index eac71e4..ae895d6 100644
--- a/public/pages/forbidden.html
+++ b/public/pages/forbidden.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - You shouldn't be here.</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/hide"></script> -->
   </head>
diff --git a/public/pages/hidden.html b/public/pages/hidden.html
index f3d6464..1e97ce8 100644
--- a/public/pages/hidden.html
+++ b/public/pages/hidden.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - Hidden :O</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/hide"></script> -->
     <div id="preloads">
diff --git a/public/pages/index.html b/public/pages/index.html
index c192caf..bb6b32c 100644
--- a/public/pages/index.html
+++ b/public/pages/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/index"></script> -->
   </head>
diff --git a/public/pages/maintenance.html b/public/pages/maintenance.html
index 071c2ff..5b42daf 100644
--- a/public/pages/maintenance.html
+++ b/public/pages/maintenance.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - Maintenance</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/work"></script> -->
   </head>
diff --git a/public/pages/password-generator.html b/public/pages/password-generator.html
index 222da66..8bffb06 100644
--- a/public/pages/password-generator.html
+++ b/public/pages/password-generator.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - Password Generator</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/pgen"></script> -->
   </head>
diff --git a/public/pages/pfps.html b/public/pages/pfps.html
index eb749da..91e7210 100644
--- a/public/pages/pfps.html
+++ b/public/pages/pfps.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/index"></script> -->
   <div id="preloads">
diff --git a/public/pages/ratings.html b/public/pages/ratings.html
index dbeb751..c1c0a57 100644
--- a/public/pages/ratings.html
+++ b/public/pages/ratings.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - Ratings</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-ratings"></script> -->
   </head>
diff --git a/public/pages/ratings/9pfs.html b/public/pages/ratings/9pfs.html
index 84952d3..f96de3f 100644
--- a/public/pages/ratings/9pfs.html
+++ b/public/pages/ratings/9pfs.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - Ratings - 9pfs</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-ratings"></script>
   </head>
diff --git a/public/pages/ratings/bigminiboss.html b/public/pages/ratings/bigminiboss.html
index 056071f..c828da6 100644
--- a/public/pages/ratings/bigminiboss.html
+++ b/public/pages/ratings/bigminiboss.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - Ratings - BMB</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-ratings"></script>
   </head>
diff --git a/public/pages/ratings/coderelijah.html b/public/pages/ratings/coderelijah.html
index 4a7cbec..f0597e8 100644
--- a/public/pages/ratings/coderelijah.html
+++ b/public/pages/ratings/coderelijah.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - Ratings - CE</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-ratings"></script>
   </head>
diff --git a/public/pages/ratings/jayayseaohbee14.html b/public/pages/ratings/jayayseaohbee14.html
index d2e68bd..9353d4f 100644
--- a/public/pages/ratings/jayayseaohbee14.html
+++ b/public/pages/ratings/jayayseaohbee14.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - Ratngs - JASOB14</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-ratings"></script>
   </head>
diff --git a/public/pages/ratings/pikachub2005.html b/public/pages/ratings/pikachub2005.html
index 6ca3b91..dedde75 100644
--- a/public/pages/ratings/pikachub2005.html
+++ b/public/pages/ratings/pikachub2005.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - Ratings - PB2005</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-ratings"></script>
   </head>
diff --git a/public/pages/ratings/youngchief.html b/public/pages/ratings/youngchief.html
index 43c7fdc..856adf8 100644
--- a/public/pages/ratings/youngchief.html
+++ b/public/pages/ratings/youngchief.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - Ratings - YC</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-ratings"></script>
   </head>
diff --git a/public/pages/usage.html b/public/pages/usage.html
index 2b2f6a2..b9de395 100644
--- a/public/pages/usage.html
+++ b/public/pages/usage.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - Usage</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/usage"></script> -->
   </head>
diff --git a/public/pages/users.html b/public/pages/users.html
index a44db45..1df64be 100644
--- a/public/pages/users.html
+++ b/public/pages/users.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - Users</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-pages"></script> -->
   </head>
diff --git a/public/pages/users/9pfs.html b/public/pages/users/9pfs.html
index 04b38a7..eb6488b 100644
--- a/public/pages/users/9pfs.html
+++ b/public/pages/users/9pfs.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>FP650 - 9pfs</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-pages"></script> -->
   </head>
diff --git a/public/pages/users/bigminiboss.html b/public/pages/users/bigminiboss.html
index 3d33b53..6c5bcd0 100644
--- a/public/pages/users/bigminiboss.html
+++ b/public/pages/users/bigminiboss.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - bigminiboss</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-pages"></script> -->
   </head>
diff --git a/public/pages/users/coderelijah.html b/public/pages/users/coderelijah.html
index 01e8ed4..0d4efaa 100644
--- a/public/pages/users/coderelijah.html
+++ b/public/pages/users/coderelijah.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - CoderElijah</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-pages"></script> -->
   </head>
diff --git a/public/pages/users/jayayseaohbee14.html b/public/pages/users/jayayseaohbee14.html
index 91dc715..3bf7b94 100644
--- a/public/pages/users/jayayseaohbee14.html
+++ b/public/pages/users/jayayseaohbee14.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - JASOB14</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-pages"></script> -->
   </head>
diff --git a/public/pages/users/pikachub2005.html b/public/pages/users/pikachub2005.html
index 237d4c1..6bfd772 100644
--- a/public/pages/users/pikachub2005.html
+++ b/public/pages/users/pikachub2005.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - PikachuB2005</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-pages"></script> -->
   </head>
diff --git a/public/pages/users/youngchief.html b/public/pages/users/youngchief.html
index a20f66b..fa67d68 100644
--- a/public/pages/users/youngchief.html
+++ b/public/pages/users/youngchief.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - Youngchief</title>
     <link href="/style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
   <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/user-pages"></script> -->
   </head>
diff --git a/public/pages/visits.html b/public/pages/visits.html
index c70012f..c0cef16 100644
--- a/public/pages/visits.html
+++ b/public/pages/visits.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Firepup650 - Website Visits</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
-    <link href="https://bouncecss.bookie0.repl.co/bounce.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
     <script>
       function cb(response) {document.getElementById('visits').innerText = response.value;}
       function cb2(response) {document.getElementById('page').innerText = response.value;}
diff --git a/public/styles/bounce.css b/public/styles/bounce.css
new file mode 100644
index 0000000..4eceea9
--- /dev/null
+++ b/public/styles/bounce.css
@@ -0,0 +1,1142 @@
+/* @import url('https://bouncecss-anlytics.luisafk.repl.co/style.css'); */
+
+@font-face {
+  font-family: 'Clash Display Bold';
+  src: url('Fonts/Clash Display/ClashDisplay-Bold.otf');
+}
+
+@font-face {
+  font-family: 'Clash Display Semibold';
+  src: url('Fonts/Clash Display/ClashDisplay-Semibold.otf');
+}
+
+@font-face {
+  font-family: 'Clash Grotesk Medium';
+  src: url('Fonts/Clash Grotesk/ClashGrotesk-Medium.otf');
+}
+
+:root {
+	--white: #ffffff;
+
+	--light-gray: #EFEFEF;
+	--gray: #D8D8D8;
+
+	--black: #000000;
+	--dark-gray: #5E5E5E;
+
+	--cyan-dark: #28A489;
+	--cyan-normal: #70F1D5;
+	--cyan-light: #CAFFF3;
+
+	--pink-dark: #AB4787;
+	--pink-normal: #E065B3;
+	--pink-light: #FFB0E2;
+
+	--yellow-dark: #C9B951;
+	--yellow-normal: #FAE560;
+	--yellow-light: #FFF6BE;
+
+	--blue-dark: #468DB6;
+	--blue-normal: #54B8F3;
+	--blue-light: #B4E3FF;
+
+	--purple-dark: #643F9B;
+	--purple-normal: #9260DE;
+	--purple-light: #CDAEFD;
+} 
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+html, body {
+	color: var(--black);
+}
+
+.no-bounce {
+	outline: none !important;
+	box-shadow: none !important;
+	padding: 0 !important;
+	transform: none !important
+}
+
+/* fix for glitch effect when hovering on bottom of elements (thanks to @nathanTi!) */
+card, button, table tr, a, .switch-container {
+  position: relative;
+}
+
+card:after, button:after, table tr:after, a:after, .switch-container:after {
+  content: '';
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  width: calc(100% + 4px);
+  border-radius: 4px;
+  height: calc(100% + 4px);
+  transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+  cursor: inherit;
+  border: none;
+	z-index: -1;
+}
+
+.switch-container:after {
+  border-radius: 16px;
+  cursor: pointer;
+}
+
+card:hover:after, button:hover:after, table tr:hover:after, a:hover:after, .switch-container:hover:after {
+  transform: translateX(-5px) translateY(5px);
+}
+
+card:active:after, button:active:after, table tr:active:after, a:active:after, .switch-container:active:after {
+  transform: translateX(-3px) translateY(3px) !important;
+}
+button:disabled:after, button:disabled:hover:after, button.disabled:focus-visible:after {
+  transform: none;
+}
+
+
+h1 {
+	font-size: 64px;
+	line-height: 96px;
+	font-family: 'Clash Display Bold', sans-serif;
+}
+
+h2 {
+	font-size: 48px;
+	line-height: 80px;
+	font-family: 'Clash Display Bold', sans-serif;
+}
+
+h3 {
+	font-size: 32px;
+	line-height: 64px;
+	font-family: 'Clash Display Semibold', sans-serif;
+}
+
+h4 {
+	font-size: 24px;
+	line-height: 48px;
+	font-family: 'Clash Display Semibold', sans-serif;
+}
+
+h5 {
+	font-size: 20px;
+	line-height: 40px;
+	font-family: 'Clash Display Semibold', sans-serif;
+}
+
+h6 {
+	font-size: 16px;
+	line-height: 32px;
+	font-family: 'Clash Display Semibold', sans-serif;
+}
+
+p, b, u, s, li, mark, a, td, th, select {
+	font-size: 16px;
+	line-height: 28px;
+	font-family: 'Clash Grotesk Medium', sans-serif;
+}
+
+ul {
+	margin: 8px 0 8px 0;
+	padding-left: 0;
+	list-style: none;
+}
+
+ul > li {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+ul li::before {
+	content: "\2022";
+	border: 1px solid var(--black);
+	border-radius: 50%;
+	width: 4px;
+	height: 4px;
+	display: flex;
+	line-height: 5px;
+	font-size: 16px;
+	justify-content: center;
+}
+
+ul li.cyan::before {
+	color: var(--cyan-normal);	
+}
+
+ul li.pink::before {
+	color: var(--pink-normal);	
+}
+
+ul li.yellow::before {
+	color: var(--yellow-normal);	
+}
+
+ul li.blue::before {
+	color: var(--blue-normal);	
+}
+
+ul li.purple::before {
+	color: var(--purple-normal);	
+}
+
+ol {
+	margin: 8px 0 8px 12px;
+}
+
+ol li.cyan::marker {
+	color: var(--cyan-dark);	
+}
+
+ol li.pink::marker {
+	color: var(--pink-dark);	
+}
+
+ol li.yellow::marker {
+	color: var(--yellow-dark);	
+}
+
+ol li.blue::marker {
+	color: var(--blue-dark);	
+}
+
+ol li.purple::before {
+	color: var(--purple-dark);	
+}
+
+mark {
+	width: fit-content;
+	padding: 2px;
+	line-height: 20px;
+	margin: 4px 0 4px 0;
+}
+
+mark.cyan {
+	background: var(--cyan-light);
+}
+
+mark.pink {
+	background: var(--pink-light);
+}
+
+mark.yellow {
+	background: var(--yellow-light);
+}
+
+mark.blue {
+	background: var(--blue-light);
+}
+
+mark.purple {
+	background: var(--purple-light);
+}
+
+button {
+	font-size: 16px;
+	line-height: 24px;
+	font-family: Clash Display Semibold;
+	color: var(--black);
+	padding: 8px 32px;
+	border-radius: 2px;
+	outline: 2px solid var(--black);
+	cursor: pointer;
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+	width: fit-content;
+	background: var(--white);
+	margin: 8px 0 8px 0;
+	border: none;
+}
+
+button.cyan {
+	background: var(--cyan-normal);
+}
+
+button.pink {
+	background: var(--pink-normal);
+}
+
+button.yellow {
+	background: var(--yellow-normal);
+}
+
+button.blue {
+	background: var(--blue-normal);
+}
+
+button.purple {
+	background: var(--purple-normal);
+}
+
+button:hover, button:focus-visible {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--gray), -5px 5px 0 2px var(--black);
+}
+
+button.cyan:hover, button.cyan:focus-visible {
+	box-shadow: -5px 5px 0 0 var(--cyan-dark), -5px 5px 0 2px var(--black);
+}
+
+button.pink:hover, button.pink:focus-visible {
+	box-shadow: -5px 5px 0 0 var(--pink-dark), -5px 5px 0 2px var(--black);
+}
+
+button.yellow:hover, button.yellow:focus-visible {
+	box-shadow: -5px 5px 0 0 var(--yellow-dark), -5px 5px 0 2px var(--black);
+}
+
+button.blue:hover, button.blue:focus-visible {
+	box-shadow: -5px 5px 0 0 var(--blue-dark), -5px 5px 0 2px var(--black);
+}
+
+button.purple:hover, button.purple:focus-visible {
+	box-shadow: -5px 5px 0 0 var(--purple-dark), -5px 5px 0 2px var(--black);
+}
+
+button:active {
+	transform: translateX(2px) translateY(-2px);
+	box-shadow: -3px 3px 0 0 var(--gray), -3px 3px 0 2px var(--black);
+}
+
+button.cyan:active {
+	box-shadow: -3px 3px 0 0 var(--cyan-dark), -3px 3px 0 2px var(--black);
+}
+
+button.pink:active {
+	box-shadow: -3px 3px 0 0 var(--pink-dark), -3px 3px 0 2px var(--black);
+}
+
+button.yellow:active {
+	box-shadow: -3px 3px 0 0 var(--yellow-dark), -3px 3px 0 2px var(--black);
+}
+
+button.blue:active {
+	box-shadow: -3px 3px 0 0 var(--blue-dark), -3px 3px 0 2px var(--black);
+}
+
+button.purple:active {
+	box-shadow: -3px 3px 0 0 var(--purple-dark), -3px 3px 0 2px var(--black);
+}
+
+button:disabled, button:disabled:hover, button.disabled:focus-visible {
+	transform: none;
+	box-shadow: none;
+	cursor: not-allowed;
+	color: var(--gray);
+	background: var(--white);
+	outline: 2px solid var(--gray);
+}
+
+button.cyan:disabled, 
+button.cyan:disabled:hover, 
+button.cyan:disabled:active, 
+button.cyan:disabled:focus-visible {
+	outline: 2px solid var(--cyan-dark);
+	color: var(--cyan-dark);
+	background: var(--cyan-light);
+}
+
+button.pink:disabled, 
+button.pink:disabled:hover, 
+button.pink:disabled:active, 
+button.pink:disabled:focus-visible {
+	outline: 2px solid var(--pink-dark);
+	color: var(--pink-dark);
+	background: var(--pink-light);
+}
+
+button.yellow:disabled, 
+button.yellow:disabled:hover, 
+button.yellow:disabled:active, 
+button.yellow:disabled:focus-visible {
+	outline: 2px solid var(--yellow-dark);
+	color: var(--yellow-dark);
+	background: var(--yellow-light);
+}
+
+button.blue:disabled, 
+button.blue:disabled:hover, 
+button.blue:disabled:active, 
+button.blue:disabled:focus-visible { 
+	outline: 2px solid var(--blue-dark);
+	color: var(--blue-dark);
+	background: var(--blue-light);
+}
+
+button.purple:disabled, 
+button.purple:disabled:hover, 
+button.purple:disabled:active, 
+button.purple:disabled:focus-visible { 
+	outline: 2px solid var(--purple-dark);
+	color: var(--purple-dark);
+	background: var(--purple-light);
+}
+
+a {
+	text-decoration: none;
+	color: var(--black);
+	font-size: 16px;
+	padding: 2px 4px;
+	border-radius: 2px;
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+	width: fit-content;
+	background: var(--white);
+	line-height: 20px;
+	outline: 1px solid var(--black);
+	display: inline-block;
+}
+
+a:hover, a:focus-visible {
+	outline: 1px solid var(--black);
+	transform: translateX(3px) translateY(-3px);
+	box-shadow: -3px 3px 0 0 var(--gray), -3px 3px 0 1px var(--black);
+}
+
+a.cyan:hover, a.cyan:focus-visible {
+	box-shadow: -3px 3px 0 0 var(--cyan-normal), -3px 3px 0 1px var(--black);
+}
+
+a.pink:hover, a.pink:focus-visible {
+	box-shadow: -3px 3px 0 0 var(--pink-normal), -3px 3px 0 1px var(--black);
+}
+
+a.yellow:hover, a.yellow:focus-visible {
+	box-shadow: -3px 3px 0 0 var(--yellow-normal), -3px 3px 0 1px var(--black);
+}
+
+a.blue:hover, a.blue:focus-visible {
+	box-shadow: -3px 3px 0 0 var(--blue-normal), -3px 3px 0 1px var(--black);
+}
+
+a.purple:hover, a.purple:focus-visible {
+	box-shadow: -3px 3px 0 0 var(--purple-normal), -3px 3px 0 1px var(--black);
+}
+
+a:active {
+	outline: 1px solid var(--black);
+	transform: translateX(1.5px) translateY(-1.5px);
+	box-shadow: -1.5px 1.5px 0 0 var(--gray), -1.5px 1.5px 0 1px var(--black);
+}
+
+a.cyan:active {
+	box-shadow: -1.5px 1.5px 0 0 var(--cyan-normal), -1.5px 1.5px 0 1px var(--black);
+}
+
+a.pink:active {
+	box-shadow: -1.5px 1.5px 0 0 var(--pink-normal), -1.5px 1.5px 0 1px var(--black);
+}
+
+a.yellow:active {
+	box-shadow: -1.5px 1.5px 0 0 var(--yellow-normal), -1.5px 1.5px 0 1px var(--black);
+}
+
+a.blue:active {
+	box-shadow: -1.5px 1.5px 0 0 var(--blue-normal), -1.5px 1.5px 0 1px var(--black);
+}
+
+a.purple:active {
+	box-shadow: -1.5px 1.5px 0 0 var(--purple-normal), -1.5px 1.5px 0 1px var(--black);
+}
+
+input[type="text"] {
+	text-align: left;
+	font-size: 16px;
+	line-height: 24px;
+	font-family: Clash Display Semibold;
+	color: var(--black);
+	padding: 8px;
+	border-radius: 2px;
+	outline: 2px solid var(--gray);
+	cursor: pointer;
+	background: var(--light-gray);
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+	width: fit-content;
+	margin: 8px 0 8px 0;
+	border: none;
+}
+
+input[type="text"]:hover {
+	transform: translateX(5px) translateY(-5px);
+	outline: 2px solid var(--black);
+	box-shadow: -5px 5px 0 0 var(--gray), -5px 5px 0 2px var(--black);
+}
+
+input[type="text"]:active {
+	box-shadow: -3px 3px 0 0 var(--gray), -3px 3px 0 2px var(--black) !important;
+	transform: translateX(2px) translateY(-2px) !important;
+	outline: 2px solid var(--black) !important;
+}
+
+input[type="text"]:focus-visible {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--gray), -5px 5px 0 2px var(--black);
+}
+
+input[type="text"].cyan:focus-visible {
+	outline: 2px solid var(--cyan-normal);
+}
+
+input[type="text"].pink:focus-visible {
+	outline: 2px solid var(--pink-normal);
+}
+
+input[type="text"].yellow:focus-visible {
+	outline: 2px solid var(--yellow-normal);
+}
+
+input[type="text"].blue:focus-visible {
+	outline: 2px solid var(--blue-normal);
+}
+
+input[type="text"].purple:focus-visible {
+	outline: 2px solid var(--purple-normal);
+}
+
+input[type="text"]:disabled, 
+input[type="text"]:disabled:hover, input[type="text"]:disabled:active, input[type="text"]:disabled:focus-visible {
+	background: var(--white);
+	color: var(--gray);	
+	transform: none !important;
+	box-shadow: none !important;
+	outline: 2px solid var(--gray) !important;
+	cursor: not-allowed;
+}
+
+input[type="text"]:read-only:focus-visible {
+	outline: 2px solid var(--black);
+}
+
+input[type="text"]:disabled::placeholder {
+	color: var(--gray);
+}
+
+.checkbox-container {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+	gap: 8px;
+	margin: 8px 0 8px 0;
+	align-items: center;
+	width: fit-content;
+}
+
+.checkbox-container input {
+	position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkbox-container checkmark {
+  height: 21px;
+  width: 21px;
+  background-color: var(--white);
+	outline: 1px solid var(--black);
+	border-radius: 2px;
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+}
+
+.checkbox-container input[type="checkbox"]:focus-visible ~ checkmark {
+  box-shadow: -3px 3px 0 0 var(--gray), -3px 3px 0 1px var(--black);
+	transform: translateX(3px) translateY(-3px);
+}
+
+.checkbox-container:hover checkmark {
+  box-shadow: -3px 3px 0 0 var(--gray), -3px 3px 0 1px var(--black);
+	transform: translateX(3px) translateY(-3px);
+}
+
+.checkbox-container:active checkmark {
+  box-shadow: -1.5px 1.5px 0 0 var(--gray), -1.5px 1.5px 0 1px var(--black);
+	transform: translateX(1.5px) translateY(-1.5px);
+}
+
+.checkbox-container input:checked ~ checkmark {
+  background: var(--black);
+}
+
+.checkbox-container.cyan input:checked ~ checkmark {
+  background: var(--cyan-normal);
+}
+
+.checkbox-container.pink input:checked ~ checkmark {
+  background: var(--pink-normal);
+}
+
+.checkbox-container.yellow input:checked ~ checkmark {
+	background: var(--yellow-normal);
+}
+
+.checkbox-container.blue input:checked ~ checkmark {
+	background: var(--blue-normal);
+}
+
+.checkbox-container.purple input:checked ~ checkmark {
+	background: var(--purple-normal);
+}
+
+.checkbox-container:hover input:checked ~ checkmark, .checkbox-container input[type="checkbox"]:checked:focus-visible ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--dark-gray), -3px 3px 0 1px var(--black);
+}
+
+.checkbox-container.cyan:hover input:checked ~ checkmark, .checkbox-container.cyan input[type="checkbox"]:checked:focus-visible ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--cyan-dark), -3px 3px 0 1px var(--black);
+}
+
+.checkbox-container.pink:hover input:checked ~ checkmark, .checkbox-container.pink input[type="checkbox"]:checked:focus-visible ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--pink-dark), -3px 3px 0 1px var(--black);
+}
+
+.checkbox-container.yellow:hover input:checked ~ checkmark, .checkbox-container.yellow input[type="checkbox"]:checked:focus-visible ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--yellow-dark), -3px 3px 0 1px var(--black);
+}
+
+.checkbox-container.blue:hover input:checked ~ checkmark, .checkbox-container.blue input[type="checkbox"]:checked:focus-visible ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--blue-dark), -3px 3px 0 1px var(--black);
+}
+
+.checkbox-container.purple:hover input:checked ~ checkmark, .checkbox-container.purple input[type="checkbox"]:checked:focus-visible ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--purple-dark), -3px 3px 0 1px var(--black);
+}
+
+.checkbox-container:active input:checked ~ checkmark, .checkbox-container input[type="checkbox"]:focus-visible:active ~ checkmark, .checkbox-container input[type="checkbox"]:checked:focus-visible:active ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--dark-gray), -1.5px 1.5px 0 1px var(--black);
+	transform: translateX(1.5px) translateY(-1.5px);
+}
+
+.checkbox-container.cyan:active input:checked ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--cyan-dark), -1.5px 1.5px 0 1px var(--black);
+}
+
+.checkbox-container.pink:active input:checked ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--pink-dark), -1.5px 1.5px 0 1px var(--black);
+}
+
+.checkbox-container.yellow:active input:checked ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--yellow-dark), -1.5px 1.5px 0 1px var(--black);
+}
+
+.checkbox-container.blue:active input:checked ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--blue-dark), -1.5px 1.5px 0 1px var(--black);
+}
+
+
+.checkbox-container.purple:active input:checked ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--purple-dark), -1.5px 1.5px 0 1px var(--black);
+}
+
+.checkbox-container checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+  left: 7px;
+	top: 6px;
+	width: 5px;
+	height: 10px;
+	border: solid var(--white);
+	border-width: 0 2px 2px 0;
+	transform: rotate(45deg);
+}
+
+.checkbox-container input:checked ~ checkmark:after {
+  display: block;
+}
+
+.checkbox-container.cyan checkmark:after, .checkbox-container.pink checkmark:after, .checkbox-container.yellow checkmark:after, .checkbox-container.blue checkmark:after, .checkbox-container.purple checkmark:after {
+	border-color: var(--black);
+}
+
+.checkbox-container:hover checkmark:after {
+	top: 3px;
+}
+
+.radio-container {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+	gap: 8px;
+	margin: 8px 0 8px 0;
+	align-items: center;
+	width: fit-content;
+}
+
+.radio-container input {
+	position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.radio-container checkmark {
+  height: 21px;
+  width: 21px;
+  background-color: var(--white);
+	outline: 1px solid var(--black);
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+}
+
+.radio-container input[type="radio"]:focus-visible ~ checkmark {
+  box-shadow: -3px 3px 0 0 var(--gray), -3px 3px 0 1px var(--black);
+	transform: translateX(3px) translateY(-3px);
+}
+
+.radio-container:hover checkmark {
+  box-shadow: -3px 3px 0 0 var(--gray), -3px 3px 0 1px var(--black);
+	transform: translateX(3px) translateY(-3px);
+}
+
+.radio-container:active checkmark {
+  box-shadow: -1.5px 1.5px 0 0 var(--gray), -1.5px 1.5px 0 1px var(--black);
+	transform: translateX(1.5px) translateY(-1.5px);
+}
+
+.radio-container:hover input:checked ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--gray), -3px 3px 0 1px var(--black);
+}
+
+.radio-container.cyan:hover input:checked ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--cyan-light), -3px 3px 0 1px var(--cyan-normal);
+}
+
+.radio-container.pink:hover input:checked ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--pink-light), -3px 3px 0 1px var(--pink-normal);
+}
+
+.radio-container.yellow:hover input:checked ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--yellow-light), -3px 3px 0 1px var(--yellow-normal);
+}
+
+.radio-container.blue:hover input:checked ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--blue-light), -3px 3px 0 1px var(--blue-normal);
+}
+
+.radio-container.purple:hover input:checked ~ checkmark {
+	box-shadow: -3px 3px 0 0 var(--purple-light), -3px 3px 0 1px var(--purple-normal);
+}
+
+.radio-container:active input:checked ~ checkmark, .radio-container input:checked:active:focus-visible ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--gray), -1.5px 1.5px 0 1px var(--black);
+	transform: translateX(1.5px) translateY(-1.5px);
+}
+
+.radio-container.cyan:active input:checked ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--cyan-light), -1.5px 1.5px 0 1px var(--cyan-normal);
+}
+
+.radio-container.pink:active input:checked ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--pink-light), -1.5px 1.5px 0 1px var(--pink-dark);
+}
+
+.radio-container.yellow:active input:checked ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--yellow-light), -1.5px 1.5px 0 1px var(--yellow-dark);
+}
+
+.radio-container.blue:hover input:checked ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--blue-light), -1.5px 1.5px 0 1px var(--blue-normal);
+}
+
+.radio-container.purple:hover input:checked ~ checkmark {
+	box-shadow: -1.5px 1.5px 0 0 var(--purple-light), -1.5px 1.5px 0 1px var(--purple-normal);
+}
+
+.radio-container.cyan input:checked ~ checkmark {
+	outline: 1px solid var(--cyan-normal);
+}
+
+.radio-container.pink input:checked ~ checkmark {
+	outline: 1px solid var(--pink-normal);
+}
+
+.radio-container.yellow input:checked ~ checkmark {
+	outline: 1px solid var(--yellow-normal);
+}
+
+.radio-container.blue input:checked ~ checkmark {
+	outline: 1px solid var(--blue-normal);
+}
+
+.radio-container.purple input:checked ~ checkmark {
+	outline: 1px solid var(--purple-normal);
+}
+
+.radio-container checkmark:after {
+  content: "";
+  display: none;
+	width: 12px;
+	height: 12px;
+	background: var(--black);
+	border-radius: 50%;
+}
+
+.radio-container.cyan checkmark:after {
+	background: var(--cyan-normal)
+}
+
+.radio-container.pink checkmark:after {
+	background: var(--pink-normal)
+}
+
+.radio-container.yellow checkmark:after {
+	background: var(--yellow-normal)
+}
+
+.radio-container.blue checkmark:after {
+	background: var(--blue-normal)
+}
+
+.radio-container.purple checkmark:after {
+	background: var(--purple-normal)
+}
+
+.radio-container input:checked ~ checkmark:after {
+  display: block;
+}
+
+.switch-container {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 18px;
+	margin: 8px 0 8px 0;
+	outline: 1px solid var(--black);
+	border-radius: 16px;
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+}
+
+.switch-container:hover, .switch-container:has(input[type="checkbox"]:focus-visible) {
+  box-shadow: -3px 3px 0 0 var(--gray), -3px 3px 0 1px var(--black);
+	transform: translateX(3px) translateY(-3px);
+}
+
+.switch-container:has(input:checked):hover, .switch-container:has(input[type="checkbox"]:checked:focus-visible) {
+	box-shadow: -3px 3px 0 0 var(--dark-gray), -3px 3px 0 1px var(--black);
+}
+
+.switch-container.cyan:has(input:checked):hover, .switch-container.cyan:has(input[type="checkbox"]:checked:focus-visible) {
+	box-shadow: -3px 3px 0 0 var(--cyan-dark), -3px 3px 0 1px var(--black);
+}
+
+.switch-container.pink:has(input:checked):hover, .switch-container.pink:has(input[type="checkbox"]:checked:focus-visible) {
+	box-shadow: -3px 3px 0 0 var(--pink-dark), -3px 3px 0 1px var(--black);
+}
+
+.switch-container.yellow:has(input:checked):hover, .switch-container.yellow:has(input[type="checkbox"]:checked:focus-visible) {
+	box-shadow: -3px 3px 0 0 var(--yellow-dark), -3px 3px 0 1px var(--black);
+}
+
+.switch-container.blue:has(input:checked):hover, .switch-container.blue:has(input[type="checkbox"]:checked:focus-visible) {
+	box-shadow: -3px 3px 0 0 var(--blue-dark), -3px 3px 0 1px var(--black);
+}
+
+.switch-container.purple:has(input:checked):hover, .switch-container.purple:has(input[type="checkbox"]:checked:focus-visible) {
+	box-shadow: -3px 3px 0 0 var(--purple-dark), -3px 3px 0 1px var(--black);
+}
+
+.switch-container:has(input:checked):active, .switch-container:has(input[type="checkbox"]:focus-visible:active) {
+	box-shadow: -1.5px 1.5px 0 0 var(--dark-gray), -1.5px 1.5px 0 1px var(--black);
+	transform: translateX(1.5px) translateY(-1.5px);
+}
+
+.switch-container:active, .switch-container:has(input[type="checkbox"]:focus-visible:active) {
+	box-shadow: -1.5px 1.5px 0 0 var(--gray), -1.5px 1.5px 0 1px var(--black);
+	transform: translateX(1.5px) translateY(-1.5px);
+}
+
+.switch-container.cyan:has(input:checked):active, .switch-container.cyan:has(input[type="checkbox"]:focus-visible:active) {
+	box-shadow: -1.5px 1.5px 0 0 var(--cyan-dark), -1.5px 1.5px 0 1px var(--black);
+}
+
+.switch-container.pink:has(input:checked):active, .switch-container.pink:has(input[type="checkbox"]:focus-visible:active) {
+	box-shadow: -1.5px 1.5px 0 0 var(--pink-dark), -1.5px 1.5px 0 1px var(--black);
+}
+
+.switch-container.yellow:has(input:checked):active, .switch-container.yellow:has(input[type="checkbox"]:focus-visible:active) {
+	box-shadow: -1.5px 1.5px 0 0 var(--yellow-dark), -1.5px 1.5px 0 1px var(--black);
+}
+
+.switch-container.blue:has(input:checked):active, .switch-container.blue:has(input[type="checkbox"]:focus-visible:active) {
+	box-shadow: -1.5px 1.5px 0 0 var(--blue-dark), -1.5px 1.5px 0 1px var(--black);
+}
+
+.switch-container.purple:has(input:checked):active, .switch-container.purple:has(input[type="checkbox"]:focus-visible:active) {
+	box-shadow: -1.5px 1.5px 0 0 var(--purple-dark), -1.5px 1.5px 0 1px var(--black);
+}
+
+.switch-container input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch-container checkmark {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--gray);
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+	border-radius: 16px;
+}
+
+.switch-container checkmark:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  background-color: var(--white);
+	outline: 1px solid var(--black);
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+	border-radius: 50%;
+}
+
+.switch-container input:checked + checkmark {
+  background-color: var(--black);
+}
+
+.switch-container.cyan input:checked + checkmark {
+  background-color: var(--cyan-normal);
+}
+
+.switch-container.pink input:checked + checkmark {
+	background-color: var(--pink-normal);
+}
+
+.switch-container.yellow input:checked + checkmark {
+	background-color: var(--yellow-normal);
+}
+
+.switch-container.blue input:checked + checkmark {
+	background-color: var(--blue-normal);
+}
+
+.switch-container.purple input:checked + checkmark {
+	background-color: var(--purple-normal);
+}
+
+.switch-container input:checked + checkmark:before {
+  transform: translateX(30px);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+img {
+	border-radius: 2px;
+	outline: 2px solid var(--black);
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+}
+
+img:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--gray), -5px 5px 0 2px var(--black);
+}
+
+img.cyan:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--cyan-normal), -5px 5px 0 2px var(--black);
+}
+
+img.pink:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--pink-normal), -5px 5px 0 2px var(--black);
+}
+
+img.yellow:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--yellow-normal), -5px 5px 0 2px var(--black);
+}
+
+img.blue:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--blue-normal), -5px 5px 0 2px var(--black);
+}
+
+img.purple:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--purple-normal), -5px 5px 0 2px var(--black);
+}
+
+select {
+	padding: 8px;
+	border-radius: 2px;
+	background: var(--white);
+	outline: 2px solid var(--black);
+	cursor: pointer;
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+	border: none;
+}
+
+select:hover, select:focus-visible {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--gray), -5px 5px 0 2px var(--black);
+}
+
+select:active {
+	box-shadow: -3px 3px 0 0 var(--gray), -3px 3px 0 2px var(--black);
+	transform: translateX(2px) translateY(-2px);
+}
+
+card {
+	border-radius: 2px;
+	outline: 2px solid var(--black);
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+	background: var(--white);
+}
+
+card:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--gray), -5px 5px 0 2px var(--black);
+}
+
+card.cyan:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--cyan-normal), -5px 5px 0 2px var(--black);
+}
+
+card.pink:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--pink-normal), -5px 5px 0 2px var(--black);
+}
+
+card.yellow:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--yellow-normal), -5px 5px 0 2px var(--black);
+}
+
+card.blue:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--blue-normal), -5px 5px 0 2px var(--black);
+}
+
+card.purple:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--purple-normal), -5px 5px 0 2px var(--black);
+}
+
+table {
+	border-radius: 2px;
+	border-spacing: 0;
+	outline: 2px solid var(--black);
+	display: flex;
+	flex-direction: column;
+}
+
+table tr {
+	background: var(--white);
+	transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5), box-shadow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+	display: flex;
+}
+
+table tr:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+}
+
+table tr:hover {
+	transform: translateX(5px) translateY(-5px);
+	box-shadow: -5px 5px 0 0 var(--gray), -5px 5px 0 2px var(--black);
+	outline: 2px solid black;
+}
+
+table tr:first-chid:hover {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+}
+
+table tr:last-child:hover {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+}
+
+table tr:hover > td {
+	border-bottom: none !important;
+}
+
+table th, table td {
+	padding: 8px;
+	flex: 1; 
+}
+
+table th {
+	background: var(--light-gray);
+	text-align: left;
+	font-family: 'Clash Display Semibold', sans-serif;
+}
+
+table th, table td:not(table tr:last-child td) {
+/* 	border-bottom: 2px solid var(--black); */
+	box-shadow: 0 2px 0 var(--black);
+}
+
+table th:not(table tr th:last-child), table td:not(table tr td:last-child) {
+	border-right: 2px solid var(--black);
+}
+
+hr {
+	height: 2px;
+	border-radius: 2px;
+	border: none;
+	background: var(--dark-gray);
+	margin: 32px 0 32px 0;
+}
+
+hr.cyan {
+	background: var(--cyan-dark);
+}
+
+hr.pink {
+	background: var(--pink-dark);
+}
+
+hr.yellow {
+	background: var(--yellow-dark);
+}
+
+hr.blue {
+	background: var(--blue-dark);
+}
+
+hr.purple {
+	background: var(--purple-dark);
+}
+
+::selection {
+	background: var(--gray);
+	color: var(--black);
+	background-clip: revert;
+	-webkit-text-fill-color: var(--black);
+}
+
+
+::-webkit-scrollbar {
+  width: 8px;
+	outline: 1px solid var(--black);
+
+}
+
+::-webkit-scrollbar-track {
+  background: var(--light-gray);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--cyan-normal);
+	border-radius: 20px;
+	outline: 1px solid var(--black);
+}
+