/*Base Layout-------------------------------------------------- */
body, html { 
    height:100%;
    max-height:100%;
    width:100%;
    padding: 0;
    margin: 0;
    background-color:black;
    color:white;
    font-family: Arial, Helvetica, sans-serif;
    font-size:2.5vw;
    text-decoration: none !important;

overflow:hidden;}

#app_selector_wrapper {
    min-width: 100vw; 
    max-width: 100vw;
    width:100vw;

    }

.app_selector_img_wrapper {
    float:left;
    height:100%;
    aspect-ratio: 1 / 1;
}

.app_selector_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#app_frame {
    width: 100vw; 
    min-width: 100vw; 
    max-width: 100vw;
    height: 90vh;
    min-height: 90vh;
    max-height: 90vh;
    border: none;
    overflow: hidden;
    }

@media (max-width: 800px) and (orientation: portrait)   {/*MOBILE PORTRAIT-------------------------------------------------- */
  body {
    font-size: 15px; /* root text size */
  }
  
  #app_selector_wrapper {
    min-height: 45px; 
    max-height: 45px;
    height: 45px;
  }
}

@media (max-width: 800px) and (orientation: landscape)  {/*MOBILE LANDSCAPE-------------------------------------------------- */
  body {
    font-size: 15px; /* root text size */
  }

  #app_selector_wrapper {
    min-height: 45px; 
    max-height: 45px; 
    height: 45px; 
  }
}

@media (min-width: 501px) and (orientation: portrait)   {/*TABLET PORTRAIT-------------------------------------------------- */ 
  body {
    font-size: 40px; /* root text size */
  }

  #app_selector_wrapper {
    min-height: 100px; 
    max-height: 100px;
    height: 100px;
  }
}

@media (min-width: 801px) and (orientation: landscape)  {/*TABLET LANDSCAPE-------------------------------------------------- */
  body {
    font-size: 40px; /* root text size */
  }

  #app_selector_wrapper {
    min-height: 100px;
    max-height: 100px;
    height: 100px;
  }
 
}