/* static/css/style.css */

/* CSS Reset */
* {
  box-sizing: border-box; /* Ensures padding and border are included in element's total width and height */
  margin: 0; /* Resets margin for all elements */
  padding: 0; /* Resets padding for all elements */
}

/* CSS Variables for consistent theming */
:root {
  --primary-bg: #f9f9f9;
  --header-footer-bg: #333;
  --text-color: #fff;
  --pre-bg: #eee;
}

/* Body styling */
body {
  font-family: Arial, sans-serif;
  background-color: var(--primary-bg);
  line-height: 1.6;
}

/* Header styling */
header {
  background-color: var(--header-footer-bg);
  color: var(--text-color);
  padding: 1em 0;
  text-align: center;
}

header h1 {
  margin: 0; /* Ensures no margin for the header title */
}

/* Navigation styling */
nav ul {
  list-style: none; /* Removes default list styling */
  display: flex; /* Uses flexbox for horizontal layout */
  justify-content: center; /* Centers the navigation items */
}

nav ul li {
  margin: 0 1em; /* Adds space between navigation items */
}

nav ul li a {
  color: var(--text-color);
  text-decoration: none; /* Removes underline from links */
}

nav ul li a:hover {
  text-decoration: underline; /* Underlines links on hover */
}

/* Main content styling */
main {
  padding: 1em 2em; /* Adds padding around main content */
}

section {
  margin-bottom: 2em; /* Adds space between sections */
}

/* Preformatted text styling */
pre {
  background: var(--pre-bg);
  padding: 1em; /* Adds padding for better readability */
  overflow-x: auto; /* Allows horizontal scrolling for overflow content */
}

/* Footer styling */
footer {
  background-color: var(--header-footer-bg);
  color: var(--text-color);
  text-align: center;
  padding: 1em 0; /* Adds padding for footer */
  position: fixed; /* Keeps footer at the bottom */
  width: 100%; /* Ensures footer spans the full width */
  bottom: 0; /* Positions footer at the bottom */
}

/* Media Queries for responsive design */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column; /* Stacks navigation items vertically on smaller screens */
  }

  nav ul li {
    margin: 0.5em 0; /* Adjusts margin for vertical layout */
  }

  main {
    padding: 1em; /* Reduces padding for smaller screens */
  }
}