fix flag sizing

static/site.css

@@ -7,10 +7,21 @@ body {
     overflow-x: hidden;
 }
 
+.flag{
+    height: 40px;
+    width: 70px;
+    background-repeat: round !important;
+    margin-left: 20px;
+    padding: 0 !important;
+}
+
 @media (max-width: 767px) {
     body {
         font-size: 25px;
     }
+    .flag{
+        margin-left: unset;
+    }
 }
 
 @media (max-width: 500px) {
@@ -19,12 +30,6 @@ body {
     }
 }
 
-.flag{
-    max-height: 100%;
-    max-width: 120%;
-    background-repeat: round !important;
-}
-
 .title-responsive{
     font-size: 25px !important;
     padding-left: 40px;
@@ -115,6 +120,13 @@ body {
     background: rgba(0,0,0,0.25) !important;
 }
 
+.force-fill{
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
 .wrapper {
   width: 100%;
   height: 100%;

templates/navbar.html

@@ -82,14 +82,16 @@
         <li>
 	  <a class="nav-link flag" href="/"
 		  style="background-image: url('https://potaris.de/picture/lang/german-flag.png');">
-		  DE
+		  <div class="hover-to-75 force-fill">
+		  </div>
 	  </a>
         </li>
 	{% elif conf["LANGUAGE"] == "de" %}
         <li>
           <a class="nav-link flag" href="/en/"
 		  style="background-image: url('https://potaris.de/picture/lang/uk-flag.png');">
-		  EN
+		  <div class="hover-to-75 foce-fill">
+		  </div>
 	  </a>
         </li>
 	{% endif %}