Updated instagram logo, removed incorrect news logo (the one on the UI is temporary until the correct one is obtained), add responsiveness to the social media icons.

app/assets/css/launcher.css

@@ -311,7 +311,7 @@ p {
 }
 
 /* Social media icon content container. */
-#media_container {
+#mediaContent {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -319,6 +319,7 @@ p {
     align-items: flex-end;
     margin-top: 40px;
     height: 100%;
+    align-items: center;
 }
 
 /* Social Media Icon division containers. */
@@ -327,11 +328,64 @@ p {
     flex-direction: column;
 }
 
+/* Container object which wraps an icon to ensure fluid transitions. */
+.mediaContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 27px;
+}
+
+/* Divider bar between the external and internal icons. */
+.mediaDivider {
+    height: 1px;
+    width: 14px;
+    background: rgb(255, 255, 255);
+    margin: 10px 0px;
+}
+
 /* Social media icon shared styles. */
 .mediaSVG {
     fill: #ffffff;
-    margin-top: 15px;
     height: 12px;
+    transition: 0.25s ease;
+    cursor: pointer;
+}
+.mediaSVG:hover, .mediaSVG:active {
+    height: 20px;
+}
+
+/* Twitter icon colors. */
+#twitterSVG:hover {
+    fill: #1da1f2;
+}
+#twitterSVG:active {
+    fill: #1b8dd4;
+}
+
+/* Instagram icon colors. */
+#instagramSVG:hover {
+    fill: url('#instaFill')
+    /*fill: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); */
+}
+#instagramSVG:active {
+    fill: url('#instaFill')
+}
+
+/* Youtube icon colors. */
+#youtubeSVG:hover {
+    fill: #f00;
+}
+#youtubeSVG:active {
+    fill: #ea0202;
+}
+
+/* Discord icon colors. */
+#discordSVG:hover {
+    fill: #7288d9;
+}
+#discordSVG:active {
+    fill: #657ac4;
 }
 
 /*******************************************************************************

app/assets/images/icons/instagram.svg

@@ -1,4 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.36 137.43">
-    <title>instagram</title>
-    <path d="M91.31,38.27H50a10.81,10.81,0,0,0-10.8,10.8V90.33A10.81,10.81,0,0,0,50,101.13H91.31a10.81,10.81,0,0,0,10.8-10.8V49.06A10.81,10.81,0,0,0,91.31,38.27Zm3.27,10.8v7.36H83.83V45.8h7.48A3.27,3.27,0,0,1,94.58,49.06Zm-23.9,10A10.64,10.64,0,1,1,60,69.7,10.66,10.66,0,0,1,70.68,59.05ZM91.31,93.6H50a3.27,3.27,0,0,1-3.27-3.27V63.6h6.86a18,18,0,0,0-1.13,6.1,18.17,18.17,0,1,0,36.35,0,18,18,0,0,0-1.13-6.1h6.86V90.33A3.27,3.27,0,0,1,91.31,93.6Z"/>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="504px" height="504px" viewBox="0 0 5040 5040" preserveAspectRatio="xMidYMid meet">
+<g id="layer101" fill="#000000" stroke="none">
+ <path d="M1390 5024 c-163 -9 -239 -19 -315 -38 -281 -70 -477 -177 -660 -361 -184 -184 -292 -380 -361 -660 -43 -171 -53 -456 -53 -1445 0 -989 10 -1274 53 -1445 69 -280 177 -476 361 -660 184 -184 380 -292 660 -361 171 -43 456 -53 1445 -53 989 0 1274 10 1445 53 280 69 476 177 660 361 184 184 292 380 361 660 43 171 53 456 53 1445 0 989 -10 1274 -53 1445 -69 280 -177 476 -361 660 -184 184 -380 292 -660 361 -174 44 -454 53 -1470 52 -599 0 -960 -5 -1105 -14z m2230 -473 c58 -6 141 -18 185 -27 397 -78 638 -318 719 -714 37 -183 41 -309 41 -1290 0 -981 -4 -1107 -41 -1290 -81 -395 -319 -633 -714 -714 -183 -37 -309 -41 -1290 -41 -981 0 -1107 4 -1290 41 -397 81 -636 322 -714 719 -33 166 -38 296 -43 1100 -5 796 3 1203 27 1380 67 489 338 758 830 825 47 7 162 15 255 20 250 12 1907 4 2035 -9z"/>
+ <path d="M2355 3819 c-307 -42 -561 -172 -780 -400 -244 -253 -359 -543 -359 -899 0 -361 116 -648 367 -907 262 -269 563 -397 937 -397 374 0 675 128 937 397 251 259 367 546 367 907 0 361 -116 648 -367 907 -197 203 -422 326 -690 378 -101 20 -317 27 -412 14z m400 -509 c275 -88 470 -284 557 -560 20 -65 23 -95 23 -230 0 -135 -3 -165 -23 -230 -88 -278 -284 -474 -562 -562 -65 -20 -95 -23 -230 -23 -135 0 -165 3 -230 23 -278 88 -474 284 -562 562 -20 65 -23 95 -23 230 0 135 3 165 23 230 73 230 219 403 427 507 134 67 212 83 390 79 111 -3 155 -8 210 -26z"/>
+ <path d="M3750 1473 c-29 -11 -66 -38 -106 -77 -70 -71 -94 -126 -94 -221 0 -95 24 -150 94 -221 72 -71 126 -94 225 -94 168 0 311 143 311 311 0 99 -23 154 -94 225 -43 42 -76 66 -110 77 -61 21 -166 21 -226 0z"/>
+ </g>
+
 </svg>

app/assets/images/icons/news.svg

@@ -1,21 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.01 75.87">
-    <defs>
-        <style>.cls-1{fill:#fff;stroke:#231f20;}.cls-1,.cls-3{stroke-miterlimit:10;stroke-width:6px;}.cls-2{fill:#231f20;}.cls-3{fill:none;stroke:#000;}</style>
-    </defs>
-    <title>news</title>
-    <path class="cls-1" d="M595.44,341.38v-48a1,1,0,0,0-1-1l-19.15-.23V269.51a1,1,0,0,0-1-1H520.43v72.87" transform="translate(-517.43 -265.51)"/>
-    <rect class="cls-2" x="12.46" y="12.36" width="35.25" height="18.06"/>
-    <path class="cls-3" d="M585.07,281.23" transform="translate(-517.43 -265.51)"/>
-    <path class="cls-3" d="M557.94,281.23" transform="translate(-517.43 -265.51)"/>
-    <line class="cls-3" x1="12.46" y1="39.19" x2="67.64" y2="39.19"/>
-    <line class="cls-3" x1="12.46" y1="50.92" x2="67.64" y2="50.92"/>
-    <line class="cls-3" x1="12.46" y1="62.65" x2="67.64" y2="62.65"/>
-    <path class="cls-3" d="M585.07,295.38" transform="translate(-517.43 -265.51)"/>
-    <path class="cls-3" d="M557.94,293" transform="translate(-517.43 -265.51)"/>
-    <path class="cls-1" d="M598.23,279.63" transform="translate(-517.43 -265.51)"/>
-    <path class="cls-1" d="M594.43,291.44" transform="translate(-517.43 -265.51)"/>
-    <polygon class="cls-2" points="79.83 25.04 74.98 29.87 55.01 5.93 59.63 1.12 79.83 25.04"/>
-    <polygon class="cls-2" points="57.87 9.02 57.87 26.69 77.02 26.91 57.87 9.02"/>
-    <path class="cls-1" d="M826.95,281.7" transform="translate(-517.43 -265.51)"/>
-    <path class="cls-1" d="M823.15,293.51" transform="translate(-517.43 -265.51)"/>
-</svg>

app/index.ejs

@@ -27,42 +27,79 @@
                         <span id="user_text">Username</span>
                         <img id="user_avatar" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/>
                     </div>
-                    <div id="media_container">
+                    <div id="mediaContent">
                         <div id="internalMedia">
-                            <svg id="newsSVG" class="mediaSVG" x="0px" y="0px" viewBox="0 0 297 297" height="20px" width="25px">
-                                <g>
-                                    <path d="M286.933,262.429c5.56,0,10.067-4.508,10.067-10.068V44.64c0-5.56-4.508-10.068-10.067-10.068H44.677c-5.56,0-10.067,4.508-10.067,10.068v24.553H10.067C4.508,69.192,0,73.7,0,79.261v173.1c0,5.561,4.508,10.068,10.067,10.068 H286.933z M20.136,89.328h14.474v152.965H20.136V89.328z M276.864,242.293H54.745V54.707h222.119V242.293z"/>
-                                    <path d="M165.804,193.189h86.52c5.56,0,10.067-4.508,10.067-10.067V96.572c0-5.56-4.508-10.068-10.067-10.068h-86.52c-5.56,0-10.067,4.509-10.067,10.068v86.549C155.736,188.681,160.244,193.189,165.804,193.189z M175.872,106.64h66.383v66.413h-66.383V106.64z"/>
-                                    <path d="M79.284,227.808h173.039c5.56,0,10.067-4.508,10.067-10.068c0-5.56-4.508-10.067-10.067-10.067H79.284c-5.561,0-10.068,4.508-10.068,10.067C69.216,223.3,73.724,227.808,79.284,227.808z"/>
-                                    <path d="M79.284,106.64h51.913c5.56,0,10.067-4.508,10.067-10.067c0-5.56-4.508-10.068-10.067-10.068H79.284c-5.561,0-10.068,4.509-10.068,10.068C69.216,102.132,73.724,106.64,79.284,106.64z"/>
-                                    <path d="M79.284,141.26h51.913c5.56,0,10.067-4.508,10.067-10.067c0-5.561-4.508-10.068-10.067-10.068H79.284c-5.561,0-10.068,4.508-10.068,10.068C69.216,136.752,73.724,141.26,79.284,141.26z"/>
-                                    <path d="M79.284,175.876h51.913c5.56,0,10.067-4.508,10.067-10.068c0-5.56-4.508-10.067-10.067-10.067H79.284c-5.561,0-10.068,4.508-10.068,10.067C69.216,171.368,73.724,175.876,79.284,175.876z"/>
-                                </g>
-                            </svg>
+                            <div class="mediaContainer">
+                                <svg id="newsSVG" class="mediaSVG" x="0px" y="0px" viewBox="0 0 297 297" height="20px" width="25px">
+                                    <g>
+                                        <path d="M286.933,262.429c5.56,0,10.067-4.508,10.067-10.068V44.64c0-5.56-4.508-10.068-10.067-10.068H44.677c-5.56,0-10.067,4.508-10.067,10.068v24.553H10.067C4.508,69.192,0,73.7,0,79.261v173.1c0,5.561,4.508,10.068,10.067,10.068 H286.933z M20.136,89.328h14.474v152.965H20.136V89.328z M276.864,242.293H54.745V54.707h222.119V242.293z"/>
+                                        <path d="M165.804,193.189h86.52c5.56,0,10.067-4.508,10.067-10.067V96.572c0-5.56-4.508-10.068-10.067-10.068h-86.52c-5.56,0-10.067,4.509-10.067,10.068v86.549C155.736,188.681,160.244,193.189,165.804,193.189z M175.872,106.64h66.383v66.413h-66.383V106.64z"/>
+                                        <path d="M79.284,227.808h173.039c5.56,0,10.067-4.508,10.067-10.068c0-5.56-4.508-10.067-10.067-10.067H79.284c-5.561,0-10.068,4.508-10.068,10.067C69.216,223.3,73.724,227.808,79.284,227.808z"/>
+                                        <path d="M79.284,106.64h51.913c5.56,0,10.067-4.508,10.067-10.067c0-5.56-4.508-10.068-10.067-10.068H79.284c-5.561,0-10.068,4.509-10.068,10.068C69.216,102.132,73.724,106.64,79.284,106.64z"/>
+                                        <path d="M79.284,141.26h51.913c5.56,0,10.067-4.508,10.067-10.067c0-5.561-4.508-10.068-10.067-10.068H79.284c-5.561,0-10.068,4.508-10.068,10.068C69.216,136.752,73.724,141.26,79.284,141.26z"/>
+                                        <path d="M79.284,175.876h51.913c5.56,0,10.067-4.508,10.067-10.068c0-5.56-4.508-10.067-10.067-10.067H79.284c-5.561,0-10.068,4.508-10.068,10.067C69.216,171.368,73.724,175.876,79.284,175.876z"/>
+                                    </g>
+                                </svg>
+                            </div>
                         </div>
+                        <div class="mediaDivider"></div>
                         <div id="externalMedia">
-                            <svg id="linkSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
-                                <g>
-                                    <path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/>
-                                    <path d="M66,73.88a3.85,3.85,0,0,0,1.73-.42,8.22,8.22,0,0,1-.94-3.76,8.36,8.36,0,0,1,8.35-8.35H95A8.35,8.35,0,1,1,95,78H85.8a21.51,21.51,0,0,1-6.65,8.72H95a17.07,17.07,0,0,0,0-34.15H75.13A17,17,0,0,0,58.59,73.88Z"/>
-                                </g>
-                            </svg>
-                            <svg id="twitterSVG" class="mediaSVG" width="25px" height="20px" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet">	
-                                <g>
-                                    <path d="M1210 4048 c-350 -30 -780 -175 -1124 -378 -56 -33 -86 -57 -86 -68 0 -16 7 -17 83 -9 114 12 349 1 493 -22 295 -49 620 -180 843 -341 l54 -38 -49 -7 c-367 -49 -660 -256 -821 -582 -30 -61 -53 -120 -51 -130 3 -16 12 -17 73 -13 97 7 199 5 270 -4 l60 -9 -65 -22 c-341 -117 -609 -419 -681 -769 -18 -88 -26 -226 -13 -239 4 -3 32 7 63 22 68 35 198 77 266 86 28 4 58 9 68 12 10 2 -22 -34 -72 -82 -240 -232 -353 -532 -321 -852 15 -149 79 -347 133 -418 16 -20 17 -19 49 20 377 455 913 795 1491 945 160 41 346 74 485 86 l82 7 -7 -59 c-5 -33 -7 -117 -6 -189 2 -163 31 -286 103 -430 141 -285 422 -504 708 -550 112 -19 333 -19 442 0 180 30 335 108 477 239 l58 54 95 -24 c143 -36 286 -89 427 -160 70 -35 131 -60 135 -56 19 19 -74 209 -151 312 -50 66 -161 178 -216 217 l-30 22 73 -14 c111 -21 257 -63 353 -101 99 -39 99 -39 99 -19 0 57 -237 326 -412 468 l-88 71 6 51 c4 28 1 130 -5 226 -30 440 -131 806 -333 1202 -380 745 -1036 1277 -1823 1477 -243 62 -430 81 -786 78 -134 0 -291 -5 -349 -10z"/>
-                                </g>                                </svg>
-                            <svg id="instagramSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
-                                <path d="M91.31,38.27H50a10.81,10.81,0,0,0-10.8,10.8V90.33A10.81,10.81,0,0,0,50,101.13H91.31a10.81,10.81,0,0,0,10.8-10.8V49.06A10.81,10.81,0,0,0,91.31,38.27Zm3.27,10.8v7.36H83.83V45.8h7.48A3.27,3.27,0,0,1,94.58,49.06Zm-23.9,10A10.64,10.64,0,1,1,60,69.7,10.66,10.66,0,0,1,70.68,59.05ZM91.31,93.6H50a3.27,3.27,0,0,1-3.27-3.27V63.6h6.86a18,18,0,0,0-1.13,6.1,18.17,18.17,0,1,0,36.35,0,18,18,0,0,0-1.13-6.1h6.86V90.33A3.27,3.27,0,0,1,91.31,93.6Z"/>
-                            </svg>
-                            <svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">                                    <g>
-                                    <path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/>
-                                </g>
-                            </svg>
-                            <svg id="discordSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
-                                <g>
-                                    <path d="M81.23,78.48a6.14,6.14,0,1,1,6.14-6.14,6.14,6.14,0,0,1-6.14,6.14M60,78.48a6.14,6.14,0,1,1,6.14-6.14A6.14,6.14,0,0,1,60,78.48M104.41,73c-.92-7.7-8.24-22.9-8.24-22.9A43,43,0,0,0,88,45.59a17.88,17.88,0,0,0-8.38-1.27l-.13,1.06a23.52,23.52,0,0,1,5.8,1.95,87.59,87.59,0,0,1,8.17,4.87s-10.32-5.63-22.27-5.63a51.32,51.32,0,0,0-23.2,5.63,87.84,87.84,0,0,1,8.17-4.87,23.57,23.57,0,0,1,5.8-1.95l-.13-1.06a17.88,17.88,0,0,0-8.38,1.27,42.84,42.84,0,0,0-8.21,4.56S37.87,65.35,37,73s-.37,11.54-.37,11.54,4.22,5.68,9.9,7.14,7.7,1.47,7.7,1.47l3.75-4.68a21.22,21.22,0,0,1-4.65-2A24.47,24.47,0,0,1,47.93,82S61.16,88.4,70.68,88.4c10,0,22.75-6.44,22.75-6.44a24.56,24.56,0,0,1-5.35,4.56,21.22,21.22,0,0,1-4.65,2l3.75,4.68s2,0,7.7-1.47,9.89-7.14,9.89-7.14.55-3.85-.37-11.54"/>
-                                </g>
-                            </svg>
+                            <div class="mediaContainer">
+                                <a href="http://www.westeroscraft.com">
+                                    <svg id="linkSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
+                                        <g>
+                                            <path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/>
+                                            <path d="M66,73.88a3.85,3.85,0,0,0,1.73-.42,8.22,8.22,0,0,1-.94-3.76,8.36,8.36,0,0,1,8.35-8.35H95A8.35,8.35,0,1,1,95,78H85.8a21.51,21.51,0,0,1-6.65,8.72H95a17.07,17.07,0,0,0,0-34.15H75.13A17,17,0,0,0,58.59,73.88Z"/>
+                                        </g>
+                                    </svg>
+                                </a>
+                            </div>
+                            <div class="mediaContainer">
+                                <a href="https://twitter.com/westeroscraft">
+                                    <svg id="twitterSVG" class="mediaSVG" width="25px" height="20px" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet">	
+                                        <g>
+                                            <path d="M1210 4048 c-350 -30 -780 -175 -1124 -378 -56 -33 -86 -57 -86 -68 0 -16 7 -17 83 -9 114 12 349 1 493 -22 295 -49 620 -180 843 -341 l54 -38 -49 -7 c-367 -49 -660 -256 -821 -582 -30 -61 -53 -120 -51 -130 3 -16 12 -17 73 -13 97 7 199 5 270 -4 l60 -9 -65 -22 c-341 -117 -609 -419 -681 -769 -18 -88 -26 -226 -13 -239 4 -3 32 7 63 22 68 35 198 77 266 86 28 4 58 9 68 12 10 2 -22 -34 -72 -82 -240 -232 -353 -532 -321 -852 15 -149 79 -347 133 -418 16 -20 17 -19 49 20 377 455 913 795 1491 945 160 41 346 74 485 86 l82 7 -7 -59 c-5 -33 -7 -117 -6 -189 2 -163 31 -286 103 -430 141 -285 422 -504 708 -550 112 -19 333 -19 442 0 180 30 335 108 477 239 l58 54 95 -24 c143 -36 286 -89 427 -160 70 -35 131 -60 135 -56 19 19 -74 209 -151 312 -50 66 -161 178 -216 217 l-30 22 73 -14 c111 -21 257 -63 353 -101 99 -39 99 -39 99 -19 0 57 -237 326 -412 468 l-88 71 6 51 c4 28 1 130 -5 226 -30 440 -131 806 -333 1202 -380 745 -1036 1277 -1823 1477 -243 62 -430 81 -786 78 -134 0 -291 -5 -349 -10z"/>
+                                        </g>
+                                    </svg>
+                                </a>
+                            </div>
+                            <div class="mediaContainer">
+                                <a href="https://www.instagram.com/westeroscraft/">
+                                    <svg id="instagramSVG" class="mediaSVG" viewBox="0 0 5040 5040" height="20px" width="25px">
+                                        <defs>
+                                            <radialGradient id="instaFill" cx="30%" cy="107%" r="150%">
+                                                <stop offset="0%" stop-color="#fdf497"/>
+                                                <stop offset="5%" stop-color="#fdf497"/>
+                                                <stop offset="45%" stop-color="#fd5949"/>
+                                                <stop offset="60%" stop-color="#d6249f"/>
+                                                <stop offset="90%" stop-color="#285AEB"/>
+                                            </radialGradient>
+                                        </defs>
+                                        <g>
+                                            <path d="M1390 5024 c-163 -9 -239 -19 -315 -38 -281 -70 -477 -177 -660 -361 -184 -184 -292 -380 -361 -660 -43 -171 -53 -456 -53 -1445 0 -989 10 -1274 53 -1445 69 -280 177 -476 361 -660 184 -184 380 -292 660 -361 171 -43 456 -53 1445 -53 989 0 1274 10 1445 53 280 69 476 177 660 361 184 184 292 380 361 660 43 171 53 456 53 1445 0 989 -10 1274 -53 1445 -69 280 -177 476 -361 660 -184 184 -380 292 -660 361 -174 44 -454 53 -1470 52 -599 0 -960 -5 -1105 -14z m2230 -473 c58 -6 141 -18 185 -27 397 -78 638 -318 719 -714 37 -183 41 -309 41 -1290 0 -981 -4 -1107 -41 -1290 -81 -395 -319 -633 -714 -714 -183 -37 -309 -41 -1290 -41 -981 0 -1107 4 -1290 41 -397 81 -636 322 -714 719 -33 166 -38 296 -43 1100 -5 796 3 1203 27 1380 67 489 338 758 830 825 47 7 162 15 255 20 250 12 1907 4 2035 -9z"/>
+                                            <path d="M2355 3819 c-307 -42 -561 -172 -780 -400 -244 -253 -359 -543 -359 -899 0 -361 116 -648 367 -907 262 -269 563 -397 937 -397 374 0 675 128 937 397 251 259 367 546 367 907 0 361 -116 648 -367 907 -197 203 -422 326 -690 378 -101 20 -317 27 -412 14z m400 -509 c275 -88 470 -284 557 -560 20 -65 23 -95 23 -230 0 -135 -3 -165 -23 -230 -88 -278 -284 -474 -562 -562 -65 -20 -95 -23 -230 -23 -135 0 -165 3 -230 23 -278 88 -474 284 -562 562 -20 65 -23 95 -23 230 0 135 3 165 23 230 73 230 219 403 427 507 134 67 212 83 390 79 111 -3 155 -8 210 -26z"/>
+                                            <path d="M3750 1473 c-29 -11 -66 -38 -106 -77 -70 -71 -94 -126 -94 -221 0 -95 24 -150 94 -221 72 -71 126 -94 225 -94 168 0 311 143 311 311 0 99 -23 154 -94 225 -43 42 -76 66 -110 77 -61 21 -166 21 -226 0z"/>
+                                        </g>
+                                    </svg>
+                                </a>
+                            </div>
+                            <div class="mediaContainer">
+                                <a href="https://www.youtube.com/user/WesterosCraft">
+                                    <svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">                                    <g>
+                                            <path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/>
+                                        </g>
+                                    </svg>
+                                </a>
+                            </div>
+                            <div class="mediaContainer">
+                                <a href="https://discord.gg/hqdjs3m">
+                                    <svg id="discordSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
+                                        <g>
+                                            <path d="M81.23,78.48a6.14,6.14,0,1,1,6.14-6.14,6.14,6.14,0,0,1-6.14,6.14M60,78.48a6.14,6.14,0,1,1,6.14-6.14A6.14,6.14,0,0,1,60,78.48M104.41,73c-.92-7.7-8.24-22.9-8.24-22.9A43,43,0,0,0,88,45.59a17.88,17.88,0,0,0-8.38-1.27l-.13,1.06a23.52,23.52,0,0,1,5.8,1.95,87.59,87.59,0,0,1,8.17,4.87s-10.32-5.63-22.27-5.63a51.32,51.32,0,0,0-23.2,5.63,87.84,87.84,0,0,1,8.17-4.87,23.57,23.57,0,0,1,5.8-1.95l-.13-1.06a17.88,17.88,0,0,0-8.38,1.27,42.84,42.84,0,0,0-8.21,4.56S37.87,65.35,37,73s-.37,11.54-.37,11.54,4.22,5.68,9.9,7.14,7.7,1.47,7.7,1.47l3.75-4.68a21.22,21.22,0,0,1-4.65-2A24.47,24.47,0,0,1,47.93,82S61.16,88.4,70.68,88.4c10,0,22.75-6.44,22.75-6.44a24.56,24.56,0,0,1-5.35,4.56,21.22,21.22,0,0,1-4.65,2l3.75,4.68s2,0,7.7-1.47,9.89-7.14,9.89-7.14.55-3.85-.37-11.54"/>
+                                        </g>
+                                    </svg>
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>