CSS stylesheet error - DOMException failed to insert rule on css.stylesheet

Question

I have this crazy error on my css stylesheet - tested across all browsers, and doesn't work. Here's the error :

VM2952 LiveUpdateTools.js:688 Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.about #2015-marker-label { top: calc(86vh - 6px); }'.
at Object.insertRule (http://127.0.0.1:59944/static/files/LiveUpdateTools.js:688:12)
at http://127.0.0.1:59944/static/files/deviceClientScript.js:390:23

And heres the css stylesheet :

.about .marker-text {
    left: calc(50% + 28px);
    position: absolute;
    color: black;
    font-family: Lato;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.about #2000-marker-label {
    top: calc(12vh - 6px);
}

.about #2005-marker-label {
    top: calc(32vh - 6px);
}

.about #2010-marker-label {
    top: calc(52vh - 6px);
}

.about #2015-marker-label {
    top: calc(86vh - 6px);
}

and finally the HTML markup :

<label id="2000-marker-label" class="marker-text">2000</label>
<label id="2005-marker-label" class="marker-text">2005</label>
<label id="2010-marker-label" class="marker-text">2010</label>
<label id="2015-marker-label" class="marker-text">2015</label>

Theres a class on the body element called "about", hence the .about on all the stylesheet selectors. The top property is not being set, which I assume is down to the error. It's not like i'm doing anything crazy here, I googled the error and got 2 outdated results saying it's an issue in chrome. Anyway thanks for any help you can give me, I appreciate it.

Answer 1

Error fixed - didn't know identifiers can't start with numbers! Bizarre...