Need help fixing "property value expected" in CSS (Beginner/amateur) : <p>So I'm trying to set up some animated text in my project, but I keep getting an error in vscode saying "property value expected css(css-propertyvalueexpected) [59, 1]" in ".main-title" which I think is leading the code not to work cause it's not showing anything like what I'm trying to do when I open the page in browser, it shows it like the css code is non existent</p>

<p>I haven't tried to fix it, I posted the full code below cause I'm not sure what's causing it and I'm a beginner</p>

<pre class="lang-html prettyprint-override"><code>&lt;main role="main" class="main-content" id="main-content"&gt;
    &lt;div class="titleCont"&gt;
        &lt;h1 class="main-title" id="main-title"&gt;
            "Here, in the forest,&lt;br&gt;&lt;span style="padding-left:100px"&gt;dark and deep,&lt;/span&gt;&lt;br&gt;&lt;span style="padding-right:110px"&gt;I offer you,&lt;/span&gt;&lt;br&gt;&lt;span style="padding-left:-20px"&gt;eternal sleep."&lt;/span&gt;
        &lt;/h1&gt;
    &lt;/div&gt;
    &lt;canvas id="noise" class="noise"&gt;&lt;/canvas&gt;
  &lt;div class="vignette"&gt;&lt;/div&gt;
&lt;/main&gt;
</code></pre>

<pre class="lang-css prettyprint-override"><code>.main-content {
  overflow:hidden;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;

    height: 100vh;

    background: linear-gradient(to right, rgba(36,31,31,1) 0%, rgba(36,31,31,1) 32%, rgba(74,71,70,1) 100%);
    color: #fff;
    text-align: center;
}

.vignette{
  position:absolute;
  width:100%; height:100%;
  box-shadow:inset 0px 0px 150px 20px black;
  mix-blend-mode: multiply;
  -webkit-animation: vignette-anim 3s infinite; /* Safari 4+ */
  -moz-animation:    vignette-anim 3s infinite; /* Fx 5+ */
  -o-animation:      vignette-anim 3s infinite; /* Opera 12+ */
  animation:         vignette-anim 3s infinite; /* IE 10+, Fx 29+ */
}

.noise {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
    opacity: .15;
}

.line{
  position:absolute;
  height:100%; width:1px;
  opacity:0.1;
  background-color:#000;
}

.titleCont{position:relative;}

.main-title {
    padding: .3em 1em .25em;    
    font-weight: 400;
    font-size: 40px;
    color: white;
    font-family: 'Bellefair', serif;
    position:relative;
    line-height:1.3;
    white-spacing:
}

.overTitle{
    position:absolute;
    top:0;
    left:0;
}

.dot{
  width:3px;
  height:2px;
  background-color:white;
  position:absolute;
  opacity:0.3;
}


@-webkit-keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}
@-moz-keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}
@-o-keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}
</code></pre>

<p>I copy pasted the code from here "<a href="https://codepen.io/mimikos/pen/QMjjzy" rel="nofollow noreferrer">https://codepen.io/mimikos/pen/QMjjzy</a>" expected it to look the same.</p>

<p>Thanks in advance</p>
