External CSS not loading in Canvas

Using CSS in Init results in blank screen: I want to link multiple css files so that on the actual webpage I can define classes e.g.

Within Css file (example):

h6, .h6 {
	font-size: 17px;
	line-height: 24px;
}

And on webpage I would like to define text (e.g) to have class h6 or create a custom block where I can predefine classes. However, this doesn't work because the screen renders blank. My code:

const editor = grapesjs.init({
   canvas:{
       styles: [ 'https://...1.css', 'https://...2.css' ]
   }
})

I am using the gjs-preset-webpage plugin --> not sure if this affects anything.

I hope that you can help because I have been trying to solve this over the past few days.

Kind Regards Aiyush

EDIT:

I read somewhere that bad CSS can break the editor. I am not sure what constitutes as bad CSS, is there a tool that I could run my CSS through to eliminate these issues here is one of my css sheets; it is rather large so I have attached it as a paste in: https://pastebin.com/ctje8bzY (please excuse the line numbers) UPDATE: here is a file without the line numbers: http://s000.tinyupload.com/index.php?file_id=24295452959919636560

Kind Regards Aiyush