/* Profile avatar in navbar */
.logo {
  margin-left: 0 !important;
  margin-top: 0 !important;
}

.navbar {
  padding: .5rem 0 .5rem 0 !important;
}

.logo .profile-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  opacity: 1;
}

.logo .profile-avatar:hover {
  opacity: 1;
  border-color: #707070;
  transform: scale(1.05);
}

/* Center and style the profile image on the about page */
.page-content img {
  display: block;
  margin: 2rem auto;
  max-width: 300px;
  width: 100%;
  height: auto;
}

.page-content .header {
  margin-top: 5em; 
}

/* Custom CSS to match content width with navbar width (890px) */


/* Override the wrapper class to use the same width as the navbar */
.wrapper {
  max-width: calc(890px - (30px * 2)) !important;
  max-width: -webkit-calc(890px - (30px * 2)) !important;
}

/* Ensure the post wrapper also uses the same width */
.wrapper.post {
  max-width: calc(890px - (30px * 2)) !important;
  max-width: -webkit-calc(890px - (30px * 2)) !important;
}

/* Ensure the list page wrapper also uses the same width */
.wrapper.list-page {
  max-width: calc(890px - (30px * 2)) !important;
  max-width: -webkit-calc(890px - (30px * 2)) !important;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 768px) {

  .logo {
    padding-top: .1rem;
  }

  .logo .profile-avatar {
    width: 30px;
    height: 30px;
  }

  nav.menu {
    height: 37px !important;
    padding: 0 0 !important;
    margin: 0 0 !important;
  }
  nav.menu .menu-icon {
    margin: 0.35rem .35rem 0 0;
  }

  .navbar {
    padding: 0 0 0 0 !important;
  }

  .wrapper {
    max-width: calc(890px - 30px) !important;
    max-width: -webkit-calc(890px - 30px) !important;
  }
  
  .wrapper.post {
    max-width: calc(890px - 30px) !important;
    max-width: -webkit-calc(890px - 30px) !important;
  }
  
  .wrapper.list-page {
    max-width: calc(890px - 30px) !important;
    max-width: -webkit-calc(890px - 30px) !important;
  }
}

/* Reduce margin above and below main content */
.page-content {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.wrapper,
.wrapper.post,
.wrapper.list-page {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}