/* css styles */
/* Desktop styles (default) */
.profile-pic {
  width: 120px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 15%;
  float: right;
  margin-top: -150px;
  margin-right: 20px;
  border: 3px solid white;
}

/* Tablet styles (iPads) */
@media (max-width: 1024px) and (min-width: 769px) {
  .profile-pic {
    width: 110px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 15%;
    float: right;
    margin-top: -100px;  /* Less negative margin for tablets */
    margin-right: 20px;
    border: 3px solid white;
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  .profile-pic {
    width: 100px;
    height: 125px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    margin: 20px auto;
    float: none;
    margin-top: 0;
    border: 3px solid #f0f0f0;
  }
  /* Force left alignment on mobile */
  body,
  .content,
  .quarto-container,
  .quarto-content,
  .quarto-about-solana,
  .about-contents,
  .quarto-title,
  .quarto-title-block,
  .column-body,
  .column-page,
  main,
  article,
  p,
  ul,
  ol,
  h1, h2, h3, h4, h5, h6 {
    text-align: left !important;
  }
  
  /* Ensure list items stay left-aligned */
  .quarto-listing .list,
  .quarto-post,
  .listing-title,
  .listing-description,
  .metadata {
    text-align: left !important;
  }
  
  /* Keep navigation centered (you probably want this) */
  .navbar-brand,
  .navbar-nav {
    text-align: center !important;
  }
}