style: Refactor right-side CSS

Author: FifthTundraG

public/index.html

@@ -140,14 +140,14 @@ <h2>Miscellaneous:</h2>
             </div>
         </div> <!-- end middle -->
         <div class="right-side" id="rightSide">
-            <h1 class="store-heading shadow">Store</h1>
-            <h3 class="upgrades-subheading shadow">Upgrades</h3>
+            <h1>Store</h1>
+            <h3>Upgrades</h3>
             <div class="upgrades-holder-background">
                 <div class="upgrades-holder" id="upgradesHolder">
 
                 </div>
             </div>
-            <h3 class="buildings-subheading shadow">Buildings</h3>
+            <h3>Buildings</h3>
             <div class="buildings-wrapper" id="buildingsWrapper">
 
             </div>

src/scss/main.scss

@@ -344,37 +344,26 @@ small {
 
 .right-side {
     width: 338px;
-    float: right;
-    height: 100vh;
-    border-style: solid;
-    border-width: 0px 0px 0px 8px;
-    border-color: variables.$brown-border;
     display: flex;
     flex-direction: column;
+    border-left: 8px solid variables.$brown-border;
     background-image: url(img/backgrounds/background-blue.png);
+    text-shadow: variables.$shadow;
 
-    .store-heading {
-        margin: 3px;
+    h1 {
+        margin: 4px;
         margin-bottom: 0px;
-        font-size: 50px;
-        text-align: center;
-    }
-
-    .upgrades-subheading {
-        margin-top: 10px;
-        margin-bottom: 3px;
+        font-size: 3rem;
         text-align: center;
     }
 
-    .buildings-subheading {
-        margin-top: 5px;
-        margin-bottom: 3px;
+    h3 {
+        margin-top: 8px;
+        margin-bottom: 8px;
         text-align: center;
     }
 
     .buildings-wrapper {
-        float: right;
-        margin-top: 6px;
         display: flex;
         flex-direction: column;
         align-items: center;