@font-face{
    font-family:'digital-clock-font';
    src: url('./font/digital-7.ttf');
}

.title {
    text-align: center;
    font-size: 2.5vw;
}

.message {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4vw;
}

.instructionsBox{
    margin-top: 15px;
    padding: 0px 20px;
    border-radius: 20px;
    border: 3px solid rgb(151, 210, 61) ;
}


#instrument {
    height: 14vw;
    width: auto;
    position: absolute;
    top: 14vw;
    left: 35vw;
}

#water {
    opacity: 0.5;
    position: absolute;
    top: 17.6vw;
    height: 4vw;
    width: 4vw; 
    left: 33.2vw; 
    background-color: #add8e6;
    border-radius: 0 0 1vw 1vw;
}

#measuring-beaker {
    height: 5vw;
    width: auto;
    top: 36vw;
    position: absolute;
    left: 44vw;
    opacity: 0.5;
}

#holding-beaker {
    height: 4.5vw;
    width: auto;
    top: 24vw;
    left: 59vw;
    opacity: 0.4;
    position: absolute;
}

#pouring-beaker {
    height: 5vw;
    width: auto;
    top: 36vw;
    position: absolute;
    left: 35vw;
    opacity: 0.5;
}

#cleaning-beaker {
    height: 5vw;
    width: auto;
    top: 36vw;
    position: absolute;
    left: 53vw;
    opacity: 0.5;
}

#distilled-water {
    height: 5vw;
    width: auto;
    top: 35.5vw;
    left: 63vw;
    position: absolute;
}

#cleaning-cloth {
    height: 3vw;
    width: auto;
    top: 25vw;
    left: 71vw;
    position:absolute;
}

.value-box {
    height: 1.2vw;
    width: 2.5vw;
    top: 23.7vw;
    /* background-color: red; */
    left: 38vw;
    position: absolute;
    opacity: 1;
    color: white;
    font-size: 1.3vw;
    font-family: 'digital-clock-font';
}

#pouring-solution {
    background-color: #add8e6; 
    opacity: 0; 
    position: absolute; 
    height: 3.7vw; 
    width: 3.5vw; 
    top: 37vw;
    left: 35.6vw;
    border-radius: 0 0 0.8vw 0.8vw;
}

#measuring-solution {
    background-color: #add8e6; 
    opacity: 0; 
    position: absolute; 
    height: 3.7vw; 
    width: 3.5vw; 
    top: 37vw;
    left: 45vw;
    border-radius: 0 0 0.8vw 0.8vw;
}

#holding-solution {
    background-color: #add8e6; 
    opacity: 0.5; 
    position: absolute; 
    height: 3.2vw; 
    width: 3.1vw; 
    top: 24.9vw;
    left: 59.8vw;
    border-radius: 0 0 0.7vw 0.7vw;
}

#cleaning-solution {
    background-color: #add8e6; 
    opacity: 0; 
    position: absolute; 
    height: 2.5vw; 
    width: 3.2vw; 
    top: 38vw;
    left: 54vw;
    border-radius: 0 0 0.7vw 0.7vw;
}

#splash {
    height: 2vw;
    width: auto;
    position: absolute;
    top: 25.8vw;
    left: 60.5vw;
    opacity: 0;
}

.reset-btn {
    top: 45vw;
    position: absolute;
    left: 49vw;
    height: 2vw;
    width: 6vw;
    font-size: 1vw;
    background-color:#b1d656;
    color: black;
    border-radius: 1vw 1vw;
    font-weight: 500;
}

#submit-btn {
    position: absolute;
    top: 12vw;
    height: 1.9vw;
    width: 6vw;
    font-size: 1vw;
    left: 49vw;
    background-color:#b1d656;
    color: black;
    border-radius: 1vw 1vw;
    font-weight: 500;

    /* left: -2vw; */
}

.holding-beaker-label {
    position: absolute;
    left: 57vw;
    top: 28vw;
    height: 1vw;
}

#slider {
    position: absolute;
    left: 44vw;
    top: 10vw;
    height: 1vw;
    width: 16vw;
    background-color: #a4c652;
}

#slider_value {
    position: absolute;
    left: 50vw;
    top: 8vw;
    font-size: 1.5vw;
    font-weight: 400;
    color:black;
}


@media only screen and (max-width: 800px){
    #instrument {
        height: 28vw;
        width: auto;
        position: absolute;
        top: 28vw;
        left: 12vw;
    }

    .title {
        text-align: center;
        font-size: 5vw;
    }
    
    .message {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
    }
    
    .instructionsBox{
        margin-top: 15px;
        padding: 0px 20px;
        border-radius: 20px;
        border: 3px solid rgb(151, 210, 61) ;
    }
    
    #water {
        opacity: 0.5;
        position: absolute;
        top: 35.2vw;
        height: 8vw;
        width: 8vw; 
        left: 33.2vw; 
        background-color: #add8e6;
        border-radius: 0 0 2vw 2vw;
    }
    
    #measuring-beaker {
        height: 10vw;
        width: auto;
        top: 72vw;
        position: absolute;
        left: 44vw;
        opacity: 0.5;
    }
    
    #holding-beaker {
        height: 9vw;
        width: auto;
        top: 48vw;
        left: 59vw;
        opacity: 0.4;
        position: absolute;
    }
    
    #pouring-beaker {
        height: 10vw;
        width: auto;
        top: 72vw;
        position: absolute;
        left: 35vw;
        opacity: 0.5;
    }
    
    #cleaning-beaker {
        height: 10vw;
        width: auto;
        top: 72vw;
        position: absolute;
        left: 53vw;
        opacity: 0.5;
    }
    
    #distilled-water {
        height: 10vw;
        width: auto;
        top: 71vw;
        left: 63vw;
        position: absolute;
    }
    
    #cleaning-cloth {
        height: 6vw;
        width: auto;
        top: 50vw;
        left: 71vw;
        position:absolute;
    }
    
    .value-box {
        height: 2.4vw;
        width: 5vw;
        top: 47.4vw;
        left: 18vw;
        position: absolute;
        opacity: 1;
        color: white;
        font-size: 2.6vw;
        font-family: 'digital-clock-font';
    }
    
    #pouring-solution {
        background-color: #add8e6; 
        opacity: 0; 
        position: absolute; 
        height: 7.4vw; 
        width: 7vw; 
        top: 74vw;
        left: 35.6vw;
        border-radius: 0 0 1.8vw 1.8vw;
    }
    
    #measuring-solution {
        background-color: #add8e6; 
        opacity: 0; 
        position: absolute; 
        height: 7.4vw; 
        width: 7vw; 
        top: 74vw;
        left: 46vw;
        border-radius: 0 0 1.8vw 1.8vw;
    }
    
    #holding-solution {
        background-color: #add8e6; 
        opacity: 0.5; 
        position: absolute; 
        height: 6.4vw; 
        width: 6.2vw; 
        top: 49.8vw;
        left: 60.8vw;
        border-radius: 0 0 1.4vw 1.4vw;
    }
    
    #cleaning-solution {
        background-color: #add8e6; 
        opacity: 0; 
        position: absolute; 
        height: 5vw; 
        width: 6.4vw; 
        top: 76vw;
        left: 55vw;
        border-radius: 0 0 1.4vw 1.4vw;
    }
    
    #splash {
        height: 4vw;
        width: auto;
        position: absolute;
        top: 51.6vw;
        left: 60.5vw;
        opacity: 0;
    }
    
    .reset-btn {
        top: 90vw;
        position: absolute;
        left: 46vw;
        height: 4vw;
        width: 12vw;
        font-size: 1.8vw;
        background-color:#b1d656;
        color: black;
        /* font-weight: 400; */
        border-radius: 2vw 2vw;
        font-weight: 500;
    }
    
    #submit-btn {
        position: absolute;
        top: 25vw;
        height: 3.8vw;
        width: 10vw;
        font-size: 1.8vw;
        font-weight: 500;
        left: 46vw;
        background-color:#b1d656;
        color: black;
        border-radius: 2vw 2vw;

        
    }
    
    .holding-beaker-label {
        position: absolute;
        left: 57vw;
        top: 56vw;
        height: 2vw;
    }
    
    #slider {
        position: absolute;
        left: 35vw;
        top: 22vw;
        height: 2vw;
        width: 32vw;
        background-color: #a4c652;
    }
    
    #slider_value {
        position: absolute;
        left: 48vw;
        top: 18vw;
        font-size: 2.5vw;
        color:black
    }
    
}