turnometer.css

* {
    box-sizing: border-box;
}

html {
    height: 100%;
    font-family: sans-serif;
}

body {
    margin: 0;
    height: 100%;

    display: grid;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-columns: 0.1fr 1fr 0.1fr;
    grid-template-areas:
        ". . ."
        ". time ."
        ". turn ."
        ". phase ."
        ". . .";
}

#time-container {
    grid-area: time;
    width: 30%;
    justify-self: center;
}

#time-backing {
    stroke: transparent;
    fill: black
}

#time {
    fill: white;
}

#turn-container {
    grid-area: turn;
    width: 100%;
}

#turn {
    fill: black;
}

#phase-container {
    grid-area: phase;
    width: 60%;
    justify-self: center;
}

#phase-backing {
    fill: black;
}

#phase {
    fill: white;
}