Why is the CSS in my sub-theme not working? I'm a Drupal newbie, but hoping someone can assist. The site was working okay, but I've tried to implement a sub-theme and things seem to have gotten messed up.
What I was trying to achieve is to include my own CSS/JS files, and figured that a sub-theme seems like the proper way to do it. Well, I did install the sub-theme, but no CSS or JS from the sub-theme was loading (or referenced in the page anywhere). So, I played around some more and eventually stopped the entire site from loading.
So, now I'm getting &quot;The website encountered an unexpected error. Please try again later.&quot;, and the Apache error log says:
&quot;Uncaught PHP Exception Drupal\\Core\\Asset\\Exception\\IncompleteLibraryDefinitionException: &quot; 
 Incomplete library definition for definition 'global-styling' in extension 'my_theme'&quot; at ...&quot;

My theme is called &quot;my_theme&quot;, and is meant to be a sub-theme of awesome_zymphonies_theme. Went to loads of places trying to figure out the sub-theme stuff, given the abysmal Drupal documentation, but ended up with a directory called &quot;my_theme&quot;, under /drupal/themes/, and directories of /css/ and /js/, with CSS and JavaScript files in each, respectively, and two files: my_theme.info.yml and my_theme.libraries.yml. Permissions are all okay, and owned by apache:apache.
drwxr-xr-x. 2 apache apache   26 Mar 24 20:30 css
drwxr-xr-x. 2 apache apache   25 Mar 24 20:30 js
-rw-r--r--. 1 apache apache 1300 Mar 24 20:57 my_theme.info.yml
-rw-r--r--. 1 apache apache   86 Mar 24 20:30 my_theme.libraries.yml

The file my_theme.libraries.yml looks like this:
global-styling:
css:
  theme:
    css/my_theme.css: {}

js:
    js/my_theme.js: {}

The top portion of the my_theme.info.yml file looks like this:
name: My Theme
type: theme
description: Sub-theme of 'Awesome Zymphonies Theme.'
package: core
base theme: awesome_zymphonies_theme
core: 8.x
core_version_requirement: ^8 || ^9

#Libraries
libraries:
  - awesome_zymphonies_theme/bootstrap
  - awesome_zymphonies_theme/global-components
  - my_theme/global-styling

#Regions
regions:
  header: 'Header'
  primary_menu: 'Primary Menu'
  slideshow: 'Slideshow'
  homepagemessage: 'Home page message'
  topwidget_first: 'Top First Widget'
  topwidget_second: 'Top Second Widget'
  topwidget_third: 'Top Third Widget'
  ....
  ....

Additionally, not sure if I need to include the two lines:
  - awesome_zymphonies_theme/bootstrap
  - awesome_zymphonies_theme/global-components

... or do they get inherited from the parent theme?
So, I guess three questions there really. Any assistance would be most appreciated. Thanks!
The my_theme.libraries.yml isn't indented correctly.
global-styling:
  css:
    theme:
      css/my_theme.css: {}
  js:
    js/my_theme.js: {}