fix missing favicon and update title

The final will likely use JS and JSON to dynamically add characters rather than being hard coded like they are in this example/concept

characters/index.html

@@ -4,7 +4,8 @@
     <link rel="stylesheet" type="text/css" href="../styles/button_style.css"> <!-- Button styling -->
     <link rel="stylesheet" type="text/css" href="../styles/window_style.css"> <!-- Window Styling -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>system64.dev - OCs</title>
+    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/favicon/favicon.png">
+    <title>system64.dev - characters</title>
     <!-- embed -->
     <meta content="system64.dev" property="og:title" />
     <meta content="The site of IDeletedSystem64 on the World Wide Web thingamajig" property="og:description" />
@@ -20,8 +21,8 @@
         <input class="taskbar" type="button" onclick="location.href='../characters/index.html';" value="Characters">
         <input class="taskbar" type="button" onclick="location.href='https://git.system64.dev'" value="Code (Gitea)">
     </div> 
-    <div class="container">
-        <div class="window">
+    <div class="container" style="flex-direction: column; display:inline-flex">
+        <div class="window char-window">
             <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
             <img src="preview/ponytown_technocolor.png">
             <h1>Technocolor</h1>
@@ -33,8 +34,32 @@
            </ul>
            <input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
         </div>
-    <!-- trying something with putting this outside the flexbox.. --> 
-    <div class="window" style="width:45vh; float:right;">
+        <div class="window char-window">
+            <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
+            <img src="preview/ponytown_technocolor.png">
+            <h1>Technocolor 2</h1>
+            <p>no way, a second one!</p>
+           <ul>
+            <li>Trans (FtM)</li>
+            <li>Alicorn</li>
+            <li>Music pony</li>
+           </ul>
+           <input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
+        </div>
+        <div class="window char-window">
+            <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
+            <img src="preview/ponytown_technocolor.png">
+            <h1>Technocolor 3</h1>
+            <p>what the fuck, three????</p>
+           <ul>
+            <li>Trans (FtM)</li>
+            <li>Alicorn</li>
+            <li>Music pony</li>
+           </ul>
+           <input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
+        </div>
+    </div>
+    <div class="window" id="char-sidebar" style="width:45vh;">
         <div class="window_titlebar"><h3 class="window">Can I draw your characters?</h3></div>
         <h1>Absolutely!</h1>
         <p>Anyone can draw my characters, there's not much that makes me happier than seeing art of my characters. It doesn't even have to be the greatest!</p>

styles/main_style.css

@@ -55,7 +55,6 @@ body {
 
 .container {
     display: flex;
-    flex-direction: row;
 }
 
 div.main {

styles/window_style.css

@@ -23,20 +23,29 @@ div.window {
     border-width: 5px;
     border-color: #e9e9e9;
     
-    overflow-y: auto;
-    width: 40vw;
-    max-width: 80vw;
+    overflow-y: auto; /* I don't even know what this does, or why it's here... */
+
     padding-top: 4vh;
     padding-bottom: 1vh;
     padding-left: 1vh;
 
-    max-height: 60vh;
+   
     background-color: #e9e9e9;
-
-    margin: 10vh 1vh auto 25vh;
-
+    margin-left: 25vh;
+    margin-top: 10vh;
 }
 
+.char-window {
+    width: 40vw;
+    max-width: 60vw;
+    max-height: 60vh;
+}
+/* I don't know what I'm doing :D */
+#char-sidebar {
+    float: right;
+    margin-right: 25vh;
+    margin-left: auto;
+}
 img {
     float: right;
 }