diff --git a/src/main.py b/src/main.py
index a93abdf..6844209 100644
--- a/src/main.py
+++ b/src/main.py
@@ -78,7 +78,7 @@ def snake_submit():
         logging.error("Invalid score value: %s", score)
         return render_template('404.html', scores=scores, error='Invalid score value'), 400
     
-    if score <= 0 or score > 10000 or len(username) < 3 or len(username) > 20:
+    if score <= 0 or score > 10000 or len(username) < 3 or len(username) > 15:
         logging.error("Invalid score or username length: score=%s, username=%s", score, username)
         return render_template('404.html', scores=scores, error='Invalid score or username length'), 400
 
diff --git a/static/css/base.css b/static/css/base.css
index 12ca89d..eacb617 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -235,100 +235,6 @@ main section a {
     display: none;
 }
 
-.blinkies {
-    justify-content: center;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-.blinkies img {
-    width: 150px;
-    height: 20px;
-    transition: all 0.2s ease-in-out;
-}
-
-.blinkies img:hover {
-    transform: scale(1.1) rotate(5deg);
-}
-
-.blinkies img:nth-child(odd):hover {
-    transform: scale(1.1) rotate(-5deg);
-}
-
-section.rowsect {
-    width: 100%;
-    display: grid;
-    grid-template-columns: auto auto;
-    gap: 1rem;
-    backdrop-filter: none;
-    border: none;
-    padding: 0;
-}
-
-section.rowsect>div {
-    backdrop-filter: blur(2px) brightness(0.6);
-    border: var(--secondary-background-color) 2px solid;
-    border-radius: 10px;
-}
-
-.stamps {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: 10px;
-    gap: 5px;
-    justify-content: center;
-    align-content: center;
-}
-
-.stamps img {
-    width: 99px;
-    height: 56px;
-    transition: all 0.2s ease-in-out;
-}
-
-.stamps img:hover {
-    transform: scale(1.1) rotate(5deg);
-}
-
-.stamps img:nth-child(odd):hover {
-    transform: scale(1.1) rotate(-5deg);
-}
-
-#spotify {
-    background-image: none;
-    backdrop-filter: blur(2px) brightness(0.6);
-    border: var(--secondary-background-color) 2px solid;
-    border-radius: 10px;
-    padding: 15px;
-    box-sizing: border-box;
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: 300px;
-    width: 300px;
-    display: flex;
-    flex-direction: column;
-}
-
-#spotify-title {
-    font-size: 1.5rem;
-    font-weight: 900;
-    margin: 0;
-    padding: 0;
-    mix-blend-mode: difference;
-    color: white;
-}
-
-#spotify-artist {
-    color: white;
-    font-size: 1rem;
-    font-weight: 900;
-    margin: 0;
-    padding: 0;
-    mix-blend-mode: difference;
-}
-
 .haj {
     width: 100%;
     filter: drop-shadow(0 0 0.5rem rgb(88, 214, 245));
@@ -338,25 +244,6 @@ section.rowsect>div {
     font-family: var(--irken-font);
 }
 
-#button-collection {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-#button-collection img {
-    transition: all 0.2s ease-in-out;
-}
-
-#button-collection img:hover {
-    transform: scale(1.1) rotate(5deg);
-}
-
-#button-collection img:nth-child(odd):hover {
-    transform: scale(1.1) rotate(-5deg);
-}
-
 #alt-nav {
     display: none;
     backdrop-filter: blur(2px) brightness(0.6);
@@ -397,6 +284,26 @@ section.rowsect>div {
     font-family: var(--title-font);
 }
 
+.flex-col {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.no-sect {
+    backdrop-filter: none;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 @media screen and (max-width: 1000px) {
     body {
         background-color: var(--background-color);
@@ -430,6 +337,14 @@ section.rowsect>div {
 }
 
 @media screen and (max-width: 650px) {
+    .flex-row {
+        flex-direction: column;
+    }
+    
+    .flex-col {
+        flex-direction: row;
+    }
+
     header img {
         display: none;
     }
@@ -446,16 +361,6 @@ section.rowsect>div {
         display: none;
     }
 
-    section.rowsect {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        backdrop-filter: none;
-        border: none;
-        padding: 0;
-    }
-
     div#spotify {
         box-sizing: border-box;
         background-repeat: no-repeat;
diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 0000000..8077b43
--- /dev/null
+++ b/static/css/index.css
@@ -0,0 +1,109 @@
+.blinkies {
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.blinkies img {
+    width: 150px;
+    height: 20px;
+    transition: all 0.2s ease-in-out;
+}
+
+.blinkies img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.blinkies img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+.stamps {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 10px;
+    gap: 5px;
+    justify-content: center;
+    align-content: center;
+}
+
+.stamps img {
+    width: 99px;
+    height: 56px;
+    transition: all 0.2s ease-in-out;
+}
+
+.stamps img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.stamps img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+#spotify {
+    background-image: none;
+    backdrop-filter: blur(2px) brightness(0.6);
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 15px;
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 300px;
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+}
+
+#spotify-title {
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    mix-blend-mode: difference;
+    color: white;
+}
+
+#spotify-artist {
+    color: white;
+    font-size: 1rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    mix-blend-mode: difference;
+}
+
+#button-collection {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+#button-collection img {
+    transition: all 0.2s ease-in-out;
+}
+
+#button-collection img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+#button-collection img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+@media screen and (max-width: 650px) {
+    div#spotify {
+        box-sizing: border-box;
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 100%;
+        width: auto;
+        aspect-ratio: 1/1;
+        display: flex;
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/static/css/toaster.css b/static/css/toaster.css
index f3fe28a..43771a9 100644
--- a/static/css/toaster.css
+++ b/static/css/toaster.css
@@ -29,26 +29,6 @@ ul#toaster-specs li {
     border: 2px solid var(--secondary-background-color);
 }
 
-.flex-col {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.flex-row {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-}
-
-.no-sect {
-    backdrop-filter: none;
-    border: none;
-    border-radius: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
 .fill-height {
     height: 100%;
 }
diff --git a/templates/base.html b/templates/base.html
index c762968..7083284 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -15,7 +15,7 @@
     <meta property="og:url" content="https://alfieking.dev">
     <meta property="og:title" content="{{ self.title() }}">
     <meta property="og:description" content="{{ self.description() }}">
-    <meta property="og:image" content="static/content/icon.webp">
+    <meta property="og:image" content="/static/content/icon.webp">
     {% block head %}
     {% endblock %}
 </head>
diff --git a/templates/index.html b/templates/index.html
index 158b897..1d97c71 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,6 +3,10 @@
 {% block title %}Home - Alfie's basement{% endblock %}
 {% block description %}server backend survivor{% endblock %}
 
+{% block head %}
+<link rel="stylesheet" href="/static/css/index.css">
+{% endblock %}
+
 {%block content %}
 <section>
     <h1>A lil bit abt me</h1>
@@ -32,14 +36,14 @@
     <img src="https://s1nez.nekoweb.org/g/ggg/gg%20(32).gif" alt="">
     <img src="https://s1nez.nekoweb.org/img/7dcd20d4.gif" alt="">
 </section>
-<section class="rowsect">
+<div class="flex-row">
     <a href="" id="spotify-link">
         <div id="spotify">
             <h1 id="spotify-title"></h1>
             <h2 id="spotify-artist"></h2>
         </div>
     </a>
-    <div class="stamps">
+    <section class="stamps">
         <img src="https://s1nez.nekoweb.org/img/other/ba4ba47a.png" alt="">
         <img src="https://s1nez.nekoweb.org/img/fa02abd7.png" alt="">
         <img src="https://s1nez.nekoweb.org/img/hc/hc%20(172).gif" alt="">
@@ -56,8 +60,8 @@
         <img src="https://adriansblinkiecollection.neocities.org/stamps/g5.gif" alt="">
         <img src="https://adriansblinkiecollection.neocities.org/stamps/e40.gif" alt="">
         <img src="https://adriansblinkiecollection.neocities.org/stamps/e43.gif" alt="">
-    </div>
-</section>
+    </section>
+</div>
 <section>
     <h1>Projects & stuff</h1>
     <p>just some projects ive worked on over time</p>
diff --git a/templates/toaster.html b/templates/toaster.html
index 7885dfb..6e7b338 100644
--- a/templates/toaster.html
+++ b/templates/toaster.html
@@ -22,7 +22,7 @@
         however I plan on hopefully drawing Toaster properly soon. Once i do, I may make him the main mascot of my website.
     </p>
 </section>
-<section class="flex-row no-sect">
+<div class="flex-row">
     <section>
         <h1>Specs</h1>
         <h6>(Very subject to change, Im still trying to figure out what I want :P)</h6>
@@ -45,7 +45,7 @@
             </p>
         </section>
     </div>
-</section>
+</div>
 <section>
     <h1>Plans</h1>
     <p>