added sprites

sass/main.scss

@@ -33,7 +33,7 @@ body {
 }
 
 footer {
-  height: 60px;
+  height: 50px;
   width: 100%;
   bottom: 0px;
   right: 0px;
@@ -43,28 +43,32 @@ footer {
 }
 
 h1, logo span {
-  font-family: 'Langar', sans-serif;
+  font-family: 'VT323', sans-serif;
   position: absolute;
-  font-size: 1.6rem;
+  font-size: 2rem;
   line-height: 1.3em;
   font-weight: 400;
-  top: -36px;
+  top: -42px;
   color: $window-text;
   width: 100%;
-  padding-left: 15px;
+  padding-left: 0px;
   cursor: pointer;
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
-  text-shadow: 0px 2px rgba(0,0,0,0.5);
+  text-shadow: 0px 3px rgba(0,0,0,0.5);
 }
-logo span {
-  margin-top: 2px;
-}
-h1 span {
-  font-family: sans-serif;
-  font-weight: bold;
-  margin-right: 0.2em;
+h1::before, logo span::before {
+  content: "";
+  display: inline-block;
+  position: relative;
+  vertical-align: -6px;
+  margin: 0 6px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAAeCAMAAACylMSIAAAACVBMVEX///8AAAD///9+749PAAAAAnRSTlMAf7YpoZUAAAC3SURBVHja7ZbRCoQwDATd/v9HHxQM4SYJxYNehcyDD013O4qI107G5Peelt4sPRz1toX4w35GsoaW/pe0pKI3PHWAbKqJH7X066QL70LLgn5KXQbXpXXT0rulQVbEW7IiZkeCBeuzsufV0sdKs46v76K0927pl0ozY1oe3TAl6evKDeufvJY+TZrrJJwGxhMY4wis2HpLnyYtyQ54/KvNcits6cOlBcINV06RIjYNd4Yrklp6u/QHWCYPKBXAoUwAAAAASUVORK5CYII=');
+  width: 30px;
+  height: 30px;
+  background-size: 180px 30px; 
+  background-position: 30px 0;
 }
 
 article {
@@ -97,6 +101,9 @@ article {
   //right: 30px;
   //z-index: 30;
   //width: calc( 100% - 390px );
+  h1::before {
+    background-position: 120px 0;
+  }
 }
 
 #article2 {
@@ -104,6 +111,9 @@ article {
   right: 147px;
   z-index: 29;
   width: calc( 100% - 460px );
+  h1::before {
+    background-position: 150px 0;
+  }
 }
 
 #article3 {
@@ -111,6 +121,9 @@ article {
   right: 77px;
   z-index: 28;
   width: calc( 100% - 600px );
+  h1::before {
+    background-position: 60px 0;
+  }
 }
 
 #article4 {
@@ -119,6 +132,9 @@ article {
   left: 77px;
   z-index: 27;
   width: calc( 100% - 600px );
+  h1::before {
+    background-position: 90px 0;
+  }
 }
 
 logo {
@@ -141,6 +157,9 @@ logo {
     z-index: 10;
     border-color: $window-chrome;
   }
+  span::before {
+    background-position: 0px 0;
+  }
   z-index: 50;
   @include window-chrome();
   border-color: black;