HTML site not showing certain elements when not using live server

When i use the live server in VS Code everything works as expected, however when I open the site via files it doesn't show certain elements. I've noticed that it's the ones that require linking to other files. For example @font-face and background-image: url()

I've tried restarting my PC thinking that it just didn't load or something but that wasn't the case. The files and paths are structured correctly since it works in live server mode so I doubt that that's the problem

Heres parts of code that are most likely problematic and screenshots of file vs. live server

@font-face {
    font-family: Raleway;
    src: url(/fonts/Raleway-Medium.ttf);
  }
main{
    background-image: url('/img/pozadina.png');
    background-repeat: no-repeat;
    background-position: center;
}

Live server
HTML file

Try to add dots (.) before folders in path

@font-face {
  font-family: Raleway;
  src: url(./fonts/Raleway-Medium.ttf);
}
main{
  background-image: url('./img/pozadina.png');
  background-repeat: no-repeat;
  background-position: center;
}

I found the solution, instead of adding one dot i had to add two. Now it works for both, browser file protocol and live server.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@font-face {
  font-family: Raleway;
  src: url(../fonts/Raleway-Medium.ttf);
}
main{
  background-image: url('../img/pozadina.png');
  background-repeat: no-repeat;
  background-position: center;
}

<!-- end snippet -->