/* styles.css */

/* 1. General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2. HTML and Body */
html, body {
  height: 100%;
  font-family: Arial, sans-serif; /* Default font */
  line-height: 1.6; /* Improve text readability */
  color: #333; /* Default text color */
  background-color: #f8f9fa; /* Subtle light background */
  scroll-behavior: smooth; /* Enable smooth scrolling */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* 3. Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600; /* Slightly bolded text */
  color: #212529; /* Darker text for headings */
  line-height: 1.2; /* Compact heading spacing */
}

/* 4. Paragraphs */
p {
  margin-bottom: 1rem; /* Add space between paragraphs */
}

/* 5. Links */
a {
  text-decoration: none; /* Remove underline */
  color: #007bff; /* Default blue color */
  transition: color 0.2s ease-in-out; /* Smooth transition for hover */
}

a:hover {
  color: #0056b3; /* Darker blue on hover */
}

/* 6. Lists */
ul, ol {
  padding-left: 1.5rem; /* Add indentation */
  margin-bottom: 1rem; /* Space after list */
}

li {
  line-height: 1.6; /* Improve readability */
}

/* 7. Images */
img {
  max-width: 100%; /* Responsive images */
  height: auto;
  display: block;
}

/* 8. Forms */
input, textarea, button, select {
  font: inherit; /* Inherit font from parent */
  margin: 0;
}

button {
  cursor: pointer; /* Pointer cursor on buttons */
  border: none; /* Remove default border */
  background-color: #007bff; /* Default button color */
  color: #fff; /* White text */
  padding: 0.5rem 1rem; /* Button padding */
  border-radius: 4px; /* Rounded corners */
  transition: background-color 0.2s ease-in-out;
}

button:hover {
  background-color: #0056b3; /* Darker color on hover */
}

/* 9. Tables */
table {
  width: 100%;
  border-collapse: collapse; /* Remove spacing between cells */
  margin-bottom: 1rem;
}

th, td {
  border: 1px solid #ddd; /* Light border for clarity */
  padding: 0.5rem;
  text-align: left; /* Align text to the left */
}

/* 10. Utilities */
.hidden {
  display: none !important; /* Utility class for hidden elements */
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  html {
    font-size: 90%; /* Adjust font size on smaller screens */
  }
}