style.css

html, body {
    height: 100%;
    margin: 0;    
}

.whole-block {
    display: flex;
    flex-direction: column;    
    text-align: center;
    height: 100%;
    min-height: 100%;   
    font-family: 'Bebas Neue', cursive;
}

.hour-block {
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    color: rgba(0, 0, 0, .75);    
}  

.cycle-time {
    position: absolute;    
    font-size: 5em;
    padding: 0em .5em;
}

.cycle-info {
    color: rgba(0, 0, 0, 0.6);
}

.hour-block-1 {
    background-color: #772e25;
}

.hour-block-2 {
    background-color: #c44536;
}

.hour-block-3 {
    background-color: #cd6a5e;
}

.hour-block-4 {
    background-color: #54adb3;
}

.hour-block-5 {
    background-color: #197278;
}

.hour-block-6 {
    background-color: #153f47;
}