.cont{
    overflow:hidden;
  }
  .menu{
    float:left;

  }
  .menu a {
  background-color:#00AFEF;
  padding: 8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:#000000;
border-radius: 10px;
}
.main {
  float:left;
  width:80%;
  padding:0 20px;
  color:black;
}

  .data{
    position:absolute;
    left:150px;
  }

  table.result {
    border-collapse: collapse;
  }

  table.result th {
    border: 1px solid black;
    padding: 4px;
   background-color: grey;
   color: white;
  }

  table.result tr:nth-child(even) {
    background-color: lightgrey;
    color: black;
  }
  table.result td {
    border: 1px solid black;
    padding: 4px;
  }

/* ===================================================
   FULL PAGE SCALE FOR MOBILE (35%)
   Very compact layout — for small phones
   =================================================== */

@media (max-width: 768px) {
  html {
    transform: scale(0.40);        /* scale entire layout to 35% */
    transform-origin: top left;    /* anchor top-left */
    width: 250.00%;                /* (1 / 0.35) × 100% to fill width */
  }

  body {
    transform: none !important;    /* prevent double scaling */
    overflow-x: hidden;            /* stop horizontal scrollbars */
  }
}


/* ===================================================
   LANDSCAPE MODE FIX FOR PHONES
   Keeps layout smaller when phone is rotated sideways
   =================================================== */

@media screen and (orientation: landscape) and (max-height: 480px) {
  html {
    transform: scale(0.50);       /* adjust for landscape width */
    transform-origin: top left;
    width: 200.00%;               /* (1 / 0.45) × 100% */
  }

  body {
    transform: none !important;
    overflow-x: hidden;
  }
}