Add instructions for playing the test servers

Author: wixoaGit

index.html

@@ -16,7 +16,7 @@
                 <source media="(min-width: 1080px)" srcset="/assets/logo-big.svg" width="580px">
                 <source media="(min-width: 400px)" srcset="/assets/logo-big.svg" width="54%">
                 <source media="(max-width: 400px)" srcset="/assets/logo-small.svg" height="100px">
-                <img src="/assets/logo-big.svg" id="logo" alt="OpenDream logo">
+                <img src="/assets/logo-big.svg" id="logo" alt="OpenDream logo" title="OpenDream Logo">
             </picture>
             <br>
             <div id="hero-links">
@@ -51,6 +51,15 @@
         <div id="contents">
             <h1>OpenDream Game Engine</h1>
             <p>OpenDream is an open source recreation of the <a href="https://www.byond.com/">BYOND</a> game engine. Current major goals include running <a href="https://spacestation13.com/">Space Station 13</a> and improving the DM development experience.</p>
+            <h2>How do I play?</h2>
+            <p>We currently have three test servers running 24/7. You can play them by <a href="https://spacestation14.com/about/download/">downloading the Space Station 14 launcher</a> and searching the servers list for "OpenDream". You may also connect directly with the below URLs:</p>
+            <ul>
+                <li><b>Paradise: </b> ss14s://server.opendre.am/server</li>
+                <li><b>Goonstation: </b> ss14s://server.opendre.am/goon</li>
+                <li><b>/tg/station: </b> ss14s://server.opendre.am/tg</li>
+            </ul>
+            <p>OpenDream is still in development so expect plenty of smaller things to not work properly.</p>
+            <h2>Screenshots</h2>
             <div id="screenshots">
                 <img src="https://github.com/OpenDreamProject/OpenDream/raw/master/.github/assets/screenshot.png?raw=true" alt="OpenDream running tg station"/>
                 <p>OpenDream running <a href="https://github.com/tgstation/tgstation">/tg/station</a></p>

style.css

@@ -94,7 +94,7 @@ a:hover {
     transition-property: box-shadow;
 }
 
-#hero-links div:hover {
+#hero-links > div:hover {
     box-shadow: 0px 0px 16px var(--hero-button-box-shadow);
 }
 
@@ -112,13 +112,19 @@ a:hover {
 #contents {
     background-color: var(--background-color);
     box-shadow: 0px -5px 5px var(--contents-box-shadow);
-}
-
-#contents {
     text-align: center;
     min-height: 100vh;
 }
 
+#contents > p {
+    margin-left: 5vw;
+    margin-right: 5vw;
+}
+
+#contents > ul {
+    list-style-type: none;
+}
+
 #screenshots {
     display: flex;
     flex-direction: column;
@@ -129,9 +135,10 @@ a:hover {
 #screenshots img {
     width: 100%;
     max-width: 1080px;
-    margin: 20px 10px 0px 10px;
+    margin: 0px 10px 0px 10px;
 }
 
 #screenshots p {
     margin-top: 0px;
+    margin-bottom: 20px;
 }