.timer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0.9;
}

.timer>div {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 240px;
    vertical-align: bottom;
}

.timer>div>h2 {
    margin: -2px 0;
    padding: 0;
    color: var(--text-color);
    font-size: 26px;
    font-weight: normal;
    text-shadow: 1px 1px 1px var(--surface-color), -1px 1px 1px var(--surface-color), -1px -1px 1px var(--surface-color), 1px -1px 1px var(--surface-color);
}

.timer>div>div {
    margin: 0;
    padding: 0;
    background-color: var(--surface-color);
}

.timer>.left>div {
    padding: 8px 4px 8px 8px;
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}

.timer>.center>div {
    position: relative;
    z-index: 1;
    margin: 0 -12px;
    padding: 8px 10px;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

.timer>.right>div {
    padding: 8px 8px 8px 4px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

.timer>div>div>p {
    margin: 0;
    padding: 0;
    background-color: var(--surface-tertiary-color);
    color: var(--text-color);
    font-size: 34px;
}

.timer>.left>div>p {
    clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
}

.timer>.center>div>p {
    font-size: 46px;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%);
}

.timer>.right>div>p {
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 100%, 0 100%);
}

.timer>div>div>p.green {
    color: #5f5;
}

.timer>div>div>p.red {
    color: #f55;
}

.timer>div>div>p>span {
    display: inline-block;
    width: 0.5em;
    text-align: center;
}

.timer>div>div>p>span.sign {
    margin-left: -4px;
    width: 0.7em;
}