:root {
  --primary-color:#000080;
  --main-bg-color: #000080;
  --main-bg-color1: #fff;
  --main-text-color: #fff;
  --second-text-color: #037fe9;
   --third-text-color: #000;
  --nav-menu-maincolor: rgb(0, 47, 255);
   /*--font-family-main: Helvetica, sans-serif;*/
   --font-family-main: Helvetica, verdana;

}

html {
    height: 100%;
    color: var(--main-text-color);
    font-size: 100%;
    font-family: var( --font-family-main);
    scroll-behavior: smooth;  /*lets us scroll smoothly hen going to a bookmark*/
}

body {
	    font-size: 1rem;
      line-height: 1.3; 
        /*border: 1px solid black;*/
      }
h1 {
  font-size: 1.2rem;
}
h2 {
  font-size: 1.1rem;
}
h3 {
  font-size: 1rem;
}




/* 1. Mobile First: Items stack vertically in a single column */
.grid-container {
  display: grid;
  min-height: 100vh;
  margin: 0 auto;
  grid-template-columns: 1fr; /* Single column takes full width */
  grid-template-rows: 40px auto auto auto auto; /* Rows automatically resize to fit content */
  grid-template-areas:
    "navbar"
    "carousel"
    "main"
    "aside"
    "section"
    "footer";
  gap: 1px;
  margin: 1px;
  /*color: var(--main-text-color);*/
}

/* 2. Desktop Layout: Rearranges into columns when screen is wide enough */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 250px repeat(3, 1fr); /* Four columns */
    grid-template-rows: 40px auto auto auto auto; /* Rows automatically resize to fit content */
    grid-template-areas:
      "navbar navbar navbar navbar"
      "carousel carousel carousel carousel"
      "aside main main main"
      "section section section section"
      "footer footer footer footer";
      
  }
}


@media (max-width: 767px) and (orientation: landscape) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns instead of 1 */

    gap: 0.5rem; /* Reduce gap to save vertical space */
    grid-template-rows: 40px auto auto auto auto; /* Rows automatically resize to fit content */
  }
}


/* 3. Assign items to their template areas */
.navbar  { grid-area: navbar; 
            background-color: #fff;
            line-height: 40px; /* Aligns text within the 20px height */
            overflow: visible; /* Prevents content from breaking the 40px limit */
            font-size: 1.45rem;
            z-index: 200;
         } 
.carousel  { grid-area: carousel; 
            background-color: #fff;
            font-size: 1.45rem;
            z-index: 1;
            }
.aside   { grid-area: aside; 
            background-color: #fff;
            font-size: 1.45rem;
            margin-left: 20px;
        }
.main    { grid-area: main; 
            background-color: #fff;
            font-size: 1.45rem;
            margin-left: 30px;
        }
.section { grid-area: section; 
            background-color: #fff;
            font-size: 1.45rem;
        }
.footer  { grid-area: footer; 
            background-color: #fff;
            font-size: 1.45rem;
        }
        
        
        
        
@media (max-width: 767px) and (orientation: landscape) 
{
  .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Switch to 2 columns instead of 1 */
    
        gap: 0.5rem; /* Reduce gap to save vertical space */
        grid-template-rows: 40px auto auto auto auto; /* Rows automatically resize to fit content */
    
   
  }
}


}