h1 {
  color:blue;
  font-size: 40px;
  text-align: center;
}

h2 {
 color: navy;
  font-family: Arial, san-serif;
  font-size: 32px;
  border-bottom: 3px solid navy;
  padding-bottom: 8px;
  text-align: center;
}

h3 {
 text-align: center; 
}

/* display menu in one row (flex) */
.menu {
 display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 30px;
  justify-content: center;
}

/* nav style */
nav {
  background-color: #333;
  padding: 15px;
  text-align: center;
  position: sticky;
  top: 0;
}

/* nav link style */
nav a {
 color: white;
  margin: 0 20px;
  font-size: 20px;
  font-family: Arial, san-serif;
}

nav a:hover {
  color: gold;
}

/* spacing between <li> items */
ul li {
 margin-bottom: 10px; 
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

header,
footer {
 text-align: center;
  padding: 2rem;
}

header {
 background-color: #e8f0fe; 
}

main {
 width: 90%; 
  max-width: 1200px;
  margin: auto;
}

.demo-section {
 margin: 40px 0; 
}

/* Example 1: CSS Grid. The three images change from three columns → two columns → one column as the screen becomes smaller. */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* image box */
.card {
 padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.card img {
  width: 100%;
  height: auto;
  border-radius:6px; 
}

/* Example 2: Flexible image, the images automatically shrink to fit the available screen width.*/
.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Example 3: Flexbox arrange themselves in a row and adapt when the screen becomes too narrow.*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.flex-container div {
 flex: 1 1 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid #999;
}

/* Media Queries — Different CSS rules are applied for tablet and mobile screen sizes. */
/* Tablet */
@media (max-width: 800px) {
 .grid-container {
   grid-template-columns: repeat(2, 1fr);  
 }
}

/* mobile */
@media (max-width: 600px) {
  h1 {
   font-size: 1.8rem; 
  }
  
  .grid-container {
 grid-template-columns: 1fr; 
  }
  
  .flex-container {
    flex-direction: column;
  }
  
  .menu {
    flex-direction: column;
  }
}