Better styles for value.

index.html

@@ -29,6 +29,11 @@
                 float: right;
                 padding: 1px;
             }
+            #pollution-value {
+                font-size: 25px;
+            }
+            .mr-10 { margin-right: 10px; }
+            .ml-30 { margin-left: 30px; }
           </style>
       </head>
 
@@ -43,7 +48,10 @@
 
         <div id="right-side" style="text-indent: 0.5rem; text-top: 1rem;">
         <img src="data:image/png;base64,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621pyenMuCfY0tfn+9KSTb363/Rs+5mMCQAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAj6WFrASr4+35eWrOZyvS0tecqMewKYlAkAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBvgcA4Chm+z6L2fYzGRMAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEEfSwtYyeV6W1pyOjPuCWBSJgAAECQAACBIAABAkAAAgCAfAgQ4iq/P96Ulm3r1g72z7WcyJgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgKCPpQWs5OvzfWnJai7X29KSp8y4J4BJmQAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABAkAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACPJzwABHMdvPWs+2n8mYAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAEPSxtICVzPg72TPuCWBSJgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBH0sLgLe3t8v1trQE4ExMAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABAkAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABD0vrRgd5frbWkJAEzn63PVM9oEAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHNx/ARXdb82H7YErAAAAAElFTkSuQmCC" width="10%" height="10%">
-        &nbsp;  PM<sub>10</sub> &nbsp; &nbsp;&nbsp;  <span id="pollution-value">?</span>
+
+        <span id="value-symbol" class="ml-30 mr-10">PM<sub>10</sub></span>
+
+        <span id="pollution-value">?</span>
 
         <select id="select-station" style="float: right; display: center; font-weight: bold;">
             <option value="00000000-0000-0000-0000-000000000003">ul. Bujaka</option>
@@ -54,9 +62,7 @@
             <option value="00000000-0000-0000-0000-00000000000d">ul. Dietla</option>
         </select>
 
-        <div id="value-id" style="padding: center;font-size: 0.7rem; text-indent: 6rem;">
-        µg/m³
-        </div>
+        <span id="value-id">µg/m³</span>
 
         </div>