improve styling for smaller and older devices

.index.html

@@ -24,7 +24,7 @@
 <button disabled title="حدد ما تريد مراجعته أو تسميعه، ثم اضغط على هذا الزر." id=ok>ابدأ</button>
 </div>
 <div hidden id=header>
-<button title="اضغط لبدء مراجعة جديدة" id=new>جديد</button>
+<button title="اضغط لبدء مراجعة جديدة" id=new>جديد</button>&emsp;
 <button title="اضغط لإعادة هذا التسميع من البداية" id=repeat>إعادة</button>
 </div>
 <p id="p"></p>

.style.css

@@ -9,7 +9,9 @@
 * { font-family: AmiriQuranWeb }
 
 html, body { background: #f0f0e8; color: #000 }
-body { margin-top: 1em; transition: 0.5s margin-top }
+input, button, select { font-size: inherit }
+body { font-size: 20px; margin-top: 1em; transition: 0.5s margin-top }
+@media (max-width: 320px) { body { font-size: 18px } }
 
 #p {
   text-align: right;
@@ -24,7 +26,8 @@ body { margin-top: 1em; transition: 0.5s margin-top }
 td { padding: 0.25em }
 
 center {
-  width: min(50em, 95vw);
+  width: 50em;
+  max-width: 95vw;
   margin: 0 auto;
   box-sizing: border-box;
 }
@@ -154,14 +157,14 @@ label { display: inline-block }  /* don't break over lines */
 
 #ok { display: block }
 button {
+  width: 6em;
   width: min(35vw, 10rem);
   transition: opacity 0.5s ease-in-out;
   touch-action: manipulation; /* disable double-tap zooming; https://stackoverflow.com/a/53236027 */
   cursor: pointer;
 }
 
 button:disabled { cursor: not-allowed }
-#header button { margin: 0 1em }
 
 #qaris {
   font-family: serif;