/* Target the Ko-fi button class */
.donate-button {
    /* Adjust text color */
    color: 0xD0EAFF; /* Change to your desired color */
  /*0x019999*/
    /* Display and alignment */
    display: inline-flex;
    align-items: center; /* Vertically align content within button */
  
    font-weight: bold;
    font-size: 19px;
    /* Button dimensions and appearance (overrides Material for MkDocs styles) */
    padding: 8px 12px; /* Adjust padding for height control */
    line-height: 24px; /* Adjust line-height for height control (optional) */
    border-radius: 4px;
    background-color: hwb(198.62 2.75% 40.39%); /* Ko-fi brand color, optional */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  
    /* Override Material for MkDocs button styles (if needed) */
    /* Add properties like background-color, border, etc. */
  }
  
    /* Control button placement within header */
  .donate-button-container {
    position: absolute;
    top: -5px; /* Adjust vertical position */
    right: 10px; /* Adjust horizontal position */
  }


/* Custom CSS for the two-column layout */
  .two-column {
    display: flex; /* Keep using flexbox for side-by-side layout */
    align-items: start; /* Align items to the start of the container vertically */
    justify-content: space-between; /* Maintain space between the columns */
}

.two-column > div {
    flex: 1; /* Each child div takes equal space */
    padding: 10px; /* Keep the padding around content */
    display: flex; /* Also make these divs flex containers */
    flex-direction: column; /* Stack their children vertically */
}

.two-column img {
    width: 100%; /* Full width of its parent container */
    height: auto; /* Maintain aspect ratio */
}

.two-column div:nth-child(2) { /* Targeting specifically the text container */
    align-items: flex-start; /* Align text to the start horizontally */
    justify-content: flex-start; /* Align text to the start vertically */
    text-align: left; /* Ensure text itself is aligned left */
}




/* Gallery */
/*
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.gallery img {
  width: 100%;
  height: auto;
  border: 2px solid #ccc;
  transition: transform 0.2s ease;
}

.gallery img:hover {
  transform: scale(1.05);
  border-color: #333;
}
*/