Make the social media links horizontal on mobile

layouts/partials/navbar.html

@@ -17,7 +17,7 @@
 
 			</ul>
 
-			<ul class="navbar-nav">
+			<ul id="social-menu" class="navbar-nav">
 				{{ with .Site.Data.social }}
 					{{ with .github }}
 					<li class="nav-item">
@@ -35,7 +35,7 @@
 					{{ end }}
 				{{ end }}
 
-				<li class="nav-item ml-md-2">
+				<li class="nav-item ml-auto">
 					<button id="btnTheme" type="button" class="btn btn-dark" aria-pressed="false" autocomplete="off">
 						<span id="themeText" class="fas fa-moon"></span>
 					</button>

static/css/main.css

@@ -1,8 +1,8 @@
 :root {
 	--main-color: #3f51b5;       /* R:63,  G:82,  B:181 */
-	--main-dark-color: #002984;
-	--main-light-color: #757de8;
-	--accent-color: #FFC107;
+	--main-dark-color: #002984;  /* R:0,   G:41,  B:132 */
+	--main-light-color: #757de8; /* R:117, G:125, B:232 */
+	--accent-color: #FFC107;     /* R:255, G:193, B:7   */
 }
 
 body {
@@ -29,6 +29,10 @@ body {
 		padding-bottom: 0.25rem;
 		border-bottom: white 0.25rem solid;
 	}
+
+	#btnTheme {
+		margin-left: 0.5rem;
+	}
 }
 
 @media screen and (max-width: 767px) {
@@ -40,6 +44,14 @@ body {
 	.navbar-nav .nav-item {
 		padding-left: 1rem;
 	}
+
+	#social-menu {
+		flex-direction: row;
+	}
+
+	#social-menu .nav-item:not(:first-child) {
+		padding-left: 2rem;
+	}
 }
 
 .navbar {