.compassContainer {
    z-index: 5;
    width: var(--column1);
    position: fixed;
    left: var(--dm);
    height: var(--compass);
    display: flex;
    justify-content: center;
    align-content: center;
    padding: calc(var(--size19) +  var(--dm));
}
.compass {
    overflow: visible;
    height: 100%;
}

.compassNeedle {
    transform-origin: center;
}

.compassTime {
    stroke-dasharray: 1000px;
    stroke-dashoffset: -1000px;
}

@media screen and (orientation: portrait) {
    .compassContainer {
        position: fixed;
        bottom: var(--dm);
        left: 50%;
        transform: translate(-50%, 0%);
        width: var(--column2);
        height: var(--column2);
        padding: 0px;
    }
}