/* 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.5vmax;
    background-color:     khaki;
    justify-content:space-between;
    align-items:           center;
}
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;
}
#content{
    position: relative;
}
#beaker{
    top:     15.5vmax;
    left:   13.75vmax;
    width:      7vmax;
    height:     9vmax;
    position:absolute;
    cursor:      grab;
    z-index:        2;
}
#burner{
    top: 21vmax;
    left: 5.5vmax;
    width:17vmax;
    height: 7vmax;
    z-index: 3;
    position: absolute;
}
#clampstand{
    top: 8.25vmax;
    left: 11.75vmax;
    width: 9vmax;
    height: 17vmax;
    cursor: pointer;
    position: absolute;
    z-index: 3;
}
#flame{
    top: 20.35vmax;
    left:17.9vmax;
    width: 5.75vmax;
    height:0.75vmax;
    position: absolute;
}
#lab{
    width: 100vmax;
    height: 44.95vmax;
}
#napthalene{
    top:    20.25vmax;
    left:    63.5vmax;
    width:    7.5vmax;
    height:     5vmax;
    position:absolute;
    z-index:        1;
}
#napthalene1{
    top:     28.5vmax;
    left:      67vmax;
    width:      7vmax;
    position:absolute;
    z-index:        1;
}
#scale{
    top:    14.25vmax;
    left:    26.5vmax;
    width:    9.5vmax;
    height: 13.75vmax;
    position:absolute;
}
#scale_{
    top:       15vmax;
    left:    26.5vmax;
    width:    9.5vmax;
    height: 13.75vmax;
    position:absolute;
}
#scale1{
    top:       21vmax;
    left:      40vmax;
    width:    9.5vmax;
    height: 13.75vmax;
    position:absolute;
}
#scale3{
    top:       21vmax;
    left:      40vmax;
    width:    9.5vmax;
    height: 13.75vmax;
    position:absolute;
}
#spatula_{
    top: 16.5vmax;
    left: 67.5vmax;
    width: 9vmax;
    height: 4.75vmax;
    position: absolute;
    cursor: grab;
    z-index: 2;
}
#spatula{
    top: 23.15vmax;
    left: 65.75vmax;
    width: 9vmax;
    height:4.75vmax;
    cursor: grab;
    position: absolute;
    z-index: 1;
}
#tube{
    top: 21.75vmax;
    left: 55vmax;
    width: 1.75vmax;
    height: 7vmax;
    cursor: pointer;
    transform-origin: center;
    transform: rotate(90deg);
    position: absolute;
    z-index: 2;
}
#timer{
    top:        3vmax;
    left:      33vmax;
    width:     15vmax;
    position:absolute;
}
#waterfill{
    top: 17.75vmax;
    left: 14.7vmax;
    width: 5.8vmax;
    height: 6.65vmax;
    position: absolute;
    cursor: grab;
    z-index: 4;
}
#weight{
    top: 24.25vmax;
    left: 73vmax;
    width: 7vmax;
    height:3vmax;
    cursor: pointer;
    position: absolute;
    z-index: 1;
}
#weight_{
    top: 21.25vmax;
    left: 27.75vmax;
    width: 7vmax;
    height:3vmax;
    cursor: pointer;
    position: absolute;
}
.move-tube, .move-weight, .move-spatula, .move-spatula_ {
    transform: translate(0, 0);
    transition: transform 2.5s; /* Add a transition property for smoother movement */
}
/* Footer section styles */
footer{
    width: 100vmax;
    display: flex;
    background-color:coral;
    justify-content: space-between;
    align-items: center;
}
#content-en {
    width: 100vmax;
    display: flex;
    position: absolute;
    background-color:coral;
    justify-content: space-between;
    align-items: center;
}
#content-hi {
    width: 100vmax;
    display: flex;
    position: absolute;
    background-color:coral;
    justify-content: space-between;
    align-items: center;
}
/* 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: -641px;}
    100%{left: 0px;}
}