/* Credits */

.credit-container {
    display: inline-flex; /* Now behaves like an inline element with flex properties */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    padding: 0px 5px;
    margin-top: 20px;
    border-radius: 10px;
    gap: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: #16171a;
}

.credit-container img {
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
}

.credit-container div {
    display: flex;
    gap: 5px;
    flex-direction: row;
}

.content-wrapper {
    text-align: center; /* Centers inline and inline-flex elements inside it */
}
/* Style for the new container */
.art-and-note-container {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #16171ad0;
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-around; /* Distribute space around the elements */
}

.art_container {
    flex: 1 0 25%;  /* Allow flex to grow, but no shrink, start at 25% width */
    margin-bottom: 20px; /* Add margin */
}

.chapter_art {
    cursor: pointer;
    border-radius: 5px;
    display: block; /* Makes sure the image is block level for margin auto to work */
    width: 80%; /* Sets the image width to 50% of its containing element */
    margin: 0 auto; /* Centers the image horizontally */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
    transition: transform 0.3s ease; /* Smooth transition for scaling effect */
  }
  
  .chapter_art:hover {
    transform: scale(1.05); /* Scales the image up slightly when hovered */
  }

  .author_note {
    flex: 1 0 65%;  /* Allow flex to grow, but no shrink, start at 65% width */
    background-color: #16171ad0;
    color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Add margin */
    font-style: italic;
}

.actual_credit {
    justify-content: center;
    align-content: center;
    text-decoration: none;
    color: #FF4D4D;
}

.actual_credit:visited {
    text-decoration: none;
    color: #FF4D4D;
}

.actual_credit:hover {
    text-decoration: underline;
}

a:visited {  /* Add this */
    color: #FF4D4D;    /* Keep the same color */
    text-decoration: none;
}

#artwork-by {
    color: white;
}