.art {
  display: block; /* Ensure the image itself is a block element */
  max-width: 100%;
  height: auto;
}

.nav-link:hover {
    border-image: conic-gradient(from var(--angle), #85d9e2, #85d9e2, #000000, #000000, #85d9e2) 1;
    animation: rotate-border 5s linear infinite;
    border-image-slice: 1;
    /* Keep other hover styles */
    color: #00ffff;
    transform: translateX(5px);
}

.spacer p {
    /* Optional: Add any specific styles for the paragraph text */
    margin: 0; /* Remove default paragraph margin */
}

/* Keep your existing @property and @keyframes */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate-border {
  to {
    --angle: 360deg;
  }
}

.decorative-pattern {
    /* Basic styling for the container of the pattern */
    width: 100%; /* Ensure it takes the full width of its parent (#left) */
    box-sizing: border-box; /* Include padding in the width */
    text-align: center; /* Center the lines horizontally by default */
    margin-bottom: 20px; /* Add some space below the pattern */
    overflow-wrap: break-word; /* Prevent long lines from overflowing */
    word-wrap: break-word; /* Legacy property for word wrapping */
}

.decorative-pattern .line {
    margin: 5px 0; /* Add some vertical space between lines */
    padding: 0;
    white-space: pre-wrap; /* Respect line breaks and spaces in the HTML source */
    word-wrap: break-word; /* Break words if they are too long */
    overflow-wrap: break-word;
    text-align: center; /* Center each line */
}

.decorative-pattern .center-text {
    text-align: center; /* Explicitly center this specific line */
}

.decorative-pattern .blackheart-icon {
    /* Style for the black heart images */
    display: inline-block; /* Allows the image to sit within the text line */
    vertical-align: middle; /* Vertically align the image with the surrounding text */
    height: 1em; /* Set height relative to the current font size */
    width: auto; /* Maintain aspect ratio */
    /* Optional: Adjust margin if needed to space it from surrounding characters */
    margin: 0 2px;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.image-container {
  /* Your existing styles for border, animation, etc. */
  position: relative;
  display: inline-block; /* Or block */
  padding: 2px;
  border-radius: 0px;
  overflow: hidden;
  width: 50px;
  border: 2px solid transparent;
  border-image: conic-gradient(from var(--angle), #ffffff, #adadad, #585858, #2c2c2c, #000000) 1;
  border-image-slice: 1;
  animation: rotate-border 5s linear infinite;

  /* Add margin to the right to push the text away */
  margin-right: 15px; /* Adjust the value as needed for desired spacing */
}

.spacer {
  display: flex;
  align-items: center; /* Vertically centers the image container and the paragraph */
  /* justify-content: space-around; /* You might not want space-around here if you want left alignment */
  /* Consider using flex-start or removing justify-content for left alignment */
  justify-content: flex-start; /* Aligns items to the start of the flex container */

  border: 1px solid #85d9e2;
  padding: 10px;
  margin-bottom: 5px; /* Optional: Add some vertical space between list items */
  width: 100%; /* Make the link take up the full width of its list item */
  box-sizing: border-box; /* Include padding and border in the element's total width */
}