/* General Body Styles */

/* Heading Styles */
h1, h2, h3 {
    font-family: abel;
    font-weight: normal;
    letter-spacing: 8px; /* Add space between letters */
    line-height: 2; /* Increase the line height */
}



/* SUGGESTION: Consider reducing letter-spacing on smaller screens */
 @media (max-width: 768px) {
    h1, h2, h3 {
        letter-spacing: 4px;
    }
} 


/* Header and Navigation Styles */

.header-container {
    z-index: 15; /* Ensure header appears above background */
    position: relative; /* Keeps the header positioned above the background */
    display: flex;
    align-items: center; /* Aligns items on the x-axis */
    justify-content: space-between; /* Space between title and navigation */
    padding: 20px 30px; /* Increased padding for spacing */
    background-color: transparent;
    width: 100%; /* Make the header span the full width */
    box-sizing: border-box; /* Include padding in the width */
    border-bottom: 2px solid rgba(255, 255, 255, 0.2); /* Added bottom border */
}


/* SUGGESTION: Improve header responsiveness */
 @media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }
}


.site-title {
    margin: 0; /* Removes any default margin */
    font-size: 30px; /* Adjust font size of the title */
    /*mix-blend-mode: Difference; Adjust blend mode as needed */
    color: white; /* Title text color */
    text-decoration: none; /* Remove underline from anchor */
    
}

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

nav ul li {
  margin: 0;
}


nav ul li a {
    display: block;
    color: white;
    text-align: center; /* Align text in the center */
    padding: 2px 3px; /* Padding around each link */
    margin: 6px;
    text-decoration: none;
}

/* ADDED: Responsive header styles */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
        margin: 5px 0;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    nav ul li {
        margin: 5px 0;
        width: 100%;
        text-align: center;
    }

    .site-title {
        margin-bottom: 10px;
    }
}



li a:hover {
   background-color: transparent; /* No background color on hover */
    text-decoration: underline; /* Underline on hover */
}

.active {
    background-color: transparent; /* Active link background color */
}

/* Normal link */
a {
    color: white;
    text-decoration: none; /* Remove underline */
}

/* Visited link */
a:visited {
    color: #eae0c8; /* Use a hex code for a pearl-like color */
    text-decoration: none; /* Remove underline */
}

/* Dropdown styling */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0, 51, 0); /* Dropdown background color */
    min-width: 160px; /* Dropdown minimum width */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
   -webkit-transition: opacity 0.3s ease-in-out; /* Safari and Chrome */
   -moz-transition: opacity 0.3s ease-in-out; /* Firefox */
   -ms-transition: opacity 0.3s ease-in-out; /* Internet Explorer */
   -o-transition: opacity 0.3s ease-in-out; /* Opera */
}

/* Triangle Arrow */
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -20px; /* Adjust as needed to position arrow */
    left: calc(50% - 40px); /* Center arrow horizontally */    border-width: 10px;
    border-width: 12px; /* Decrease the size of the arrow */
    border-style: solid;
    border-color: transparent transparent rgba(0, 51, 0, 0.9) transparent; /* Transparent top border, green bottom border */
    z-index: 1;
}


/* Adjust the arrow specifically for the subscribe dropdown */
.subscribe-dropdown::before {
    content: '';
    position: absolute;
    top: -10px; /* Adjust as needed */
    left: calc(28% - 70px); /* Center horizontally */
    border-width: 10px;
    border-style: solid;
    border-color: rgba(0, 51, 0, 0) rgba(0, 51, 0, 0) rgba(0, 51, 0, 1) rgba(0, 51, 0, 0);
}


.dropdown-content li {
    display: block;
    
}

.dropdown-content li a {
    color: white; /* Adjust text color */
    padding: 5px 6px;
    text-align: left;

}

.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1; /* Ensure full opacity when open */
}



body {
    background-color: #000000; /* Default background color for all pages */
    max-width: 45em;
    margin: 0 auto;
    padding: 5px;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: white;
    overflow: auto; /* Allow scrolling */
    overflow-x: hidden; /* Disable horizontal scroll */
}


/* SUGGESTION: Improve readability on larger screens */
 @media (min-width: 1200px) {
    body {
        max-width: 60em;
    }
} 









body.index-page {
    background-color: black;
}

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    background-size: cover; /* Ensure it scales properly */
    background-position: center; /* Center the image */
    opacity: 0.8; /* Optional: Adjust the opacity for visibility */
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 800px 800px; /* Cover the entire background area */
    background-repeat: repeat-x; /* Repeat the background on the x-axis */
    background-position: left top; /* Position the image to the top left */
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Smooth fade effect */
}


@media (max-width: 768px) {
    .background {
        background-size: contain;
        background-position: center top;
    }
}


.background-1 {
    background-image: url("2024.07.12.tb.text.poetry.cages.png");
}

.background-2 {
    background-image: url("2024.07.12.tb.visual.artcover.cages.jpg");
}

.background-3 {
    background-image: url("2023.08.05.tb.text.poetry.abodyneedsasoul.png");
}

.background-4 {
    background-image: url("2023.08.05.tb.visual.artcovers.abodyneedsasoul.png");
}

.background-5 {
    background-image: url("2024.06.13.tb.text.poetry.apple.png");
}

.background-6 {
    background-image: url("2024.06.13.tb.visual.artcovers.apple.jpg");
}

.background.show {
    opacity: 1;
}


img, iframe {
    display: block;
    margin: 20px auto; /* Center images and videos and add vertical spacing */
}


/* SUGGESTION: Add responsive image sizing */
 @media (max-width: 768px) {
    img, iframe {
        max-width: 100%;
        height: auto;
    }
} 

h2 {
   text-align: center; /* Center the heading text */    
    margin: 20px 0; /* Add space above and below headings */
    font-size: 24px; /* Adjust heading size */
    font-weight: bold; /* Make headings stand out */
}

p {
    margin: 15px 0; /* Add space around paragraphs */
    font-size: 16px; /* Adjust paragraph size */
    color: white; /* Lighter color for better contrast */
   
}

/* SUGGESTION: Consider removing text-align: justify for better readability on small screens */
 @media (max-width: 768px) {
    p {
        text-align: left;
    }
} 


section {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 20px; /* Add padding around content */
    border-radius: 5px; /* Rounded corners */
    margin: 20px 0; /* Space between sections */
}








/* Main Timeline Styles */
.timeline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Allows items to wrap onto multiple lines */
    gap: 20px; /* Space between items */
    padding: 10px;
    justify-content: space-between; /* Distributes items evenly */
}

.song-item {
    position: relative;
    width: calc(33.33% - 20px); /* Three items per row with space between */
    max-width: 800px; /* Optional, to ensure items do not exceed this width */
}

/* Adjustments for smaller screens */
@media (max-width: 1200px) {
    .song-item {
        width: calc(50% - 20px)!important; /* Increased specificity and use of !important */
    }
}

@media (max-width: 768px) {
    .song-item {
        width: calc(100% - 20px)!important; /* Increased specificity and use of !important */
    }

    .song-info {
        padding: 5px; /* Reduce padding on smaller screens */
    }

    .song-info .song-title {
        font-size: 16px; /* Smaller font size for titles */
    }

    .song-info a {
        font-size: 12px; /* Smaller font size for links */
    }

    .play-button {
        width: 100px; /* Smaller button width */
        height: 40px; /* Adjust height for button */
        font-size: 14px; /* Smaller font size */
        line-height: 40px; /* Adjust vertical alignment */
    }
}

.song-cover {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 10px; /* Optional: Rounded corners for cover art */
}

.song-info {
    position: absolute; /* Positioned at the bottom of the container */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Takes up the bottom third of the container */
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px; /* Adjust padding for better spacing */
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3); /* Shadow above the info box */
    box-sizing: border-box; /* Ensures padding does not affect width */
    transform: translateY(100%); /* Initially hides the box below the cover */
    overflow: hidden; /* Ensures content does not overflow */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
}

.song-info.active {
    opacity: 1;
    transform: translateY(0); /* Moves the box into view when active */
}

.song-item:hover .song-info {
    opacity: 1;
    transform: translateY(0); /* Moves the box into view when hovered */
}

.song-info .song-title {
    margin: 0;
    font-size: 24px; /* Adjust font size as needed */
    font-weight: bold; /* Make the title stand out */
}

.song-info a {
    display: block;
    margin: 5px 0;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px; /* Adjust font size for links */
}

.song-info a:hover {
    text-decoration: underline;
}

.play-button {
    background: #99ff99;
    width: 120px; /* Set a fixed width */
    height: 50px; /* Set a fixed height */
    border-radius: 10px; /* Border radius */
    color: white;
    font-weight: bold;
    text-decoration: none;
    line-height: 50px; /* Center text vertically */
    text-align: center; /* Center text horizontally */
    font-size: 16px; /* Font size */
    display: inline-block; /* Ensure it respects width and height */
    margin-top: 10px; /* Space above the button */
}

.play-button:hover {
    background: #ff0080;
}







/* Container for responsive video */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 65%;
    background: #000;
    margin: 0 auto;
    margin-bottom: 300px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




@media (max-width: 768px) {
    body {
        font-size: 14px; /* Adjust font size for smaller screens */
    }

    h2 {
        font-size: 20px; /* Heading size for smaller screens */
    }

    p {
        font-size: 14px; /* Paragraph size for smaller screens */
    }
}






/* Text index styles */


.text-index {
  display: flex;
  flex-wrap: wrap; /* Do not wrap items to the next line */
  gap: 20px; /* Space between items */
 
}

.container {
  display: flex;
  flex-wrap: wrap; /* Do not wrap items to the next line */
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;

}

.poem {
  flex: 0 0 1000px; /* Fixed width and height for uniform size */
  width: 1000px; /* Fixed width for poem items */
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid #444; /* Darker border for better contrast */
  padding: 20px; /* Increased inner spacing */
  background-color: #2c2c2c; /* Dark background for poem items */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
  display: flex; /* Enable flex layout */
  align-items: center; /* Center items vertically */
  justify-content: space-between; /* Distribute space between items */
 
}

.poem h2 {
  font-size: 24px;
  margin-bottom: 10px;
  text-align: left;
}

.poem a {
  color: #fff; /* White color for links */
  text-decoration: none; /* Remove underline from links */
}

.poem a:hover {
  text-decoration: underline; /* Underline links on hover */
}

.poem img {
  flex: 0 0 auto; /* Prevent image from expanding */
  width: 100px; /* Adjust image width */
  height: 100px; /* Fixed height for square images */
  margin: 10px auto; /* Margin between image and text */
  display: block; /* Center the image horizontally */

}

.poem p {
  margin-bottom: 10px;
 color: #bbb; /* Light gray color for text */
}

.poem .date {
  font-size: 14px;
  color: #aaa; /* Lighter gray for dates */
}

.poem .author {
  font-style: italic;
color: #ccc; /* Light gray color for author names */
}

/* Responsive layout adjustments */
@media (max-width: 768px) {
  .text-index {
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
  }

  .poem {
    width: calc(50% - 20px); /* Adjust width for smaller screens */
  }


.search-result {
      padding: 10px;
      border-bottom: 1px solid #ccc;
    }

    #searchResults {
      margin-top: 10px;
    }