body{
    width:1080px; 
    height:715px; 
    margin: 0 auto; 
    overflow: hidden;
    position: relative;
}

h3{  
    text-align: center;
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
}

#reset_btn{
    margin: auto;
    display: block;
    cursor: default;
}

#manual_button, #data_button{
    position:absolute; 
    left: 30px;
    cursor: pointer;
}

#scale_image{
    position: absolute;
    left: 250px;
    top:0px;
    width: 40%;
}

#slider{
    position: absolute;
    left: 278px;
    width: 166px;
    top: 23px;
}

 .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        -webkit-animation-name: fadeIn; /* Fade in the background */
        -webkit-animation-duration: 0.4s;
        animation-name: fadeIn;
        animation-duration: 0.4s
    }
    html {
      min-width: 100%;
      min-height: 100%;
      background-position: top center;
      width: 1080px;
      max-height: 715px;
    }

    /* Modal Content */
    .modal-content {
        position: fixed;
        bottom: 0;
        background-color: #fefefe;
        width: 100%;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s
    }

    /* The Close Button */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: white;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        padding: 2px 16px;
        background-color: black;
        color: white;
    }

    .modal-body {padding: 2px 16px;}

    /* Add Animation */
    @-webkit-keyframes slideIn {
        from {bottom: -300px; opacity: 0} 
        to {bottom: 0; opacity: 1}
    }

    @keyframes slideIn {
        from {bottom: -300px; opacity: 0}
        to {bottom: 0; opacity: 1}
    }

    @-webkit-keyframes fadeIn {
        from {opacity: 0} 
        to {opacity: 1}
    }

    @keyframes fadeIn {
        from {opacity: 0} 
        to {opacity: 1}
    }

    body {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

#apparatus{
    float:right;
}

#solution{
    position:absolute;
    z-index:1; 
    left:8%; 
    top:5%;
}

#flask{
    position:absolute;
    z-index:1; 
    width:8%; 
    left:13%; 
    top:30%; 
    -webkit-filter: saturate(2); /* Safari 6.0 - 9.0 */
    filter: saturate(2);
}

#pipette{
    position:absolute;
    z-index:1; 
    width:3%; 
    left:38%; 
    top:23%;  
}

#beaker{
    position:absolute;
    z-index:1; 
    width:11%; 
    left:55%; 
    top:27%;  
}

#cuvette{
    position:absolute;
    z-index:2; 
    width:2.6%; 
    left:80%; 
    top:48%; 
}

#table_with_spec{
    margin:auto;
    display: block;
}

#computerimage{
    position: absolute; 
    left: 48%; 
    top: 10%; 
    max-width: 50%; 
    max-height: 50%; 
}

#comp_trans_button{
    position: absolute; 
    z-index: 999; 
    width: 12%;
    height: 26%; 
    left: 49%;
    top: 13%; 
}

#spectrolid_trans_button{
    position: absolute; 
    z-index:1;
    width: 5%; 
    height: 18%;
    left: 35%; 
    top: 20%;  
}

#reference{
    position: absolute; 
    width: 15%; 
    left: 54%; 
    top: -9%; 
    visibility: hidden;
}

#ref_cuvette{
    position: absolute; 
    z-index: 1; 
    width: 1.4%;
    left: 52.35%; 
    top: -5%; 
}

#power_trans_button{
    position: absolute; 
    z-index:1;
    left: 18.4%; 
    top: 45%;
    width: 1.4%;
    height: 6%;
    cursor: pointer;
}

#demo{
    position: absolute;
    top: 65%;
    left: 22%;
    max-width: 60%;
    color: yellow;
    text-align: left;
}

#clockScreen{
    position:absolute; 
    top:75px; 
    left:0px;
    visibility:hidden; 
    z-index:4;
}

#clockHand{
    position:absolute; 
    top:314px;
    left:50.75%; 
    visibility:hidden; 
    z-index:5;
}

#scan{
    position:absolute;
    z-index:6; 
    top:65px; 
    left:15px;
    visibility:hidden;
}

#scanimage1, #scanimage2, #scanimage3{
    position: absolute;
    z-index: 8;
    top: 27%;
    left: 15%;
    height: 56%;
    visibility: hidden; 
}

#scan_btn{
    position: absolute;
    z-index: 10;
    top: 464px;
    left: 293px;
    width: 8%;
    height: 5%;
}

.video{
    position: absolute;
    z-index: 12;
    top: 27%;
    left: 15%;
    height: 56%;
    visibility: hidden;
}

#disposegraph{
    position: absolute;
    z-index: 14;
    width: 8%;
    left: 78%;
    top: 564px;
    height: 3%;
}
   