main.css

body {
    height: 100%;
    width: 100%;
    background: #466368;
    background: -webkit-linear-gradient(#cffdf8,#216583);
    background:    -moz-linear-gradient(#cffdf8,#216583);
    background:         linear-gradient(#cffdf8,#216583);
}

html {
    height: 100%;
}

.inline-p {
    color: white;
}

.count-wrapper {
    display: inline;
    top:40%;
    width:80%;
    left: 20%;
    position: absolute;
}

.count-wrapper2 {
    display: inline;
    top:30%;
    width:80%;
    left: 20%;
    position: absolute;
}

.count-wrapper3 {
    display: inline;
    top:50%;
    width:80%;
    left: 20%;
    position: absolute;
}

.bar-wrapper {
    left:24%;
    border-radius: 20px;
    position: absolute;
    height:40px;
    width: 50%;
    background: #00204a;
}

.bar {
    border-radius: 20px;
    color: aliceblue;
    text-align: center;
    position: absolute;
    height: 100%;
    font-size: 18px;
    font-weight:bold;
    width: 1%;
    background: #fd5f00;
    transition: width 1.5s;
    -webkit-transition: width 1.5;

}

.text-wrapper {
    font-size: 25px;
    text-align: center;
    position: absolute;
    width: 23%;
}

.inline-p {
    display: inline;
}

#clock {
    text-align: center;
    font-size: 70px;
    padding-top: 50px;
    top: 60%;
    width: 50%;
    left: 25%;
    position: absolute;
    color: white;
    font-weight:bold;
    
}