diff --git a/index.html b/index.html
index 341cb5a..064fb6b 100644
--- a/index.html
+++ b/index.html
@@ -2,202 +2,7 @@
     <TITLE> meeseeks-leaderboard-api </TITLE>
     <link rel="icon" href="mee6.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- width device fix -->
-    
-    <style>
-        /* Colors */
-        :root {
-            --primary-color: #7289da;
-            --secondary-color: #99aab5;
-            --background-color: #36393f;
-            --text-color: #ffffff;
-        }
-
-        @font-face {
-            font-family: font;
-            src: url(https://gdjkhp.github.io/fonts/AmaticSC-Regular.ttf);
-        }
-
-        body {
-            font-family: font;
-            background-color: black;
-            color: white;
-        }
-
-        /* Rank card */
-        .rank-card {
-            background-color: var(--background-color);
-            border-radius: 10px;
-            padding: 20px;
-            width: 500px;
-            margin: auto; /* center */
-            position: relative;
-            z-index: 1;
-        }
-        .rank-card-avatar {
-            border-radius: 50%;
-            overflow: hidden;
-            position: absolute;
-            height: 100px;
-            width: 100px;
-        }
-        .rank-card-avatar img {
-            height: 100%;
-            width: 100%;
-        }
-
-        /* Progress bar */
-        .progress {
-            background-color: var(--secondary-color);
-            border-radius: 10px;
-            height: 20px;
-            overflow: hidden;
-            display: flex;
-            justify-content: flex-start;
-            position: relative; /* Add this */
-            z-index: 2;
-            border: #000 solid 1px;
-        }
-        .progress-bar {
-            background-color: var(--primary-color);
-            height: 100%;
-        }
-        .progress-percent {
-            position: absolute; /* Add this */
-            right: 1%;
-	        font-weight: bold;
-        }
-        .progress2 {
-            background-color: var(--secondary-color);
-            border-radius: 0px 0px 5px 5px;
-            height: 10px;
-            overflow: hidden;
-            display: flex;
-            justify-content: flex-start;
-            position: relative; /* Add this */
-            width: 95%;
-            margin: -1px auto 1px auto;
-            z-index: 1;
-            border: #000 solid 1px;
-        }
-        .progress-bar2 {
-            background-color: var(--primary-color);
-            height: 100%;
-        }
-        .progress-percent2 {
-            position: absolute; /* Add this */
-            right: 1%;
-	        font-weight: bold;
-            font-size: 8px;
-        }
-        .progress-label {
-            font-size: 16px;
-        }
-        .progress-label-limit {
-            opacity: 0.7;
-        }
-        .progress-label-msg {
-            font-weight: bold;
-        }
-
-        /* let me take it from here */
-        /* div, span {
-            border: 1px solid black;
-        } */
-        .info {
-            width: 75%;
-            margin-left: 25%;
-        }
-
-        /* user section */
-        .usernamegroup {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .usernamegroup a {
-            text-decoration: none;
-        }
-        .usernamegroup a:hover {
-            text-decoration: underline;
-        }
-        .discriminator {
-            font-size: 16px;
-            opacity: 0.7;
-        }
-
-        /* rank section */
-        .rankgroup {
-            text-align: right;
-        }
-        .rank {
-            font-size: 16px;
-        }
-        .rank-number {
-            font-size: 32px;
-            font-weight: bold;
-        }
-
-        /* footer section */
-        .footergroup {
-            display: flex;
-            justify-content: space-between;
-            font-size: 14px;
-        }
-        .serverpng {
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-        }
-        .otherstats {
-            opacity: 0.7;
-            white-space: nowrap; /* Prevent wrapping within the span */
-        }
-        .servername {
-            opacity: 0.7;
-            text-align: right;
-        }
-        .server {
-            display: flex;
-            justify-content: space-between;
-        }
-        
-        /* website stuff */
-        .querygroup {
-            text-align: center;
-            position: fixed;
-            left: 50%;
-            transform: translate(-50%);
-            background-color: #000;
-            z-index: 3;
-            border: white dashed 3px;
-            padding: 10px;
-        }
-        a {
-            /* text-decoration: none; */
-            color: white;
-        }
-        .params {
-            margin: auto;
-            border: white solid 1px;
-        }
-        th {
-            text-align: left;
-            border: white solid 1px;
-            padding: 5px;
-        }
-        td {
-            border: white solid 1px;
-            padding: 5px;
-        }
-        .foot {
-            text-align: center;
-        }
-        #particles-js {
-            width: 100%;
-            height: 100%;
-            position: fixed;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <!-- <div id="particles-js"></div>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..04dc5a0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,196 @@
+/* Colors */
+:root {
+    --primary-color: #7289da;
+    --secondary-color: #99aab5;
+    --background-color: #36393f;
+    --text-color: #ffffff;
+}
+
+@font-face {
+    font-family: font;
+    src: url(https://gdjkhp.github.io/fonts/AmaticSC-Regular.ttf);
+}
+
+body {
+    font-family: font;
+    background-color: black;
+    color: white;
+}
+
+/* Rank card */
+.rank-card {
+    background-color: var(--background-color);
+    border-radius: 10px;
+    padding: 20px;
+    width: 500px;
+    margin: auto; /* center */
+    position: relative;
+    z-index: 1;
+}
+.rank-card-avatar {
+    border-radius: 50%;
+    overflow: hidden;
+    position: absolute;
+    height: 100px;
+    width: 100px;
+}
+.rank-card-avatar img {
+    height: 100%;
+    width: 100%;
+}
+
+/* Progress bar */
+.progress {
+    background-color: var(--secondary-color);
+    border-radius: 10px;
+    height: 20px;
+    overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+    position: relative; /* Add this */
+    z-index: 2;
+    border: #000 solid 1px;
+}
+.progress-bar {
+    background-color: var(--primary-color);
+    height: 100%;
+}
+.progress-percent {
+    position: absolute; /* Add this */
+    right: 1%;
+    font-weight: bold;
+}
+.progress2 {
+    background-color: var(--secondary-color);
+    border-radius: 0px 0px 5px 5px;
+    height: 10px;
+    overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+    position: relative; /* Add this */
+    width: 95%;
+    margin: -1px auto 1px auto;
+    z-index: 1;
+    border: #000 solid 1px;
+}
+.progress-bar2 {
+    background-color: var(--primary-color);
+    height: 100%;
+}
+.progress-percent2 {
+    position: absolute; /* Add this */
+    right: 1%;
+    font-weight: bold;
+    font-size: 8px;
+}
+.progress-label {
+    font-size: 16px;
+}
+.progress-label-limit {
+    opacity: 0.7;
+}
+.progress-label-msg {
+    font-weight: bold;
+}
+
+/* let me take it from here */
+/* div, span {
+    border: 1px solid black;
+} */
+.info {
+    width: 75%;
+    margin-left: 25%;
+}
+
+/* user section */
+.usernamegroup {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.usernamegroup a {
+    text-decoration: none;
+}
+.usernamegroup a:hover {
+    text-decoration: underline;
+}
+.discriminator {
+    font-size: 16px;
+    opacity: 0.7;
+}
+
+/* rank section */
+.rankgroup {
+    text-align: right;
+}
+.rank {
+    font-size: 16px;
+}
+.rank-number {
+    font-size: 32px;
+    font-weight: bold;
+}
+
+/* footer section */
+.footergroup {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+}
+.serverpng {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+}
+.otherstats {
+    opacity: 0.7;
+    white-space: nowrap; /* Prevent wrapping within the span */
+}
+.servername {
+    opacity: 0.7;
+    text-align: right;
+}
+.server {
+    display: flex;
+    justify-content: space-between;
+}
+
+/* website stuff */
+.querygroup {
+    text-align: center;
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%);
+    background-color: #000;
+    z-index: 3;
+    border: white dashed 3px;
+    padding: 10px;
+}
+a {
+    /* text-decoration: none; */
+    color: white;
+}
+.params {
+    margin: auto;
+    border: white solid 1px;
+}
+th {
+    text-align: left;
+    border: white solid 1px;
+    padding: 5px;
+}
+td {
+    border: white solid 1px;
+    padding: 5px;
+}
+.foot {
+    text-align: center;
+}
+#particles-js {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+}
+body *, :not(*) {
+    cursor: url(https://i.imgur.com/nCXdGsA.png), auto;
+}
\ No newline at end of file