html{
    height:100%;
    background:#2c3e50;
}
body{
    height:100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    /* background: #bdc3c7; /* fallback for old browsers */
    background: #2c3e50; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #bdc3c7, #2c3e50); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #bdc3c7, #2c3e50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
div.main{
    font-family: 'Gloria Hallelujah', cursive;
    margin:20px auto 20px auto;
    min-width:200px;
    max-width:400px;
    padding:0px;
    text-align:center;
    background-color: black;
    border:solid rgba(0, 0, 0,.12) 5px;
    border-color:rgba(255, 255, 255,.92);
    text-shadow: .01px .1px .1px rgb(230, 230, 0);
    box-shadow: .6px .6px 2px white;
    color:white;
    letter-spacing:6px;
    }
div#container{
    
    display:flex;
    vertical-align:middle;
    width:100%;
    height:40px;
    margin:auto;
    border:2px solid black;
    background: #2f7336; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #aa3a38, #2f7336); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #aa3a38, #2f7336); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    transition: all 3s linear;
}
div.inner{
    box-sizing:unset;
}
.lineMarker{
    width:30px;
    transition: all 3s linear;
}
#line{
    width:30px;
    height:100%;
    
    background-color: red;
    /*border-left:2px solid black;
    position: relative;
    left:0%;
    border-right:2px solid black;*/
    padding:0;
    margin:0;
    text-align:center;
    
    /*transition: all 3s ease-out;*/
}

#begin{
    text-align:center;
}
#end{
    text-align:center;
}
.timeSpent{
    transition: all 3s linear;
    width:0%;
}
.timeToGo{
    transition: all 3s linear;
    width:100%;
}

#timeSpent{
    /* margin:2px 0px 2px 0;*/
    text-align:center;
    width:0%;
    /*transition: all 3s ease-out;*/
}
#timeToGo{
    /*margin:2px 0 2px 15px;*/
    text-align:center;
    width:100%;
    /*transition: all 3s ease-out;*/
}
#progress{
    font-size:.8em;
    color:white;
    margin:auto;
    display:flex;
    justify-content:stretch;
    width:90%
    
}
#timeTrack{
    border:2px solid rgba(0,0,0,0);
    width:100%;
    display:flex;
    justify-content:stretch;
    margin:0;
    
}
#prog2{
    margin:0;
    width:100%;
    
}
.marker{
    border-bottom:solid black 2px;
    border-right:solid black 2px;
    border-left:solid black 2px;
    height:10px;
 
}