html { height: 100% } /* needed so that body 100% has meaning */
body{ font-family: Arial, Helvetica, sans-serif; font-size:1.1em; height:100%; 
      margin:0; padding:0; background-color:black; overflow:hidden }

/* menu */
.top-menu { display: flex; position: fixed; top: 0; left: 0; right: 0; 
        color: white; justify-content: space-around; padding: 10px 0; z-index: 10;overflow:visible; }
.top-menu button:first-of-type {
  margin-left: 2.5em; /* tweak as needed */
}
.top-menu button { background: none; border: none; color: white; font-size: 16px; cursor: pointer; z-index: 6;}
.menu-content { display: none; padding: 10px; margin-top: 60px; position: relative;
        background: #f0f0f0; max-height:70vh; overflow-y:auto; }
.menu-content.active { display: block;  z-index: 10; }
.menu-content a { display: block; margin: 5px 0; text-decoration: none; color: #333;}
.close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none;
        font-size: 50px; font-weight: bolder; cursor: pointer; color: #666; z-index: 10; } 
.back {z-index:6; position:absolute; right:1%;top:0.2em;  width:auto; height:2em;opacity:0.6; pointer-events:auto;}



/* main game */
.gameFrame {z-index:2;position:absolute; bottom:0; 
    width: 100vw;              /* 100% of the viewport width */
    aspect-ratio: 5 / 2;       /* Width:Height = 5:2 (same as 100:40) */
        background-color: transparent; overflow:hidden; margin:0;} /* centers as needed */ 
.game {z-index:1; position:absolute; width:100%; height:100%; background-color:black;} 
.textArea {z-index:3;position:absolute; left:0; top:0.9em; width:100%; color: white;
        min-height:10%; overflow:visible; text-align:center; }
.text {z-index:4; font-size:1em; position:relative; overflow:visible; pointer-events: auto; top:0.5em; padding:0.5em; text-align:left;}
.outline {  text-shadow: -0.12em -0.12em 0 #000, -0.04em -0.12em 0 #000, 0.04em -0.12em 0 #000, 0.12em -0.12em 0 #000,
                         -0.12em -0.04em 0 #000,                                                    0.12em -0.04em 0 #000,
                         -0.12em  0.04em 0 #000,                                                    0.12em  0.04em 0 #000,
                         -0.12em  0.11em 0 #000, -0.04em  0.11em 0 #000, 0.04em 0.11em 0 #000, 0.12em  0.11em 0 #000;
}
.divs {position:absolute; pointer-events:auto; cursor:pointer; font-size:0.6em;
        display:flex; align-items:center; justify-content:center; color:white; text-align: center;
        text-shadow:0 0 5px black, 0 0 10px black;}

/* zoom in/out */
.zoomIn{z-index:5; position:absolute; left:30%; top:30%; width:6%; height:auto; opacity:0.7; display:none; }
.zoomOut{z-index:5; position:absolute; right:2%; bottom:2%; width:6%; height:auto; opacity:0.5;}
.zoomBox{z-index:3;position:absolute; background-color: transparent; border: 3px solid yellow;pointer-events:none}


/* odd little things */        
.logo {z-index:5; position:absolute; left:0.5%; width:auto; top:1%; height: 2em; max-height: 100%; }
.icon {z-index:6; position:absolute; width:auto; height:2em;opacity:0.5; pointer-events:auto;}
.left {left:1%;top:48%} .right {right:1%;top:48%} .up {left:48%;top:1%} .down {left:48%;bottom:1%}
.rotatePhoneWarning {z-index:1; font-size:1.5em; top:50%; position:absolute; 
        text-shadow:  0 0 20px #0ff, 0 0 40px #0ff;
        color: yellow; width:100%; text-align: center; pointer-events: none; }
.testOutline { border:1px solid hsl(0 0% 75%); }
.grayOutline { border:1px solid grey; }
.brick-shadow::before { content: ""; position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:black;}
.brick-shadow::after { content: ""; position:absolute; right:0; bottom:0; width:1px;  height:40%; background-color:black;}