major update :O

static/css/404.css

@@ -1,155 +0,0 @@
-#snakeContainer {
-    padding: 15px;
-}
-
-canvas#snakeCanvas {
-    box-sizing: border-box;
-    border: 2px solid var(--secondary-background-color);
-    border-radius: 10px;
-    width: 100%;
-}
-
-form {
-    display: flex;
-    flex-direction: column;
-    width: min-content;
-    gap: 1rem;
-    padding: 15px;
-}
-
-form input[type="text"] {
-    padding: 10px;
-    box-sizing: border-box;
-    border: 1px solid var(--secondary-background-color);
-    border-radius: 6px;
-    background-color: var(--secondary-background-color-but-slightly-transparent);
-    color: var(--text-color);
-}
-
-form button[type="submit"] {
-    padding: 10px;
-    box-sizing: border-box;
-    border: 1px solid var(--secondary-background-color);
-    border-radius: 6px;
-    background-color: var(--secondary-background-color-but-slightly-transparent);
-    color: var(--text-color);
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.flex-row {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-}
-
-.min-width {
-    width: min-content;
-}
-
-.max-width {
-    width: 100%;
-}
-
-#snakeLeaderboardSection {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0;
-    max-height: 272px   ;
-}
-
-#snakeLeaderboard {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    overflow-y: scroll;
-}
-
-#snakeLeaderboard li {
-    padding: 5px 20px;
-    background-color: var(--secondary-background-color-but-slightly-transparent);
-    color: var(--text-color);
-    font-size: 1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-#snakeLeaderboard li:nth-child(even) {
-    background-color: var(--secondary-background-color);
-}
-
-dialog {
-    width: 90%;
-    max-width: 500px;
-    padding: 20px;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    border: 2px solid var(--secondary-background-color);
-    border-radius: 8px;
-}
-
-dialog button {
-    padding: 10px;
-    width: 100%;
-    box-sizing: border-box;
-    border: 2px solid var(--secondary-background-color);
-    border-radius: 6px;
-    background-color: var(--secondary-background-color-but-slightly-transparent);
-    color: var(--text-color);
-    font-weight: bold;
-    cursor: pointer;
-    margin-top: 10px;
-}
-
-dialog h2 {
-    margin: 0;
-    font-size: 1.5rem;
-}
-
-dialog p {
-    margin: 0;
-    font-size: 1rem;
-}
-
-@media screen and (max-width: 850px) {
-    .flex-row {
-        flex-direction: column;
-    }
-
-    form {
-        align-items: center;
-        width: 100%;
-    }
-
-    .min-width {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-}
-
-@media screen and (max-width: 650px) {
-    .mobileOnly {
-        display: flex;
-    }
-    
-    .pcOnly {
-        display: none;
-    }
-}
-
-@media screen and (min-width: 651px) {
-    .mobileOnly {
-        display: none !important;
-    }
-    
-    .pcOnly {
-        display: flex;
-    }
-}

static/css/bases/base.css

@@ -308,6 +308,14 @@ a {
     text-decoration: none;
 }
 
+code {
+    background-color: var(--secondary-background-color-but-slightly-transparent);
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    color: var(--primary-color);
+}
+
 @media screen and (max-width: 1000px) {
     body {
         background-color: var(--background-color);

static/css/cap.css

@@ -1,20 +0,0 @@
-cap-widget {
-  --cap-background: var(--secondary-background-color-but-slightly-transparent);
-  --cap-border-color: var(--secondary-background-color);
-  --cap-border-radius: 14px;
-  --cap-widget-width: 230px;
-  --cap-widget-padding: 14px;
-  --cap-gap: 15px;
-  --cap-color: var(--text-color);
-  --cap-checkbox-size: 25px;
-  --cap-checkbox-border: 1px solid var(--secondary-background-color);
-  --cap-checkbox-border-radius: 6px;
-  --cap-checkbox-background: none;
-  --cap-checkbox-margin: 2px;
-  --cap-font: "Space Mono", "serif";
-  --cap-spinner-color: var(--primary-color);
-  --cap-spinner-background-color: var(--secondary-background-color-but-slightly-transparent);
-  --cap-spinner-thickness: 5px;
-  --cap-credits-font-size: 12px;
-  --cap-opacity-hover: 0.8;
-}

static/css/gallery.css

@@ -1,17 +1,23 @@
 .gallery {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 1rem;
+    width: 100%;
 }
 
-.gallery img {
+.gallery .gallery-images {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 1rem;
+    overflow: hidden;
+}
+
+.gallery .gallery-images img {
     max-width: 100%;
     height: auto;
     border-radius: 10px;
 }
 
-.gallery-date {
-    margin: 1rem 0 .25rem 0;
-    font-size: 2rem;
+.gallery h2.gallery-date {
+    position: relative;
+    top: 0;
+    left: 0;
 }