/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Set the body background color */


body {
  background-color: #f2f2f2;
}

/* Set the font color for all text */
body, p, h1, h2, h3, h4, h5, h6 {
  color: #333333;
}

/* Style the header */
header {
  background-image: url('header-banner.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  padding: 20px;
}

/* Style the side banner */
.side-banner {
  background-image: url('side-banner.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px;
  text-align: center;
}

/* Set the side banner position to fixed */
.side-banner {
  position: fixed;
  top: 0;
  right: -200px; /* Set the initial position of the banner */
  height: 100%;
  width: 200px;
  background-color: #f2f2f2;
  z-index: 1000; /* Make sure the banner appears above other content */
  transition: all 0.3s ease-in-out; /* Set the transition effect */
}

/* Style the side banner content */
.side-banner-content {
  padding: 20px;
}

/* Set a class to add to the body element when the side banner is open */
.side-banner-open {
  overflow-x: hidden;
  transform: translateX(-200px); /* Move the main content to the left when the banner is open */
}


/* Style the navigation menu */
nav {
  background-color: #556b2f;
  padding: 10px;
}

/* Style the links in the navigation menu */
nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 10px;
}

nav a:hover {
  background-color: #8fbc8f;
}

/* Style the main content area */
main {
  padding: 20px;
}

/* Style the blog post titles */
.blog-post-title {
  font-size: 24px;
  font-weight: bold;
  color: #556b2f;
  margin-bottom: 10px;
}

/* Style the blog post meta information */
.blog-post-meta {
  font-size: 14px;
  color: #999999;
  margin-bottom: 10px;
}

/* Style the blog post content */
.blog-post-content {
  font-size: 16px;
  line-height: 1.5;
}

/* Style the footer */
footer {
  background-color: #556b2f;
  color: #ffffff;
  padding: 20px;
}

/* Style the wood accent */
.wood-accent {
  background-color: #a0522d;
  color: #ffffff;
  padding: 10px;
  font-size: 18px;
  text-align: center;
}