:root colors throwing errors in css - html

Question

I have this CSS which reads and renders fine in VS Code's preview, but when I add it to Hostinger (where I'm hosting the site), I get a plethora of errors and it defaults back to my sites old CSS.
The errors all relate to the colors defined at root, which look correct to me so I'm not sure where I went wrong.
Some of the errors were:
:root Rule is empty
--background-color: rgb(13, 1, 14); Expected RBRACE at line 3, col 5
Any idea why it works in VS Code Preview, but not on my public site?
:root
{
--background-color: rgb(13, 1, 14);
--border-color: rgba(255, 255, 255, 0.13);
}
body {
background-color: var(--background-color);
display: flex;
flex-wrap: wrap;
height: 100vh;
margin: 0px;
overflow: hidden;
}
main {
flex-grow: 1;
}
main > article {
display: grid;
height: 100vh;
grid-template-columns: 2fr 1fr;
grid-template-rows: 2fr 1fr;
}
main > article > .article-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
padding: 3rem 2rem;
}
.article-image-section {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.article-image-section img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
main > article > .article-description-section,
main > article > .article-nav-section {
border-left: 1px solid var(--border-color);
}
main > article > .article-title-section,
main > article > .article-nav-section {
border-top: 1px solid var(--border-color);
}
nav {
display: flex;
width: 100%;
height: 15%;
border-bottom: 1px solid var(--border-color);
}
nav > .nav-section {
padding: 3rem 2rem;
display: flex;
gap: 1rem;
border-left: 1px solid var(--border-color);
align-items: center;
justify-content: center;
}
#nav-logo-section {
justify-content: flex-start;
flex-basis: calc(100% / 3);
}
#nav-logo-section > a > i {
font-size: 2.5rem;
}
#nav-link-section {
flex-basis: calc(100% / 3);
gap: 6rem;
}
#nav-social-section {
flex-basis: 1;
gap: 3rem;
}
#nav-contact-section {
flex-basis: 1;
}
* {
box-sizing: border-box;
}
h1, h2, h3, a, p, span {
font-family: "Rubik", sans-serif;
font-weight: 400;
color: white;
}
a {
text-decoration: none;
}