.main_container {
     display: flex;
     max-width: 1253.11px;
     width: 96.76%;
     height: auto;
     flex-direction: column;
     align-items: center;
     justify-content: left;
     border-radius: var(--border-radius-xs);
     margin-top: var(--padding-base);
     box-shadow: var(--box-shadow);
   margin-bottom: var(--padding-base);

   }

   main {
     display: flex;
     max-width: 1253.11px;
     width: 100%;
     height: fit-content;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     margin: 0;
     /* Important to remove default browser margins */
     background-color: transparent;
     justify-content: center;
     align-items: center;
     padding-bottom: 0;

     background-color: var(--bg-main-light);
     
     border-radius: var(--border-radius-xs);
  

   }
   .main_home{
background-color:var(--bg-component-secondary-light);
}

/* 
     .homepage .portfolio_section,
     .homepage .contactMe_section,
     .homepage .container_AboutMe {
     padding-top: 10.62%;
     background-color: red;
     }
*/

   @media only screen and (max-width: 768px) {
     .main_container {
       background-color: transparent;
       box-shadow: none;
            width: 100%;
          margin-top: 172.8px; 
           padding-inline: var(--padding-xl);
           align-items: center;
           justify-content: center;
                           margin-top: 102.54px;
                           margin-top: 86.67px;
     }

     main {

       padding-bottom: 98px;  
          gap: var(--spacing-sm);
       box-shadow: none;
       background-color: transparent;

     }

        .main_home{
background-color: var(--bg-main-dark);
border-radius: 0;



}

     .homepage .portfolio_section,
     .homepage .contactMe_section,
     .homepage .aboutMe_section {
       display: none;
     }

     

     .portfolio .contactMe_section {
       display: none;
     }

   }