/*
  COMPONENT IMPORTS
  Using CSS @import to modularize stylesheets for better organization.
 
  The import order follows the visual structure of the page:
  1. Variables (global design tokens)
  2. Header (top of page)
  3. Body (main content)
  4. Footer (bottom of page)
  
  This structure ensures proper cascading of styles and easier maintenance.
*/

/* 
  VARIABLES IMPORT
*/
@import 'components/variables.css';

/*
  HEADER COMPONENT IMPORT
*/
@import 'components/header.css';

/*
  BODY COMPONENT IMPORT
*/
@import 'components/body.css';

/*
  FOOTER COMPONENT IMPORT
*/
@import 'components/footer.css';



body 
{
  overflow-x: hidden;
}

main 
{
  width: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

section[id] 
{
  scroll-margin-top: 80px;
}