body {
    padding: 0;
    margin: 0;
    /*width: 100%;
    height: 100%;*/
    /*background: #0c1e7c;*/
}

#progress-container {
    /*position: absolute;
    width: 80%;
    height: 80%;
    background: rgba(81,16,0,0.2);*/
    /*background: rgba(81, 16, 0, 0.75);*/
    height: 100%;
    width: 100%;
    position: absolute;

}

#logo-container {
    position: absolute;
    width: 60%;
    height: 40%;
    left: 20%;
    top: 10%;
    /*background: yellow;*/

    justify-content: center;
    align-content: center;
    display: flex;
}

.filled-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 10;
}

#loading-container {
    position: absolute;
    /*background: #244c4c;*/
    width: 100%;
    height: 40%;
    top: 58%;

    justify-content: center;
    align-content: center;
    display: flex;
}

#mask {
    position: absolute;
    width: 100%;
    height: 100%;

    mask-image: url(flask_filled.png);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center center;

    -webkit-mask-image: url(flask_filled.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
}

#water {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 10%;

    background-color: #2796BE;
}

.msk-image {
    position: absolute;
    width: 20%;
    height: 90%;
    left: 40%;
    top: 5%;
    background: #00ffff55;
}

#loading-text-container {
    position: absolute;
    /*background-color: #99000088;*/
    width: 40%;
    height: 20%;
    top: -20%;
    
    justify-content: center;
    align-content: center;
    display: flex;
}

#loading-text {
    color: beige;
    font-size: x-large;
    top: 100px;
}