Fix Bug 1069432 - Padding between syntax box and following h3 too small

Integrated styles for syntax from customCSS into the main files.
- Moved styles into individual 'component' files after talking to @darkwing and @openjck.
- Extracted colours into variables (made rgba values into hex to avoid contrast problems on dark background colours)
- Switched to grid spacing variables where it looked applicable.
- Removed competing and redundant rules (do we really need to declare margin-top:0 specifically if there is no margin-top on the element?) 

You will need to run compress assets to properly test this!

Some test pages:
https://developer.mozilla.org/en-US/docs/Web/API/Blob.Blob
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Syntax
https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer
nit but on 5 and 6 we spell out `background1