diff --git a/css/barrel.css b/css/barrel.css
index 2e370ab..d264c46 100644
--- a/css/barrel.css
+++ b/css/barrel.css
@@ -1942,7 +1942,6 @@ footer.padding {
 
         /*Exception: the first item always growable so it can be the title*/
         &> :is(input, select, meter):not(.specificity-hack) {
-            min-height: 100%;
             max-height: 100%;
         }
 
@@ -2155,120 +2154,137 @@ meter {
     padding: 0px;
 }
 
-*::-moz-meter-bar {
-    width: 100% !important;
-    display: block !important;
-    flex-grow: 1;
-    height: 12px;
-    background: var(--control-bg);
-    border: var(--thin-border);
-    border-radius: var(--control-border-radius);
-    margin-top: calc(calc(var(--control-height) - 12px) / 2);
-}
-
-/* WebKit */
+/*Try to make it look kinda like webkit*/
+@supports (-moz-appearance:none) {
+    meter {
+        height: 12px;
+        margin-top: calc((calc(--control-height-12px))/2);
+        margin-top: calc((calc(--control-height-12px))/2);
+        box-shadow: var(--concave-item-box-shadow);
+        background: var(--concave-item-bg);
+        min-height: 12px;
+    }
 
-meter::-webkit-meter-optimum-value,
-meter::-webkit-meter-suboptimum-value,
-meter::-webkit-meter-even-less-good-value {
-    transition: 0.15s linear width;
-}
+    .tool-bar {
+        & label {
+            & meter {
+                min-height: 12px;
+            }
+        }
+    }
 
-meter::-webkit-meter-bar {
-    border-color: var(--control-border-color);
-    background: var(--control-bg);
-    box-shadow: var(--concave-item-box-shadow);
-    border-radius: var(--control-border-radius);
-}
+    *::-moz-meter-bar {
+        width: 100% !important;
+        display: block !important;
+        flex-grow: 1;
+        height: 10px;
+        background: var(--control-bg);
+        border: var(--thin-border);
+        border-radius: var(--control-border-radius);
+    }
 
-meter::-webkit-meter-optimum-value,
-meter::-webkit-meter-suboptimum-value,
-meter::-webkit-meter-even-less-good-value {
-    border-radius: var(--control-border-radius);
-}
+    /* WebKit */
 
-meter::-webkit-meter-optimum-value {
-    background: var(--success-color);
-}
+    meter::-webkit-meter-optimum-value,
+    meter::-webkit-meter-suboptimum-value,
+    meter::-webkit-meter-even-less-good-value {
+        transition: 0.15s linear width;
+    }
 
-meter::-webkit-meter-suboptimum-value {
-    background: var(--warning-color);
-}
+    meter::-webkit-meter-bar {
+        border-color: var(--control-border-color);
+        background: var(--control-bg);
+        box-shadow: var(--concave-item-box-shadow);
+        border-radius: var(--control-border-radius);
+    }
 
-meter::-webkit-meter-even-less-good-value {
-    background: var(--danger-color);
-}
+    meter::-webkit-meter-optimum-value,
+    meter::-webkit-meter-suboptimum-value,
+    meter::-webkit-meter-even-less-good-value {
+        border-radius: var(--control-border-radius);
+    }
 
-meter:-moz-meter-optimum::-moz-meter-bar {
-    background: var(--success-color);
-}
+    meter::-webkit-meter-optimum-value {
+        background: var(--success-color);
+    }
 
-meter:-moz-meter-sub-optimum::-moz-meter-bar {
-    background: var(--warning-color);
-}
+    meter::-webkit-meter-suboptimum-value {
+        background: var(--warning-color);
+    }
 
-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-    background: var(--danger-color);
-}
+    meter::-webkit-meter-even-less-good-value {
+        background: var(--danger-color);
+    }
 
+    meter:-moz-meter-optimum::-moz-meter-bar {
+        background: var(--success-color);
+    }
 
+    meter:-moz-meter-sub-optimum::-moz-meter-bar {
+        background: var(--warning-color);
+    }
 
-/*Catch icons*/
-i[class],
-button i[class] {
-    color: var(--graphical-fg);
-}
+    meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+        background: var(--danger-color);
+    }
 
 
-/*Animation and behavior*/
-button,
-a,
-input,
-select,
-tr,
-label {
-    transition: color 0.2s ease, background 0.2s ease;
-}
+    /*Catch icons*/
+    i[class],
+    button i[class] {
+        color: var(--graphical-fg);
+    }
 
-@media (hover: hover) {
 
-    button:hover,
-    .button:hover,
-    a:hover,
-    button:hover :not(i, b, small, span),
-    a:hover :not(i, b, small, span),
-    .tool-bar>:hover,
-    .tool-bar>a:hover,
-    input:not([type='submit']):not([type='range']):hover,
-    header:not(.undecorated)>:only-child :is(button, .button, input:is([type='submit'], [type='button'])):hover,
-    header:not(.undecorated)>.tool-bar:only-child :is(input, button, select, a):hover,
-    input:hover,
-    select:hover,
-    tr:hover {
-        color: var(--accent-color);
-        --fg: var(--accent-color);
-        background-color: var(--hover-color)
+    /*Animation and behavior*/
+    button,
+    a,
+    input,
+    select,
+    tr,
+    label {
+        transition: color 0.2s ease, background 0.2s ease;
     }
 
-    /*Non toolbsar things don't have a background normally*/
-    .tool-bar input[type='range']:hover {
-        background-color: var(--hover-color);
-    }
+    @media (hover: hover) {
 
-    .tool-bar label:hover {
-        background-color: var(--hover-color);
-    }
+        button:hover,
+        .button:hover,
+        a:hover,
+        button:hover :not(i, b, small, span),
+        a:hover :not(i, b, small, span),
+        .tool-bar>:hover,
+        .tool-bar>a:hover,
+        input:not([type='submit']):not([type='range']):hover,
+        header:not(.undecorated)>:only-child :is(button, .button, input:is([type='submit'], [type='button'])):hover,
+        header:not(.undecorated)>.tool-bar:only-child :is(input, button, select, a):hover,
+        input:hover,
+        select:hover,
+        tr:hover {
+            color: var(--accent-color);
+            --fg: var(--accent-color);
+            background-color: var(--hover-color)
+        }
 
-    label:hover {
-        color: var(--accent-color);
-    }
+        /*Non toolbsar things don't have a background normally*/
+        .tool-bar input[type='range']:hover {
+            background-color: var(--hover-color);
+        }
 
-}
+        .tool-bar label:hover {
+            background-color: var(--hover-color);
+        }
 
-::selection {
-    background: var(--highlight-color);
-}
+        label:hover {
+            color: var(--accent-color);
+        }
+
+    }
+
+    ::selection {
+        background: var(--highlight-color);
+    }
 
-::-moz-selection {
-    background: var(--highlight-color);
-}
\ No newline at end of file
+    ::-moz-selection {
+        background: var(--highlight-color);
+    }
\ No newline at end of file
diff --git a/index.html b/index.html
index 93c905e..2e9b259 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
     <section class="window paper">
       <header class="padding"><button>Look! A Header that is a button!</button></header>
 
-      <h2>Basic Page</h2>
+      <h2>🍂Basic Page🌱</h2>
 
       <p>This is a simple test page for barrel.css</p>
       <p>It is public domain/CC0, allong with barrel.css itself.</p>
@@ -44,6 +44,7 @@ <h3>Round feathered images</h3>
       <img src="img/barrel_studio.webp" class="round-feathered w-sm-full h-center"
         alt="AI generated image of art studio with lots of barrels">
 
+
       <h3>Components</h3>
       <p>We want to keep the number of components very small,
         and use semantic HTML for the rest</p>