/* Reset some default styles for better consistency */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: block;
    position: relative;
    background-color: rgb(170, 165, 121);
    }
/* Header section styles */
header {
    display: flex;
    width: 100vmax;
    height: 1.5 vmax;
    background-color: khaki;
    justify-content:space-between;
    align-items: center;
}
#tmeter-0,
#tmeter-20,
#tmeter-30,
#tmeter-40,
#tmeter-50,
#tmeter-60,
#tmeter-85 {
  position: absolute;
  left: 22.5%;        /* centre of the test‑tube – adjust if needed */
  top: 12%;
  height: 20%;
  z-index: 100;

  /* start hidden → JS toggles these two props */
  visibility: hidden;
  opacity: 0;

  /* smooth fade when JS flips opacity */
  /* transition: opacity 0.5s ease; */
}
  .wrapper{
    position: absolute;
    top: 39%;
    left: 81%;
    transform: translate(-50%,-50%);
    visibility: visible;
    z-index: 100;
}
.wrapper p{
    position: relative;
    display: inline-block;
    color: #ffffff;
    z-index: 9999;
    font-size: 48px;
    margin-bottom: 120px;
    left: 35%;
}
.wrapper p::before{
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #151538;
    z-index: -1;
    border-radius: 50%;
	left: -40%;
    top: -118%;
    animation-name: shine;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
#tmeter {
    position: absolute;
    left: 60%;
    top: 49%;
    height: 6%;
    /* smooth moves & fades */
    transition:
      top 1s ease,
      left 1s ease,
      transform 1s ease,
      opacity 0.5s ease;
  }
header img{
    width: 1.25vmax;
}
header h3{
    font-size: 1.25vmax;
}
#language-switch select {
    font-size: 0.75vmax;
    background-color: darkkhaki;
    border-radius: 5px;
    cursor: pointer;
}
.move-weight1,.move-stand, .move-tube1, .move-thermometer{
    transform: translate(0, 0);
    transition: transform 2.5s; /* Add a transition property for smoother movement */
}
#beaker{
    top:     11.5vmax;
    left:   17.15vmax;
    width:      7vmax;
    height:     9vmax;
    position:absolute;
    cursor:      grab;
    z-index:        2;
}
#burner{
    top:       21vmax;
    left:     5.5vmax;
    width:     17vmax;
    height:     7vmax;
    z-index:        5;
    cursor:      grab;
    position:absolute;
}
#clampstand{
    top:      2.5vmax;
    left:    14.5vmax;
    width:      9vmax;
    height:    23vmax;
    cursor:   pointer;
    position:absolute;
    z-index:        4;
}
#flame{
    top:    20.4vmax;
    left:    17.9vmax;
    width:   5.75vmax;
    height:  0.75vmax;
    position:absolute;
    z-index:        4;
}
#gauge{
    top: 17.95vmax;
    left: 15.5vmax;
    width: 11vmax;
    height: 3vmax;
    cursor: pointer;
    position: absolute;
    z-index: 3;
}
#lab{
    width: 100vmax;
    height: 45vmax;
}
#readings{
    top: 5.65vmax;
    left: 21.5vmax;
    width: 11vmax;
    height:7.9vmax;
    z-index: 2;
    position: absolute;
    cursor:grab;
}
#tube_{
    top:     9.75vmax;
    left:   20.05vmax;
    width:   1.75vmax;
    height:     7vmax;
    position:absolute;
    cursor:      grab;
    z-index:        2;
}
#tripod{
    top: 18.5vmax;
    left: 17.5vmax;
    width: 7vmax;
    height:9vmax;
    position: absolute;
    cursor:grab;
    z-index: 4;
}
#waterfill{
    top:    13.75vmax;
    left:   18.05vmax;
    width:    5.85vmax;
    height:  6.65vmax;
    position:absolute;
    cursor:      grab;
    z-index:        4;
}
#thermometer{
    top:    21.75vmax;
    left:      55vmax;
    width:   9.75vmax;
    height:     6vmax;
    z-index:        3;
    position:absolute;
    cursor:      grab;
}
/* Footer section styles */
footer{
    width: 100vmax;
    display: flex;
    background-color:coral;
    align-items: center;
    justify-content: space-between;
}
#content-en {
    width: 100vmax;
    display: flex;
    position: absolute;
    background-color:coral;
    align-items: center;
    justify-content: space-between;
}
#content-hi {
    width: 100vmax;
    display: flex;
    position: absolute;
    background-color:coral;
    align-items: center;
    justify-content: space-between;
}
/* Prev and Next buttons */
button {
    background-color:silver;
    font-size: 1.5vmax;
    font-weight: bold;
    border-style: solid;
    border-radius: 5px;
    cursor: pointer;
    width: 5.5vmax;
    height: 2.5vmax;
    
}
button:hover{
    background-color:rgb(75, 73, 73);
    transform:translateY(-0.1vmax);
}
h5{
    position: relative;
    font-size: 1vmax;
    animation-name: Steps;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}
@keyframes Steps{
    0%{left: -100vmax;}
    100%{left: 0vmax;}
}