@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather/Merriweather-Regular.ttf') format('truetype');
}
html,
body {
  height: 100%;
  /* Full height for the html and body to support the flexbox layout */
  margin: 0;
}
body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
}
h1 {
  font-family: Merriweather, 'Times New Roman', Times, serif;
}
a {
  color: #494949;
  text-decoration: none;
  transition: color 0.5s;
}
a:hover {
  color: #a1a1a1;
}
header {
  background-color: #fff;
  /* Set a background color to make sure it is visible */
  padding: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Center content vertically */
  z-index: 1;
  /* Ensure header is above other content */
}
header .logo {
  display: flex;
  align-items: flex-start;
  /* Align the image at the bottom of the container */
}
.header-page {
  display: flex;
  justify-content: space-between;
  /* Distribute space between columns */
  align-items: stretch;
  /* Stretch columns to fill the height of the header */
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #ffffff), url('../img/hunting-fishing.jpg') no-repeat bottom;
  background-position: 250px 100%;
  background-size: cover;
  margin-bottom: 20px;
}
.header-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Center content vertically in columns */
}
.logo {
  align-self: flex-start;
  /* Align logo to the top */
}
.title {
  align-self: center;
  /* Center title in the header */
  max-width: 600px;
}
.topic-image {
  align-self: flex-end;
  /* Align topic image to the bottom */
}
.header-column img {
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 992px) {
  .title {
    display: none;
  }
  .logo img {
    height: 100px;
  }
  .topic-image img {
    height: 100px;
  }
}
main {
  flex: 1;
  /* Allow main content to expand and push footer to the bottom */
  display: flex;
  justify-content: space-between;
}
main .sidebar {
  padding: 0 20px 20px 20px;
  flex-basis: 393px;
  background-color: #eeeeee;
  border-radius: 10px;
  /* padding: 20px; */
  margin: 0 20px;
}
main .sidebar nav {
  padding: 20px;
  margin: 0;
}
main .sidebar nav ul {
  list-style: none;
  padding: 0;
}
main .sidebar nav ul li {
  margin: 8px 0;
}
main .slider {
  height: 283px;
  overflow-y: hidden;
  background: url('../img/hunting-fishing.jpg') no-repeat bottom;
  background-position: 100% 100%;
  transition: background-position 1s;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
main .slider img {
  margin-right: 30px;
}
main .slider:hover {
  background-position: 100% 98%;
}
main .slider .title {
  align-self: center;
  font-size: 46px;
  color: #323232;
}
main .img-fluid {
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 992px) {
  main {
    flex-direction: column;
  }
  main .slider {
    padding: 0 20px;
  }
  main .content {
    margin: 0 20px;
  }
  main .sidebar {
    flex-basis: auto;
  }
}
@media screen and (max-width: 650px) {
  main {
    flex-direction: column;
  }
  main .slider {
    overflow: unset;
  }
  main .slider img {
    margin: 0;
  }
  main .slider .title {
    align-self: start;
    font-size: 15px;
    position: absolute;
  }
}
footer {
  background-color: #494949;
  color: #dfdfdf;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  /* Push footer to the bottom */
}
footer div {
  align-self: center;
}
footer div p {
  margin: 0 20px;
}
@media screen and (max-width: 992px) {
  footer {
    flex-direction: column;
  }
}
.next-content {
  margin-top: 20px;
  text-align: center;
}
.next-content a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}
.next-content a:hover {
  text-decoration: underline;
}
/* Responsive image styling */
.comic-image {
  width: 100%;
  /* Scales image to fit its parent element */
  height: auto;
  /* Maintains aspect ratio */
  display: block;
  /* Removes unwanted spacing below image */
  max-width: 600px;
  /* Ensures image doesn’t overflow its parent */
  border: 2px solid #333;
  /* Optional: adds a comic-book frame effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Optional: subtle shadow for depth */
}
/* Media queries for responsiveness */
@media (max-width: 768px) {
  .comic-image {
    border-width: 1px;
    /* Thinner border on tablets */
    max-width: 100%;
    /* Overrides desktop limit for smaller screens */
  }
}
@media (max-width: 480px) {
  .comic-image {
    border-width: 1px;
    /* Even thinner border on phones */
    max-width: 100%;
    /* Ensures full responsiveness on phones */
  }
}