make flags less dumb?

_includes/flag.html

@@ -1,6 +1,10 @@
-<li class="flag"> <a href="{{include.url}}" class="{{include.color}} flagButton">
-        <span class="flagText">{{include.name}}</span>
-        <!-- <svg viewBox="0 0 115 50" preserveAspectRatio="none">
+<li>
+    <a href="{{include.url}}" class="flag">
+        <span class="{{include.color}} flagButton">
+            <h3>{{include.name}}</h3>
+            <!-- <svg viewBox="0 0 115 50" preserveAspectRatio="none">
             <polygon points="0,50 100,50, 115,25, 100,0, 0,0"/>
         </svg> -->
-</a> </li>
+        </span>
+    </a>
+</li>

css/style.scss

@@ -54,10 +54,8 @@ $body-font: 'Open Sans', sans-serif;
 body {
     margin: 0;
     background-color: $margin;
-    color-profile: sRGB;
 }
 
-
 #box {
     background-color: $background;
     max-width: 800px;
@@ -124,10 +122,13 @@ body {
 
 
 
-#sidebar {
+ul#sidebar {
     flex-shrink: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
     width: 180px;
     margin: 0;
+    line-height: 0;
 
     padding: {
         top: 5px;
@@ -135,11 +136,13 @@ body {
         left: 0px;
     }
     background-color: $background;
+    
 }
 
 .flag {
     display: inline-block;
     text-align: center;
+    line-height: 1em;
 
     position: relative;
     padding: {
@@ -165,7 +168,9 @@ body {
 
         border-radius: 0 5px 5px 0;
 
-        .flagText {
+        h3 {
+            margin-block-start: 0;
+            margin-block-end: 0;
             z-index: 2;
             float: right;
             width: 160px;