Update index.html

Signed-off-by: Blake Arnold <[email protected]>

Author: blake437

index.html

@@ -8,13 +8,6 @@
   padding: 0;
   min-height: 100vh;
 }
-#tabs {
-  display: flex;
-  justify-content: center;
-  margin: -28px 0 0 0;  /* negative top margin to overlap above-tabs */
-  position: relative;
-  z-index: 2;
-}
 
 .above-tabs {
   display: flex;
@@ -24,14 +17,26 @@
   border: 1px solid #bbb;
   border-radius: 8px 8px 0 0;
   box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06);
-  padding: 10px 24px 38px 24px; /* increased bottom padding for space under */
+  padding: 10px 24px 42px 24px;
   margin: 32px auto 0 auto;
   max-width: 480px;
   gap: 14px;
   position: relative;
-  top: 24px;
   z-index: 1;
 }
+
+#tabs {
+  display: flex;
+  justify-content: center;
+  margin: -32px 0 0 0;
+  position: relative;
+  z-index: 2;
+  max-width: 480px;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .tab {
   background: #f7f7f7;
   border: 1px solid #bbb;
@@ -46,17 +51,17 @@
   top: 1px;
   transition: background 0.2s, font-weight 0.2s;
   color: #555;
+  z-index: 2;
 }
+
 .tab.active {
   background: #fff;
   font-weight: bold;
   border-color: #888 #888 #fff #888;
-  z-index: 1;
+  z-index: 3;
   color: #222;
 }
-.tab:not(.active):hover {
-  background: #ececec;
-}
+
 .tab-content {
   display: none;
   border: 1px solid #ccc;
@@ -67,11 +72,28 @@
   max-width: 480px;
   box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
   font-size: 15px;
+  width: 100%;
 }
+
 .tab-content.active {
   display: block !important;
 }
 
+.tab:not(.active):hover {
+  background: #ececec;
+}
+.tab-content {
+  display: none;
+  border: 1px solid #ccc;
+  border-radius: 0 0 8px 8px;
+  background: #fff;
+  padding: 28px 32px 24px 32px;
+  margin: 0 auto 32px auto;
+  max-width: 480px;
+  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
+  font-size: 15px;
+}
+
 .above-tabs input[type="text"], 
 .above-tabs input[type="number"] {
   width: 180px;