Change font/font color; add transitions

static/sexy.css

@@ -56,6 +56,8 @@ body {
 	background-color: #100d1e;
 }
 
+@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400,200,700");
+
 .game {
 	font-size: 100px;
 }
@@ -135,6 +137,7 @@ a:hover {
 	user-select: none;
 	position: relative;
 	width: 40vh;
+	transition: 0.2s;
 }
 
 .game-logo {
@@ -142,23 +145,28 @@ a:hover {
 	opacity: 0.5;
 }
 
+.game-button:hover {
+	transform: scale(1.25, 1.25);
+}
+
 .game-button:hover > .game-logo {
 	opacity: 1;
 }
 
 .game-title {
 	position: absolute;
-	color: rgb(183, 16, 206);
-	font-size: 10vh;
+	color: red;
+	font-size: 9vh;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 	z-index: 1;
-	transition: 0.2s;
+	transition: 0.4s ease-out;
+	font-family: 'Source Code Pro';
 }
 
 .game-button:hover > .game-title {
-	font-size: 12vh;
+	font-size: 10vh;
 }
 
 .game-description {
@@ -167,19 +175,23 @@ a:hover {
 	left: 50%;
 	top: 80%;
 	transform: translate(-50%, 0);
+	font-size: 48px;
+	color: gray;
+	font-family: 'Source Code Pro', monospace;
 }
 
-.game-button:hover > .game-description {
+.game-button:hover + .game-description {
 	display: inline;
 }
 
 .title {
 	font-size: 100px;
-	color: rgb(183, 16, 206);
+	color: gray;
 	position: fixed;
 	left: 50%;
 	top: 10%;
 	transform: translate(-50%, 0);
+	font-family: 'Source Code Pro', monospace;
 }
 
 .switcher {

templates/index.html

@@ -11,24 +11,24 @@
         <div class="flex-container">
             <a href="https://stroll.crux.sexy" class="game-button">
                 <div class="game-title">stroll</div>
-                <div class="game-description">A macro/vore procedural game</div>
                 <img class="game-logo" src="/images/stroll-logo.png">
             </a>
+            <div class="game-description">A macro/vore procedural game</div>
             <a href="https://feast.crux.sexy" class="game-button">
                 <div class="game-title">feast</div>
-                <div class="game-description">A vore-focused RPG</div>
                 <img class="game-logo" src="/images/feast-logo.png">
             </a>
+            <div class="game-description">A vore-focused RPG</div>
             <a href="https://gorge.crux.sexy" class="game-button">
                 <div class="game-title">gorge</div>
-                <div class="game-description">An idle/clicker vore game</div>
                 <img class="game-logo" src="/images/gorge-logo.png">
             </a>
+            <div class="game-description">An idle/clicker vore game</div>
             <a href="https://satiate.crux.sexy" class="game-button">
                 <div class="game-title">satiate</div>
-                <div class="game-description">A text adventure engine with an emphasis on sound</div>
                 <img class="game-logo" src="/images/satiate-logo.png">
             </a>
+            <div class="game-description">A text adventure engine with an emphasis on sound</div>
         </div>
         <a class="switcher" href="/nightly">
             <div class="switcher-text">