/* Mobile devices (landscape only) */
@media only screen and (max-width: 400px) and (orientation: landscape) {
    /* styles here */


}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* width: 98vmax;
    height: 1vmax; */
    height: 9%;
    width: 100%;
    background: linear-gradient(to right, #d6cfd0, #3b3b3b);
}

.main{
    height: 45.7vmax;
    width: 99.8vmax;
    position: relative;
    overflow: hidden;
}
/* =======================header======================= */
.header{
    border: 1px solid black;
    background: linear-gradient(to right, #b1c9cc, #a7bdbf);
    height: 3vmax;
    width: 99.9vmax; 
    position: absolute;
    display: flex;
    justify-content:first baseline;
    align-items: center;
    padding-left: 1%;
}

#ins{
    font-size: 2vw;
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    left: 5%;
    font-size: 20%;
    
}

#text{
    font-size: 1.5vw;
    font-weight: 100;
    color: rgb(251, 255, 8);
    padding-left: 1% ;
}
/* =======================footer / Expriments======================= */
.footer{
    position: absolute;
    align-items: center;
    top: 3vmax;
    height: 42.8vmax;
    width: 100%;
    overflow: hidden;
}

#experiment{
    /* top: 8%; */
    height: 92.5%;
    width: 100%;
    position: relative;
    /* border: 1px solid black; */
    /* visibility: hidden; */
    overflow: hidden;
}
/* =======================instrumetnts code ======================= */
/* ----------------Background-- ---------------------- */
#Background{
    position: absolute;
    height:100%;
    width: 100%;
    visibility: visible;    

}
/* ----------------empty Ostwalt Viscometer- ---------------------- */
#initialOstwaltViscometer {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    opacity: 100%;
  }
#Ostwald-stand {
  position: absolute;
  top: 83.5%;
  left: 16%;
  opacity: 100%;
  font-size: 65%;
  text-align: center;
  font-weight: bold;
  padding: 0.1%;
  border-radius: 3px;
  color: rgb(0, 0, 0);
}



/* ----------------water Ostwalt Viscometer-- ---------------------- */
#distilledwaterOstwalneck {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #distilledwaterOstwalfull {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #distilledwaterOstwalfull-01 {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #distilledwaterOstwalfull-02 {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #distilledwaterOstwalfull-03 {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #distilledwaterOstwalfull-04 {
    position: absolute;
    height: 47%;
    width: 21.2%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #distilledwaterOstwalfull-05 {
    position: absolute;
    height: 47%;
    width: 21.2%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #distilledwaterOstwalfull-06 {
    position: absolute;
    height: 47%;
    width: 21.2%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #distilledwaterOstwalfull-07 {
    position: absolute;
    height: 47%;
    width: 21.2%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #distilledwaterOstwalfull-08 {
    position: absolute;
    height: 47%;
    width: 21.2%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #distilledwaterOstwalfull-09 {
    position: absolute;
    height: 47%;
    width: 21.2%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }

  #nullOstwaltViscometer {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }

/* ----------------turpentine Ostwalt Viscometer-- ---------------------- */
#turpentineoilOstwaltNeck {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #turpentineoilOstwaltfull {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #turpentineoilOstwaltfull-01 {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #turpentineoilOstwaltfull-02 {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #turpentineoilOstwaltfull-03 {
    position: absolute;
    height: 47%;
    width: 20%;
    top: 43%;
    left: 9%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #turpentineoilOstwaltfull-04 {
    position: absolute;
    height: 47%;
    width: 21.95%;
    top: 43%;
    left: 8.8%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #turpentineoilOstwaltfull-05 {
    position: absolute;
    height: 47%;
    width: 21.95%;
    top: 43%;
    left: 8.8%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #turpentineoilOstwaltfull-06 {
    position: absolute;
    height: 47%;
    width: 21.95%;
    top: 43%;
    left: 8.8%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #turpentineoilOstwaltfull-07 {
    position: absolute;
    height: 47%;
    width: 21.95%;
    top: 43%;
    left: 8.8%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #turpentineoilOstwaltfull-08 {
    position: absolute;
    height: 47%;
    width: 21.95%;
    top: 43%;
    left: 8.8%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }
  #turpentineoilOstwaltfull-09 {
    position: absolute;
    height: 47%;
    width: 21.95%;
    top: 43%;
    left: 8.8%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
  }

/* ---------------water flask-- ---------------------- */
#waterflaskneck {
    position: absolute;
    height: 35%;
    width: 8%;
    top: 58%;
    left: 39%;
    transition: all;
    transition-duration: 1s;
    opacity: 100%;
}
#waterflaskhalf {
    position: absolute;
    height: 35%;
    width: 8%;
    top: 58%;
    left: 39%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
}
/* ---------------turpentine flask-- ---------------------- */
#turpentineOilneck {
    position: absolute;
    height: 35%;
    width: 8%;
    top: 58%;
    right: 40.5%;
    transition: all;
    transition-duration: 1s;
    opacity: 100%
}
#turpentineOilhalf {
    position: absolute;
    height: 35%;
    width: 8%;
    top: 58%;
    right: 40.5%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
}
/* ---------------measuring-cylinder- ---------------------- */
#measuringcylinder200ml {
    position: absolute;
    height: 35%;
    width: 7%;
    top: 57%;
    right: 29%;
    opacity: 100%;
    transition: all;
    transition-duration: 1s;
    opacity: 100%;
}
/* #waterfilled30ml {
  position: absolute;
  height: 35%;
  width: 7%;
  top: 41.5%;
  right: 12%;
  opacity: 0%;
  transition: all;
    transition-duration: 1s;
} */
#waterfilled60ml {
  position: absolute;
  height: 35%;
  width: 7%;
  top: 41.5%;
  right: 12%;
  opacity: 0%;
  transition: all;
    transition-duration: 1s;
}

/* #turpentineoilfilled30ml {
  position: absolute;
  height: 35%;
  width: 7%;
  top: 41.5%;
  right: 12%;
  opacity: 0%;
  transition: all;
    transition-duration: 1s;
} */
#turpentineoilfilled50ml {
  position: absolute;
  height: 35%;
  width: 7.1%;
  top: 41.5%;
  right: 12%;
  opacity: 0%;
  transition: all;
  transition-duration: 1s;
    pointer-events: none;
}
#measuring {
  position: absolute;
  top: 93%;
  left: 64.5%;
  opacity: 100%;
  font-size: 60%;
  text-align: center;
  background-color: #c5c2c2;
  padding: 0.1%;
  border-radius: 3px;
  font-weight: bold;
}

/* ---------------wheighing-machine------------------------ */
#wheighing-machine {
    position: absolute;
    height: 22%;
    width: 20%;
    top: 70%;
    right: 5%;
}
#weighing {
  position: absolute;
  top: 91%;
  left: 82%;
  opacity: 100%;
  font-size: 60%;
  text-align: center;
  background-color: #c5c2c2;
  padding: 0.1%;
  border-radius: 3px;
  font-weight: bold;
}
#Obutton {
  position: absolute;
    top: 82%;
    right: 20%;
    color: white;
    padding: 0.1%;
    background-color: red;
    border-radius: 10%;
    font-size: 0.8vw;
    transition: all;
    transition-duration: 1s;
}
#Obutton:active{
  scale: 0.9;
}

#Tbutton{
  position: absolute;
  top: 82%;
  right: 8%;
  color: rgb(0, 0, 0);
  padding: 0.1%;
  background-color: rgb(238, 245, 42);
  border-radius: 10%;
  font-size: 0.8vw;
  /* box-shadow: none; */
  transition: all;
  transition-duration: 1s;

}
#Tbutton:active{
  scale: 0.9;
}
/* ========================show number======================= */
#initial0000 {
  position: absolute;
  height: 5%;
  width: 5%;
  top: 80.5%;
  right: 12.5%;
  opacity: 0%;
  transition: all;
  transition-duration: 1s;
}
#empty2050 {
  position: absolute;
  height: 5%;
  width: 5%;
  top: 80.5%;
  right: 12.5%;
  opacity: 0%;
  transition: all;
  transition-duration: 1s;
}
#liquid3000 {
  position: absolute;
  height: 5%;
  width: 5%;
  top: 80.5%;
  right: 12.5%;
  opacity: 0%;
  transition: all;
  transition-duration: 1s;
}
#water6000 {
  position: absolute;
  height: 5%;
  width: 5%;
  top: 80.5%;
  right: 12.5%;
  opacity: 0%;
  transition: all;
  transition-duration: 1s;
}
#turpentine5040 {
  position: absolute;
  height: 5%;
  width: 5%;
  top: 80.5%;
  right: 12.5%;
  opacity: 0%;
  transition: all;
  transition-duration: 1s;
}

/* ---------------epippete------------------------ */
#epippete {
    position: absolute;
    height: 30%;
    width: 1.5%;
    top: 68%;
    left: 31%;
    transition: all 1s ease;
    rotate: -90deg;
    opacity: 100%;
}
#fpippete {
    position: absolute;
    height: 30%;
    width: 1.5%;
    top: 68%;
    left: 31%;
    transition: all 1s ease;
    opacity: 0;
    visibility: hidden;
    rotate: -90deg;
    opacity: 0%;
}

#epippete1 {
  position: absolute;
  height: 30%;
  width: 1.5%;
  top: 68%;
  left: 31%;
  transition: all 1s ease;
  rotate: -90deg;
  opacity: 0%;
}
#fpippete1 {
  position: absolute;
  height: 30%;
  width: 1.5%;
  top: 68%;
  left: 31%;
  transition: all 1s ease;
  opacity: 0;
  rotate: -90deg;
  
  opacity: 0%;
}
#epippete2 {
  position: absolute;
  height: 30%;
  width: 1.5%;
  top: 68%;
  left: 31%;
  transition: all 1s ease;
  rotate: -90deg;
  opacity: 0%;
}
#fpippete2 {
  position: absolute;
  height: 30%;
  width: 1.5%;
  top: 68%;
  left: 31%;
  transition: all 1s ease;
  opacity: 0;
  rotate: -90deg;
  opacity: 0%;
}
#epippete3 {
  position: absolute;
  height: 30%;
  width: 1.5%;
  top: 68%;
  left: 31%;
  transition: all 1s ease;
  rotate: -90deg;
  opacity: 0%;
}
#fpippete3 {
  position: absolute;
  height: 30%;
  width: 1.5%;
  top: 68%;
  left: 31%;
  transition: all 1s ease;
  opacity: 0;
  rotate: -90deg;
  opacity: 0%;
}
#epippete4 {
  position: absolute;
  height: 30%;
  width: 1.5%;
  top: 50%;
  left: 42.2%;
  transition: all 1s ease;
  opacity: 0%;
}
#fpippete4 {
  position: absolute;
  height: 30%;
  width: 1.5%;
  top: 50%;
  left: 42.2%;
  transition: all 1s ease;
  opacity: 0%;
}
#pipette-text {
  position: absolute;
  top: 84%;
  left: 35%;
  opacity: 100%;
  font-size: 55%;
  text-align: center;
  background-color: #c5c2c2;
  padding: 0.1%;
  border-radius: 3px;
  font-weight: bold;
}
/* ---------------SuckingPipe------------------------ */    
#SuckingPipe {
    position: absolute;
    height: 10%;
    width: 5%;
    top: 85%;
    left: 24%;
    transition: all;
    transition-duration: 1s;
    rotate: 30deg; 
    opacity: 100%;
}
#SuckingPipe1 {
  position: absolute;
  height: 10%;
  width: 5%;
  top: 89%;
  left: 18%;
  transition: all;
  transition-duration: 1s;
  rotate: 30deg; 
  opacity: 0%;
}
#Sucking-Pipe {
  position: absolute;
  top: 89%;
  left: 30%;
  opacity: 100%;
  font-size: 55%;
  text-align: center;
  background-color: #c5c2c2;
  padding: 0.1%;
  border-radius: 3px;
  font-weight: bold;
}
/* ---------------Text A, B------------------------ */ 
#textAB {
  opacity: 0%;
}
#text-A {
  position: absolute;
    font-size: 20px;
    top: 49.1%;
    left: 29.5%;
    transition: all;
    transition-duration: 1s;
    opacity: 100%;
    color: rgb(0, 0, 0);
} 
#text-B {
  position: absolute;
    font-size: 20px;
    top: 56%;
    left: 29.5%;
    transition: all;
    transition-duration: 1s;
    opacity: 100%;
    color: white;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* =================================================== */
#start{
    position:absolute;
    border-radius: 10%;
    padding: 0.5%;
    font-size: 1vw;
    left: 93%;
    top: 4.5%;
    border: none;
    background-color: rgb(0, 244, 16);
    box-shadow: 1px 1px 0px 0.5px;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;
    animation: blinking;
    animation-duration: 1s infinite ;
}

#start:active{
    scale: 0.9;
    transition: all ease 0.2s;
}

#hindi{
    position:absolute;
    border-radius: 20%;
    padding: 1%;
    font-size: 1.5vh;
    left: 45%;
    top: 50%;
    border: none;
    background-color: rgb(33, 215, 239);
    /*box-shadow: 2px 2px 0px 1px;*/
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;

}

#hindi:active{
    scale: 0.9;
}

#eng{
    position:absolute;
    border-radius: 20%;
    padding: 1%;
    font-size: 1.5vh;
    left: 55%;
    top: 50%;
    border: none;
    background-color: rgb(33, 215, 239);
    /*box-shadow: 2px 2px 0px 1px;*/
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;
}

#eng:active{
    scale: 0.9;
}

#lselector{
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: 2vh;
    color: rgb(255, 255, 255);
    left: 45.2%;
    top: 40%;
}

#langselector{
    height: 100%;
    width: 100%;
    background-color: black;
    position: absolute;
    transition: all;
    transition-duration: 1s;
    visibility: visible;
}

.auto-hide {
  animation: fadeOut 20s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}


/* =======================For text======================= */
/* Medium screens (Tablets) */
@media (max-width: 1024px) {
  #Ostwald-stand,
  #Sucking-Pipe,
  #pipette-text,
  #weighing,
  #measuring {
    font-size: 25%;
  }
}

/* Small screens (Large phones) */
@media (max-width: 768px) {
  #Ostwald-stand,
  #Sucking-Pipe,
  #pipette-text,
  #weighing,
  #measuring  {
    font-size: 10%;
  }
}

/* Extra small screens (Phones) */
@media (max-width: 480px) {
  #Ostwald-stand,
  #Sucking-Pipe,
  #pipette-text,
  #weighing,
  #measuring  {
    font-size: 10%;
  }
}

/* =======================Table data======================= */

:root{
      --bg:#f6f8fb;
      --card:#ffffff;
      --muted:#6b7280;
      --accent:#0f172a;
      --accent-2:#2563eb;
      --border:rgba(15,23,42,0.06);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }


    /* Card */
  #card {
    width: 80%;
    background: var(--card);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(15,23,42,0.08);
    border: 1px solid var(--border);
    position: absolute;
    top: 10%;
    left: 10%;
    opacity: 0;              /* hidden initially */
    pointer-events: none;    /* disable interaction */
    transition: opacity 0.5s ease; 
}


    .card-header{
      padding:20px 24px;
      display:flex;
      align-items:baseline;
      gap:12px;
      border-bottom:1px solid var(--border);
    }
    .title{font-size:18px; font-weight:600;}
    .subtitle{font-size:13px; color:var(--muted); margin-top:2px;}

    .card-body{padding:20px 24px;}

    /* Table */
    table{
      width:100%;
      border-collapse:collapse;
      font-size:14px;
      table-layout:fixed;
    }
    caption{
      text-align:left;
      padding-bottom:12px;
      font-weight:600;
      color:var(--accent-2);
      caption-side:top;
    }
    thead th{
      text-align:left;
      font-size:13px;
      color:var(--muted);
      font-weight:600;
      padding:12px 10px;
      border-bottom:1px solid var(--border);
    }
    tbody td{
      padding:12px 10px;
      vertical-align:middle;
      border-bottom:1px dashed var(--border);
      word-wrap:break-word;
    }

    tbody tr:nth-child(even){ background:linear-gradient(90deg, rgba(37,99,235,0.02), transparent); }

    .param{width:48%; font-weight:600;}
    .symbol{width:16%; color:var(--muted); font-family:monospace;}
    .value{width:20%; font-family:monospace;}
    .unit{width:16%; color:var(--muted);}

    /* Highlight final result */
    .result-row td{ border-bottom:none; }
    .result-badge{
      display:inline-block;
      padding:6px 10px;
      background:linear-gradient(90deg,#0ea5e9,#60a5fa);
      color:white;
      border-radius:999px;
      font-weight:700;
      font-family:monospace;
    }

    /* Note */
    .note{ margin-top:14px; font-size:13px; color:var(--muted); }

    /* Responsive */
    @media (max-width:600px){
      .card{ padding-bottom:12px; }
      thead{ display:none; }
      tbody td{ display:block; padding:10px 12px; }
      tbody td .label-mobile { display:block; font-weight:600; margin-bottom:6px; color:var(--muted); }
      .param, .symbol, .value, .unit { width:100%; display:block; }
      .result-badge{ font-size:15px; padding:8px 12px; }
    }

    /* Print tweak */
    @media print {
      body{ background: white; padding: 0; }
      .card{ box-shadow:none; border:1px solid #ddd; }
      .result-badge{ box-shadow:none; }
    }