/* 
Description: 
 all_styles.css is css file that import all css files so I only 
  need to link this file to get all the style-sheets.
*/


/* Notes on @layers:
 Source: https://css-tricks.com/css-cascade-layers/
 
@layers: Sets precedence of css classes in case of conflict.
 base: Min precedence (ie. easiest to override)
  - For stuff like reset rules or framework styles of plain HTML elements.
 defaults: Low precedence
  - The default layer for most custom styling.
 components: Medium precedence
  - For class-based styles you can override with utilities.
 utilities: High precedence
  - For styling that should normally take precedence over any other styles.
 overrides: Max precedence
  - Should always take precedence over any other layered styles.
  - Try to avoid using this layer if possible.
 
 Un-layered styles have the highest priority. 
  - Shouldn't need to use un-layered styles however might be required to override bulit-in wordpress styling.
*/


/* establish a layer order up-front, from lowest to highest priority */
@layer base, defaults, components, utilities, overrides;

/* import stylesheets into a layer (dot syntax represents nesting) */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css') layer(defaults.bootstrap5);

@import url('mystyle.css') layer(defaults.mystyle);

@import url('main.css') layer(components.main);

/* @import url("main.css"); */