.wordButton {
    border-radius: 10px;
    border: 2px solid #000;
    background: white;
    /* min-height: 44px; */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  #autoAdvanceCountdown {
    text-align: center;
    font-size: 18px;
    margin: 20px 0;
  }

 html, body {margin: 0; padding: 0; overflow-x: hidden; } /* hidden means there will be no hz scrolling. */
 #mobApp { width: 100vw; overflow-x: hidden; margin: 0; padding: 0; }
 #logoParent, #lowDiv, #botDiv {
    white-space: nowrap;
    text-align: center; word-break: break-all; 
    height: auto;       min-height: 0; line-height: 1;
    margin: 0;          padding: 0;
 }
 #logoLeft, #logoCenter, #logoRight  { display: inline-block; vertical-align: top; }
 #logoLeft   { text-align: left;  }
 #logoLeft img, #logoRight img { height: <?php echo "$logoH$units"; ?>; width: auto; }
 #logoCenter { font-size: <?php echo "$logoTxtFS$units"; ?>; text-align: center; padding-top: <?php echo ($logoH-$logoTxtFS) . $units; ?> }
 #fbkDiv, #bfbkDiv, #midDiv {
    text-align: center; width: 100vw; margin: 0; padding: 0;  
    box-sizing: border-box; background-color: pink;
 }
 #playBtn,  #autoBtn, #guessBtn, #repeatBtn,
 #toDTPBtn, #toMobAppBtn, #prevWSBtn,  #nextWSBtn, #backToCurricBtn, #dreamBtn, #helpBtn {
   display: inline-block;
   vertical-align: top;
   padding: 0;
   padding-left: 0.3vw;
   padding-right: 0.3vw;
   /* font-size: <?php echo "$btnFontSize$units"; ?>  */
   cursor: pointer;
   line-height: 1; border-radius: 1.5vw; /* button styling */
 }
 #cpyDiv { text-align: center; }

 #dreamUI {
     position:fixed;
     top:0; left:0;
     width:100vw; height:100vh;
     background:#000000; color:#ffffff;
     z-index:10000;
     font-family:monospace;
     font-size: min(15vw,12vh);
 }
  
 #dreamContainer {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
     height: 100vh;
 }

 #dreamView {
     align-self: center;
     font-size:0.7em; /* ==100px where container is 18vw  */
 }

 #dreamGo, #dreamStop {
     border: 8px outset #cccccc;
     background: linear-gradient(135deg,#f0f0f0, #00FFFF);
     box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
     padding:20px;
     display: flex;
     align-items:center;
     justify-content: center;
     line-height:1;
     font-size: 0.56em; /* relative to dreamContainer */
     color:#5555FF;
     cursor:pointer;
 }
 #dreamGo:active, #dreamStop:active {
     border: 8px inset #cccccc;
     background: linear-gradient(135deg, #00FFFF, #f0f0f0);
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }