* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


html,body,.main {
    height: 100%;
    width: 100%;
    position: fixed; 
    display: block;
    background-color: rgb(112, 128, 144);
}

.header {
    border: 1px solid rgb(0, 0, 0);
    padding: 0.1rem;
    position: block;
    background: #27344b;
    height: 8%;
    width: 100%;
    color: rgb(235, 227, 227);
}

.header h1 {
    text-align: center;
    font-weight: 700;
    display:block;
    font-size: 3em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    font-weight: bold;
    font-size: larger;
    text-decoration: underline;
    padding: 0.01rem ;
    
}
/*@media only screen and (max-width: 480px) {
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    .header h1 {
 

    font-size: 0.8rem;

    }
    .header{
        padding: 0.01em;
        height: 5%;
    }
}*/
.super-container {
    display: flex;
    height: 640px;
    width: 100%;
    position: relative;
    margin-top: 0%;
    margin-left: 0%;
}

.simulate {
    border: 1px solid black;
    position: relative;
    overflow: hidden;
    height: 98%;
    width: 78%;
    top: 1%;
    left: 1%;
}
.simulate img{
    width: 100%;
  height: auto;
  display: block;
}

.lab {
    height: 100%;
    width: 100%;
    position: absolute;
    visibility: visible;
    transition: transform 1s ease;
}

.lab.zoomed_lab {
    transform: scale(1.3) ;

    left: 25px;
    top: 60px;
    position: relative;
}
#language-selector {
    
    height: 100%;
    width: 100%;
    background-color: black;
    position: absolute;
    transition: all;
    transition-duration: 1s;
}
#test{
    font-weight: 1000;
}
#Instructions {
    font-weight: 1000;
    top: 1%;
    left: 80% ;
    background-color: rgb(237, 205, 163);
    width:19%;
    height: 98%;
    text-align: center;
    position: absolute;
    border: 2px solid black;
    align-content: center;
}

#message-box{
    
    margin-top: 10%;
    /* align-self: center; */
    border: 3px solid black;
    background-color:white;
    height: 80%;
    width: 90%;  
    position: relative;
    /* text-align: center; */
    margin-left: 5%;
    margin-top: 5%;
    margin-right: 5%;
    
}
#message-text{
    display:inline-block;
    overflow: hidden;
    white-space: normal;
    overflow: hidden;
    font-size: x-large;
    font-weight: 600;
    
    position: relative;
    top: 20%;
   
   
    /* animation: typing 4s steps(10, end) forwards; */
}
/* @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 80%;
    }
  } */
#image {
    height: 100.1%;
    width: 100.1%;
    visibility: visible;
    position: relative;
    visibility: hidden;
}

#button{
    position: absolute;
    height: 98%;
    width: 78%;
    top: 1%;
    left: 1%;
    border: 1px solid black;
}

#next-button {
    position: absolute;
    padding: 1rem;
    font-size: 18px;
    line-height: 0em;
    left: 90%;
    top: 10%;
    font-weight: 500;
    border-radius: 80rem;
    font-weight: 1000;
    background: linear-gradient(to bottom right , rgba(215, 73, 63, 0.728), rgb(150, 157, 219));
    cursor: pointer;
    display:block;
    font-family: system-ui, 'Segoe UI','Open Sans', 'Helvetica Neue', sans-serif;
    outline: transparent;
    touch-action: manipulation;
   border:solid black;
}
#next-button:hover{
    transition: 0.4s;
    
    
    color:  white;
    background: linear-gradient(to bottom right , #05128e, #db1682);
    
}


#text {
    font-weight: 100;
    color: rgb(14, 14, 61);
    font-family: sans-serif;
    font-size:smaller;
}
#instrument{
    width: auto;
}
/* #conical-flask1 {
    width: 3.5%;
    height: 13%;
    position: absolute;
    visibility: visible;
    top: 57%;
    left: 17.3%;
}
#conical-flask2 {
    width: 3.5%;
    height: 13%;
    position: absolute;
    visibility: visible;
    top: 60%;
    left: 59.1%;
}


#ff0 {
    width: 2%;
    height: 35%;
    position: absolute;
    visibility: visible;
    left: 18%;
    top: 25%;
}

#measuring-cylinder{
    width: 2.3%;
    height:22%;
    position: absolute;
    visibility: visible;
    top: 52%;
    left: 25.8%;
}



#hard-water-sample {
    width: 12%;
    height: 19%;
    position: absolute;
    visibility: visible;
    top: 53.6%;
    left: 50%;
    
}
#black-tea-beaker {
    width: 10%;
    height: 19%;
    position: absolute;
    visibility: visible;
    top: 53.6%;
    left: 35%;
}
#buffer-solution {
    width: 12%;
    height: 19%;
    position: absolute;
    visibility: visible;
    top: 53.6%;
    left:42%;
}

#pippete {
    width: 0.8%;
    height: 15%;
    position: absolute;
    visibility: visible;
    top: 66.2%;
    left: 47%;
    rotate: 85deg;
    transition-property: all ;
    transition-duration: 2s;
}


#funnel1{
    
    transition: all;
    width: 3.8%;
    height: 12%;
    position: absolute;
    visibility: hidden;
    top: 45%;
    left:34.6%;
}
#funnel2{
    transition: all;
    width: 3.8%;
    height: 12%;
    position: absolute;
    visibility: hidden;
    top: 45%;
    left:30%; 
}
#drop1{
    width: 2%;
    height: 7%;
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 35%; 
}
#drop2{
    width: 2%;
    height: 7%;
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 30%;
} */



/**********************************************************step1*************************************/
#burette01
{
    /* burett stand */
    width: 9%;
    height: 50%;
    position: absolute;
    visibility: visible;
    left: 14.4%;
    top: 23.2%;
}
#burette01
{
    width: 9%;
    height: 50%;
    position: absolute;
    visibility: visible;
    left: 14.4%;
    top: 23.2%;
}
#ff0 {
    width: 2%;
    height: 35%;
    position: absolute;
    visibility: visible;
    left: 18%;
    top: 25%;
}
#hard-water-sample {
    width: 12%;
    height: 19%;
    position: absolute;
    visibility: visible;
    top: 55.6%;
    left: 38%;
    transition-duration: 2s;
}
#distilled-water-sample {
    width: 8%;
    height: 12%;
    position: absolute;
    visibility: visible;
    top: 60%;
    left: 22.5%;
    transition-duration: 2s;
}
#measuring-cylinder{
    width: 3%;
    height:25%;
    position: absolute;
    visibility: visible;
    top: 49%;
    left: 35%;
    transition-duration: 2s;

}
#conical-flask1 {
    width: 4%;
    height: 17%;
    position: absolute;
    visibility: visible;
    top: 58%;
    left: 28%;
    visibility: visible;
    
}
#buffer-solution {
    width: 12%;
    height: 19%;
    position: absolute;
    visibility: visible;
    top: 55.4%;
    left:47%;
}
#black-tea-beaker {
    width: 10%;
    height: 19%;
    position: absolute;
    visibility: visible;
    top: 55.4%;
    left: 55%;
}
#measur-water{
    /* water inside measuring cylinder */
    width: 1.6%;
    height: 11%;
    position: absolute;
    top: 61.7%;
    left: 35.7%;
    transition-property: all;
    transition-duration: 2s;
    opacity: 0;

}
#conicalflask2{
    width: 4%;
    height: 17%;
    position: absolute;
    visibility: visible;
    top: 57%;
    left: 28%;
    transition-duration: 2s;
    visibility: hidden;
}
 #funnel1{
    /* funnel over mesuring cyl */
    transition: all;
    width: 3.8%;
    height: 12%;
    position: absolute;
    transition-property: all;
    transition-duration: 2s;
    opacity: 0;
    top: 41%;
    left:34.6%;

    
} 
 #funnel2{
    /* funnel over concial flask */
    transition: all;
    width: 3.8%;
    height: 12%;
    position: absolute;
    
    top: 49%;
    left:28.1%;
    transition-property: all;
    transition-duration: 2s;
    opacity: 0;
} 
#drop1{
    /* drop above mesuring cylinder */
    width: 1%;
    height: 7%;
    position: absolute;
    
    top: 36%;
    left: 35.7%;
    transition-property: all;
    transition-duration: 2s;
    opacity: 0;
    
    
}
#drop2{
    /* drop above conical flask */
    width: 1%;
    height: 7%;
    position: absolute;
    rotate: 15deg;
    top: 44.5%;
    left: 29.5%;
    transition-property: all;
    transition-duration: 2s;
    opacity:0;
}
/* #conical-water{
    width: 4%;
    height: 6%;
    position: absolute;
 
    top: 68%;
    left: 28%;
    transition-property: all;
    transition-duration: 2s;
    opacity: 0;
} */
#emptypippete{
    position:absolute;
    transition-property: all;
    height:15%;
    width:0.8%;
    top:68.7%;
    left:47%;
    rotate: 90deg; 

   opacity: 100;
    transition-duration: 2s;
}
/* #emptypippete2{
    position:absolute;
    transition-property: all;
    height:15%;
    width:0.8%;
    top:54.8%;
    left:51.46%;
    opacity: 0;
    transition-duration: 2s;
}
#emptypippete3{
    position:absolute;
    transition-property: all;
    height:15%;
    width:0.8%;
    top:39.9%;
    left:29.7%;
    opacity: 0;
    transition-duration: 2s;
}

#emptypipt5{
    position:absolute;
    transition-property: all;
    height:15%;
    width:0.8%;
    top:39.9%;
    left:29.71%;
    opacity: 0;
    transition-duration: 2s;
} */
#emptypipette2{
    position:absolute;
    transition-property: all;
    height:15%;
    width:0.8%;
    top:68.7%;
    left:40%;
    rotate: 90deg; 
    opacity: 0;
    transition-duration: 2s;
}
#filledpippete{
    position:absolute;
    transition-property: all;
    transition-duration: 2s;
    height:15%;
    width:0.8%;
    top: 54.9%;
    left:51.59%;
   opacity: 0;
}
#bufferdrop{
    width: 0.5%;
    height: 2%;
    position: absolute;
    top: 65.5%;
    left: 29.8%;
    opacity: 0;
    transition-property: all;
    transition-duration: 2s;
}

#blackTdrop{
    width: 0.5%;
    height: 2%;
    position: absolute;
    top: 66%;
    left: 29.85%;
    opacity: 0;
    transition-property: all;
    transition-duration: 2s;
}
#blackTpipett{
    position:absolute;
    transition-property: all;
    height:15%;
    width:0.8%;
    top: 54.9%;
    left:59.71%;
    opacity: 0;
    transition-duration: 2s;
}

#dropsInsideConical{
    width: 0.7%;
    height: 7%;
    
    position: absolute;
    opacity: 0 ;
    top: 61%;
    left: 29.6%;
    transition-duration: 2s;
    transition-property: all;
}





/* ________________________________step 2__________________________________ */


/* 
#reset {
    position: absolute;
    padding: 1rem;
    font-size: 18px;
    line-height: 0em;
    left: 1%;
    top: 10%;
    font-weight: 500;
    border-radius: 80rem;
    font-weight: 1000;
    background: linear-gradient(to bottom right , rgba(215, 73, 63, 0.728), rgb(150, 157, 219));
    cursor: pointer;
    display:block;
    font-family: system-ui, 'Segoe UI','Open Sans', 'Helvetica Neue', sans-serif;
    outline: transparent;
    touch-action: manipulation;
    border:solid black;
}
#reset:hover{
    transition: 0.4s;
    
    
    color:  white;
    background: linear-gradient(to bottom right , #05128e, #db1682);
    
} */

#conical1-step2 {
    /* for initial hardwater */
    width: 4.5%;
    height: 17%;
    position: absolute;
    opacity: 100;
    top: 59%;
    left: 33.8%;
    transition-duration: 2s;
    transition-property: all;
}
#conical2-step2 {
    /* after ion exchange of hard water */
    width: 4.5%;
    height: 17%;
    position: absolute;
    opacity: 100;
    top: 56.6%;
    left: 16.8%;
    transition-duration: 2s;
    transition-property: all;
}
#filled-conical-falsk1-step2
{/* filled for initial hardwater */
    width: 4.5%;
    height: 17%;
    position: absolute;
    transition-duration: 2s;
    transition-property: all;
    top: 59%;
    left: 33.8%;
    opacity: 0;
}
#filled-conical-flask2-step2
{ /* filled after ion exchange of hard water */
    width: 4.5%;
    height: 17%;
    position: absolute;
    transition-duration: 2s;
    transition-property: all;
    top: 56.6%;
    left: 16.8%;
    opacity: 0;
}


#column{
    /* sodium column */
    width: 1.5%;
    height: 35%;
    top: 25%;
    left: 18.2%;
    visibility: visible;
    position: absolute;
}
/* #column{
    width: 3%;
    height: 5%;
    position: absolute;
    visibility: visible;
    top: 57%;
    left: 48%;
    transition-property: all;
    transition-duration: 2s;
} */
#columnstand{
/* burett stand */
    width: 9%;
    height: 45%;
    position: absolute;
    visibility: visible;
    left: 14.4%;
    top: 31.2%;
}
#funnel1-step2{
    /* funnel at initial conical flask */
    transition: all;
    width: 3.8%;
    height: 12%;
    position: absolute;
    opacity: 0;
    top: 51.8%;
    left:34.15%;
    transition-duration: 2s;
    transition-property: all;
}
#funnel2-step2{
    /* funnel at column */
    transition: all;
    width: 3.8%;
    height: 12%;
    position: absolute;
    opacity: 0;
    top: 17.3%;
    left:17.1%;
    transition-duration: 2s;
    transition-property: all
}
#hardwater{
    /* hardwater beaker */
    width: 11.8%;
    height: 19%;
    top: 56.6%;
    position: absolute;
    visibility: visible;
    left: 38%;
    transition-property: all;
    transition-duration: 2s;
}
#blackT {
    /* ebt beaker */
    width: 10%;
    height: 19%;
    top: 56.6%;
    position: absolute;
    visibility: visible;
    left: 45%;
}
#buffer {
    /* buffer beaker */
    width: 12%;
    height: 19%;
    top: 56.6%;
    position: absolute;
    visibility: visible;
    left:52%;
}

#drop1-step2{
    /* drop over initial concial flask */
    width: 1%;
    height: 7%;
    rotate: 15deg;
    position: absolute;
    opacity: 0;
    top: 47.3%;
    left: 36%;
    transition-duration: 2s;
    transition-property: all;
}
#drop2-step2{
    /* drop of hard water over column */
    width: 1%;
    height: 3%;
    rotate: 15deg;
    position: absolute;
    opacity: 0 ;
    top: 16.7%;
    left: 18.5%;
    transition-duration: 2s;
    transition-property: all;
}
#drop-inside-column{
    /* drop inside column */
    width: 0.7%;
    height: 7%;
    
    position: absolute;
    opacity: 0 ;
    top: 29.8%;
    left: 18.6%;
    transition-duration: 2s;
    transition-property: all;
}
#waterINSIDEflask1{
    /* drop at inial concial flask */
    width: 0.7%;
    height: 6%;
    position: absolute;
    top: 63.5%;
    left: 35.7%;
    opacity: 0;
    transition-duration: 2s;
    transition-property: all;
}
#waterINSIDEflask2{
    /* drop at final concial flask */
    width: 0.7%;
    height: 7%;
    position: absolute;
    top: 60%;
    left:18.7%;
    opacity: 0;
    transition-duration: 2s;
    transition-property: all;
}


#emptypipteBuffer1 {
    /* pipett goes to buffer */
    width: 0.8%;
    height: 15%;
    position: absolute;
    opacity: 100;
    top: 66.2%;
    left: 27%;
    rotate: 90deg;
    transition-property: all ;
    transition-duration: 2s;
}
#bufferpipett{
    /* filled pipette at buffer sol to conical */
    width: 0.8%;
    height: 15%;
    position: absolute;
    opacity: 0;
    top: 54.35%;
    left: 56.535%;
    transition-property: all ;
    transition-duration: 2s;
}
#emptypipteBuffer2 {
    /* empty pippet after droping buffer */
    width: 0.8%;
    height: 15%;
    position: absolute;
    opacity: 0;
    top: 40%;
    left: 35.7%;
    transition-property: all ;
    transition-duration: 2s;
}
#blackTemptypipt{
    /* empty pipt for blackT */
    width: 0.8%;
    z-index: 10;
    height: 15%;
    position: absolute;
    opacity: 0;
    top: 68%;
    left: 28%;
    rotate: 90deg;
    transition-property: all ;
    transition-duration: 2s;
}
#blackTppipet{
    /* filled pipette at ebt */
    width: 0.8%;
    height: 15%;
    position: absolute;
    opacity: 0;
    top: 55.8%;
    left: 49.385%;
    transition-property: all ;
    transition-duration: 2s;
}

#buffer-drop{
    /* buffer drop inside conical falsk droped by dropper*/
    width: 0.5%;
    height: 2%;
    position: absolute;
    top: 65%;
    left: 34.58%;
    visibility: hidden; 
 }
#blckTdrop{
    /* blackT drop inside conical falsk droped by dropper */
    width: 0.5%;
    height: 2%;
    position: absolute;
    top: 65%;
    left: 34.58%;
    opacity: 0;
    
} 




/* ***************************step 3******************************************************** */
#redvineflask{
    /* redvine flask */
    width: 4.5%;
    height: 17%;
    position: absolute;
    visibility: visible;
    top: 59%;
    left: 38.8%;
    transition-duration: 2s;
    transition-property: all;
}
#blueflask{
    /* blue flask */
    width: 4.5%;
    height: 17%;
    position: absolute;
    visibility: visible;
    top: 59%;
    left: 43.8%;
    transition-duration: 2s;
    transition-property: all;
}
#buretStand{
    /* burtte stand */
    width: 9%;
    height: 45%;
    position: absolute;
    opacity: 100;
    left: 14.4%;
    top: 31.2%;
    transition-duration: 2s;
    transition-property: all;
}
#edta-beaker {
    width: 12%;
    height: 19%;
    position: absolute;
    opacity: 100;
    top: 56.6%;
    left: 28%;
    transition-duration: 2s;
    transition-property: all;
}
#emptyburette{

    width: 3%;
    height: 38%;
    position: absolute;
    visibility: visible;
    left: 17.8%;
    top: 22%;
    transition-duration: 2s;
    transition-property: all;
}

#filledburette{
    width: 3%;
    height: 38%;
    position: absolute;
    opacity: 0;
    left: 17.8%;
    top: 22%;
    transition-duration: 2s;
    transition-property: all;
}
#funnelOverBurette{
    transition: all;
    width: 3%;
    height: 7%;
    position: absolute;
    opacity: 0;
    top: 17.4%;
    left:17.6%;
    transition-duration: 2s;
    transition-property: all
}
#waterOverBurette{

    width: 1%;
    height: 4%;
    rotate: 15deg;
    position: absolute;
    opacity: 0;
    top: 14.5%;
    left: 19%;
    transition-duration: 2s;
    transition-property: all;
}

#buretteEDTAsolDROPS{
    width: 0.5%;
    height: 6%;
    position: absolute;
    top: 60.5%;
    left: 18.85%;
    opacity: 0;
    transition-duration: 2s;
    transition-property: all;
}

/* **********************************language selector(index)*********************************************** */
.language-selector{
    background-color: black;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center ;
    
}

.language-selector h1{
    font-family: "Sedan SC", serif; ;
    color: #fff;
}

.language-selector button{
    height: 5vh;
    border-radius: 10px;
    width: 5vw;
    border-style: none;
    margin: 10px;
    padding: 2px;
    cursor: pointer;
    transition: opacity 0.5s ease;
    opacity: 100;
    
}
#engbtn:hover{
    background-color: burlywood;
    border-color: red;
    
}
#hindibtn:hover{

    background-color: burlywood;
}