:root
{
    --fontSize:22px;
    --color70: var(--colorMainFont);
    --colorContainerBackground:#f3f3f3;
    --colorContainerFont:#3c3c3c;
    --colorHighlightBackground:#25bcb4;
    --colorHighlightFont:#ffffff;

}

html,body 
{
    width:100%;
    max-width:var( --maxWidth);
    margin:auto;
    border:0px solid red;
    overflow:hidden;
    height:100dvh;
    padding-left:0px;
    padding-right:0px;
}

#divBodyContent {padding-top:10px;}

#blockClicker 
{    
    color:var(--colorContainerFont);
    padding:30px;
    position:relative;
    width:90%;
    z-index:0;
    margin:auto;
    margin-bottom:20px;
    max-width:70dvw;
}

#blockClicker::before 
{
    content: "";
    display: inline-block;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color: var(--colorContainerBackground); 
    border-radius:20px;
    z-index:-1;
}

.htmlReader { color:var(--colorHtmlFont); }

.extranav * {font-size:12px;  color:var(--colorHtmlFont);}
.extranav   {text-align:right;color:var(--colorHtmlFont);font-size:12px;padding:4px;padding-right:20px;margin-bottom:20px; }
#divLandingText { margin-bottom:15px;}

@media (max-width: 601px)   
{
    #tableMain tr       {display:block;}
    #tableMain td       {display:block;}
    #tableMain tbody    {display:block;}
    body,html           {max-width:100dvw;}
    .phone              {zoom: 0.6;}
    #divPlatform        {overflow:auto;}
}

.divButton
{
    font-weight: bold;
    border-radius: 5px;
    background-color: var(--colorHighlightBackground);
    color:var(--colorHighlightFont);
    color: var(--colorMainBackground);
    border: 0px;
    font-size: var(--buttonFontSize);
    width: 100%;   
    text-align:center;
    padding:5px;
    max-width:200px;
    margin:auto;
    color:var(--colorHighlightFont);

}

.divButton a { color: inherit; text-decoration: none; font-size:14px;width:100%;display:inline-block; }

/* ------------------ mobile phone layout ---------------------------  */

.phone { 
    position: relative; 
    width: 375px; 
    height: 80dvh;; 
    padding: 10px; 
    border-radius: 48px; 
    background: #111; 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25), inset 0 0 0 2px #333; 
    max-height:700px;
    margin:auto;
}

/* Screen */ 
.phone-screen 
{ 
    position: relative; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    border-radius: 40px; 
    background: #fff; 
}

/* Top speaker / Dynamic Island */ 
.notch { position: absolute; z-index: 10; top: 14px; left: 50%; width: 80px; height: 22px; transform: translateX(-50%); border-radius: 20px; background: #000; }

.status-bar { 
    position: absolute; 
    z-index: 5; 
    top: 0; left: 0; right: 0; 
    height: 60px; 
    padding: 18px 25px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    font-size: 13px; 
    font-weight: 600; 
    color: #111; 
    pointer-events: none; 
} 

.status-icons { display: flex; gap: 7px; align-items: center; } 

.app { width: 100%; height: 100%; padding-top: 60px; overflow-y: auto; } 
.app-content { padding: 0px; } 
.app h1 { margin-top: 20px; } 
.card { padding: 20px; margin-top: 20px; border-radius: 20px; background: #f2f2f2; } 
 .home-indicator { position: absolute; z-index: 10; bottom: 8px; left: 50%; width: 135px; height: 5px; transform: translateX(-50%); border-radius: 10px; background: #000; } 
 .volume-up, 
 .volume-down, 
 .power-button { position: absolute; width: 4px; border-radius: 4px; background: #222; } 
 .volume-up { left: -3px; top: 150px; height: 55px; } 
 .volume-down { left: -3px; top: 220px; height: 55px; } 
 .power-button { right: -3px; top: 180px; height: 90px; }