body {
  font-family: Georgia, serif;   /* Sets the main text font to Georgia. */
  padding: 10px;   /* Adds space inside the body element — between the content and the body’s inner edge. */
  background-color: #f8f4ef;  /* Changes the background color of the page. */
  color: #333;    /* Sets the text color to a dark gray. */
  margin: 0;        /* Removes the default outer space around the body. */
  line-height: 1.6;/* Controls how much vertical space is between lines of text. */
}

main {
  width: 80%;  /* The main part should take up 80% of the page’s width, but not the whole thing. */
  margin: 20px auto;   /* add a little space above and below the main part then center it in the middle of the page. */
}

/* === Navigation Bar === */
#main-nav {
  position: sticky; /* Makes the navigation bar stick to a specific position when you scroll. It acts like relative at first, but once you scroll past it, it becomes fixed in place. */
  top: 0;  /* Tells the browser where the sticky element should stick. */
  background-color: #4b7063;   /* ets the background color of the navigation bar. */
  text-align: center;   /* Aligns text to the center of the box */
  padding: 10px;   /* Adds space inside the element and between the content and the edges of the nav box. */
}

#main-nav a {
  color: #fff;  /* Sets the text color of the links. */
  position: sticky;  /* It behaves like relative at first, but once you scroll past a certain point, it becomes “fixed” in place */
  top: 0;   /* It tells the element to stick to the top of the page when scrolling. */
  margin: 0 15px;   /* Adds space outside the element. Means:0 = no top/bottom margin and 15px = 15 pixels of space on the left and right sides of each link */
  font-weight: bold;   /* Makes the link text bold. */
  font-size: small;   /* Sets the text to a smaller size than the default. */
}

#main-nav a:hover {
  text-decoration: underline;  /* This adds a line below the text when you hover over a link. */
  text-decoration:overline  /* This adds a line above the text when you hover. */
}


ul {
  font-size:xx-large;   /* Sets the text to a bigger size than the default. */
}


/* === Images === */
.images img {
  width: 50%;   /* This sets the image’s width to 50% of its parent container’s width. */
  margin: 10px;  /* This adds space around the image and it keeps the image from touching nearby elements or the container edges. */
  border-radius: 10px;   /* This rounds the corners of the image by 10 pixels. */
}

/* === Table === */
table, th, td {
  border: 1px solid #ccc;   /* Creates a border around the element. 1px → the border is 1 pixel thick. solid → the border line is solid. #ccc → the border color */
  border-collapse: collapse;   /* This only affects the table itself. It merges adjacent borders into a single line instead of showing double borders. */
  padding: 10px;  /* Sets the text to a bigger size than the default. */
}

th {
  background-color: #dbe3df;  /* Make every table header cell have a light greenish-gray background. */
}

/* === Form === */
form {
  background-color: #fff;  /* Sets the background color of the form. */
  padding: 20px;  /* Adds space inside the form, between the content and the edges of the form’s border. */
  border-radius: 10px;  /* Rounds the corners of the form’s box. */
}

label, input, select {
  display: block;   /* Takes up the full width of its container. Starts on a new line. */
  margin: 8px 0;   /* This sets the vertical spacing between elements. */
}

button {
  background-color: #4b7063;   /* Sets the background color of the button. */
  color: #fff;   /* Sets the text color inside the button. */
  border: none;  /* Removes the default border that usually apply to buttons. */
  padding: 10px 15px;   /* Adds space inside the button around the text. */
  border-radius: 5px;   /* Rounds the corners of the button slightly. */
  cursor: pointer;   /* Changes the mouse cursor to a hand icon when you hover over the button. */
}

button:hover {
  background-color: #355247;   /* Sets the color of the underline when hovering. */
}

/* === Callout Box === */
.callout {
  background-color: #e5f0ea;   /* Sets the background color of the callout box to a light greenish shade. */
  border-left: 4px solid #4b7063;   /* Adds a left border */
  padding: 15px;   /* Adds space inside the box between the text and the edges. Prevents the text from touching the border. */
  margin: 20px 0;   /* Adds space outside the box */
  font-style: italic;   /* Makes the text italic. */
}

/* === Footer === */
footer {
  text-align: center;   /* Centers all the text inside the footer horizontally. */
  padding: 10px;   /* Adds space inside the footer between its content and the footer’s border */
  background-color: #4b7063;   /* Sets the background color of the footer. */
  color: #fff;   /* Sets the text color of everything inside the footer. */
}