#day,#hour,#minutes,#seconds {
    position: relative
}

#day,#hour,#minutes,#seconds,.base-timer__label {
    width: 100px;
    height: 100px
}

#minutes,#seconds {
    margin-top: -110px
}

.base-timer {
    display: inline-block
}

.base-timer__circle {
    fill: none;
    stroke: none
}

.base-timer__path-elapsed {
    stroke-width: 2.1px!important;
    stroke: #1c3664 !important;
    color: #00f!important;
    background: #00f!important
}

.base-timer__label {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 800
}

.base-timer__path-remaining {
    stroke-width: 5px;
    stroke-linecap: round;
    transform: rotate(270deg);
    transform-origin: center;
    transition: 1s linear;
    stroke: #d8000d;
}

.base-timer__path-remaining.orange {
    color: #f04f2d
}

.base-timer__path-remaining.gold {
    color: gold
}

.base-timer__path-remaining.green {
    color: green
}

.base-timer__path-remaining.yellow {
    color: #ff0
}

.base-timer__path-remaining.red {
    color: red
}

.base-timer__svg {
    transform: scaleX(-1)
}

.base-timer p {
    margin-top: -5px;
    text-align: center
}

#app {
    margin: 20px auto 0;
    text-align: left;
}
