/* General Styles */
body {
  margin: 0;
  padding: 20;
  font-family: 'Arial', sans-serif; /* Consistent, modern sans-serif font */
  background-color: #f4f4f4aa; /* Light grey background for the entire page */
  color: #140101; /* Standard dark grey for text */
  line-height: 1.6;}
  body {
    padding-top:200px;
    font: size 12px;/* Appropriate size for visibility */
    color:#0b0202;
    nav
  }
  
/* Header Styles */

header {
  
  background-color:#fff;/* White background */
  padding; 20px;40px;  /* Padding for aesthetic spacing */
  text-align: center; /* Ensures text is centered */
  box-shadow; 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
  position; fixed; /* Fixed at the top of the viewport */
  width: 100%; /* Full width */
  top: 0; /* Top aligned */
  z-index: 1000; /* Keeps it above other content */
}

header h1 {
  margin: 0; /* Removes default margin */
  padding: 0; /* Removes default padding */
  font-size: 24px; /* Appropriate size for visibility */
  color: blue; /* Explicitly sets the color to blue */
  font-family: 'Helvetica', sans-serif; /* Helvetica as primary, Arial as fallback */
}
header {
  background-color: #fff; /* White background */
  flex:blue
  padding: 40px 40px; /* Top and bottom padding, Left and right padding */
  text-align: center;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
  position: fixed;
  top: 0;
  z-index: 1000;
}
header{
  color:{[blue];};
  
}
/* Navigation Links */
nav {
  margin-top: 10px; /* Spacing above navigation links */
}

nav a {
  font-family: 'Helvetica', 'Arial', sans-serif; /* Ensures consistency in font usage */
  text-decoration: none; /* No underlining */
  color: #333; /* Standard text color for readability */
  padding: 8px 12px; /* Clickable area padding */
  transition: color 0.3s ease; /* Smooth transition for hover effects */
}

nav a:hover {
  color: blue; /* Blue on hover for visual feedback */
}


/* Navigation Link Styles */
nav a {
  text-decoration: none; /* No underline on links */
  color: #333; /* Dark gray for readability */
  padding: 10px 15px; /* Padding for easier clickability */
  transition: color 0.3s ease; /* Smooth transition for hover effects */
}

nav a:hover, nav a:focus {
  color: blue; /* Changes link color to blue on hover/focus */
}


/* Main Content Styles */
.main-content {
  max-width: 800px; /* Standard width for readability */
  margin: 100px auto 20px; /* Adjusted margin to accommodate fixed header */
  padding: 20px;
  background-color: #fff; /* White background for content area */
  border-radius: 5px; /* Soft rounded corners for a modern look */
}

/* Footer Styles */
footer {
  text-align: center;
  padding: 10px 0;
  background-color: #fff; /* Keeping footer simple and clean */
  color: #666;
  border-top: 1px solid #e5e5e5; /* Subtle border for visual separation */
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Responsive Design Adjustments */
@media (max-width: 768px) {
  .main-content {
      margin-top: 140px; /* Increased top margin for mobile to account for header */
  }
  header h1 {
      font-size: 12px; /* Slightly smaller font on mobile for better fit */
  }
}
/* Smaller fonts for mobile devices */
@media (max-width: 600px) {
  html {
      font-size: 14px; /* Decrease base size for small devices */
  }

  h1 {
      font-size: 1.5rem; /* Adjust heading size accordingly */
  }

  p {
      font-size: 0.875rem; /* Smaller paragraph text */
  }
}

/* Larger fonts for desktops */
@media (min-width: 1024px) {
  html {
      font-size: 18px; /* Increase base size for large devices */
  }

  h1 {
      font-size: 2.25rem; /* Slightly larger headings */
  }
}
/* Base Styles for Layout */
header {
  background-color: #fff; /* Consistent background */
  padding: 15px 20px; /* Adequate but not excessive padding */
  text-align: center;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  z-index: 1000;
}

.main-content {
  margin-top: 70px; /* Adjusted for header height on mobile */
  padding: 15px; /* Sufficient for mobile readability */
  background-color: #fff;


/* Responsive Adjustments */

  
  

  /* Adjustments for very small or half-page views */
  @media (max-width: 480px), (max-height: 480px) 
      header {
          padding: 8px 10px; /* Even smaller padding for extremely small or split views */
      }

      .main-content {
          margin-top: 50px; /* Adjust margin to ensure no overlap */
          padding: 8px; /* Optimal padding for very small screens */
      }

      nav a {
          font-size: 14px; /* Smaller font size for navigation items */
      }

      header h1 {
          font-size: 36px; /* Smaller main title for header */
      
  }