/* Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif; /* Use Montserrat Light 300 for everything */
    font-weight: 300;
    background-color: #000;
    color: #fff;
    text-align: center;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px; /* Internal padding */
    background-color: #000;
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 80px; /* Fixed height for the top bar */
    margin-bottom: 2px; /* Adjust this to reduce the space below the top bar */
}

/* Left Logo (non-square image) */
.logo-left {
    height: 60px; /* Set the height to fit the banner */
    width: auto; /* Keep the width proportional */
    object-fit: contain; /* Maintain aspect ratio without distortion */
}

/* Right Logo (square image) */
.logo-right {
    height: 60px; /* Match the height of the left logo */
    width: auto; /* Keep the width proportional */
    object-fit: contain; /* Maintain aspect ratio without distortion */
}

/* Global Styles for Heading (H1) */
h1 {
    margin-top: 4px; /* Reduce space above the heading */
    margin-bottom: 10px; /* Adjust the space below the heading if needed */
    font-size: 1.3rem; /* Adjust heading font-size if needed */
}

/* Navigation */
nav {
    display: flex;
    gap: 20px;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    padding: 5px 5px;
    position: relative;
    font-size: 1.2rem;
    transition: background-color 0.3s ease-in-out;
}

.nav-link:hover {
    background-color: #282828; /* Medium gray background on hover */
    padding: 5px 5px;
}

.nav-link.active {
    text-decoration: underline;
}

/* Main Content */
.content {
    padding: 10px 10px;
}

/* Hyperlinks - Global settings (outside banner and buttons) */
body a {
    color: rgb(17, 162, 138); /* Set the default link color to teal */
    text-decoration: none; /* Remove underline by default */
}

/* Hover effect on all links except in the banner or buttons */
body a:not(.nav-link):not(.button):hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Visited link styling (outside banner and buttons) */
body a:not(.nav-link):not(.button):visited {
    color: rgb(138, 37, 188); /* Purple for visited links */
}

/* Active link styling (outside banner and buttons) */
body a:not(.nav-link):not(.button):active {
    color: rgb(37, 202, 180); /* Teal for active links */
}

/* Custom teal background with white text when selecting */
::selection {
    background-color: #6f40d3; /* Teal or any other color */
    color: #ffffff; /* White text */
}

/* Music Section - New layout with buttons and Spotify embed */
.music-section {
    display: flex;
    justify-content: space-around; /* Distribute space evenly between buttons and embed */
    align-items: flex-start;
    margin-top: 10px;
    padding: 0 20px;
}

/* Music Buttons - Styled like buttons but specific to the music page */
.music-buttons {
    flex: 1.8; /* Buttons take up available space */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the buttons horizontally */
    justify-content: flex-start; /* Center the buttons vertically */
    width: 100%; /* Take up 50% of the space */
    max-width: 900px;
    text-align: center;
    padding: 10 10px;
}

/* Music page buttons styled similarly to .button */
.music-button {
    display: inline-block;
    width: 100%; /* Full width within its container */
    padding: 01px 25px;
    border: 0.8px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    border-radius: 9px; /* Add a slight rounding to the edges */
    background-color: transparent; /* Match the button style */
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 10px; /* Add space between buttons */
    text-align: center;
}

.music-button:hover {
    background-color: #333; /* Use the same medium gray for hover */
    color: #fff; /* Keep the text white */
}

/* Right-side: Spotify embed */
.spotify-embed {
    flex: 1.2; /* Make Spotify embed take equal width */
    max-width: 650px; /* Control max width of the embed */
}

/* Button Styles */
.buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center; /* Center the buttons */
}

.button {
    display: inline-block;
    width: 31%; /* Buttons will now take up 37% of the screen width on desktop */
    padding: 20px 20px;
    border: 0.8px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    border-radius: 9px; /* Add a slight rounding to the edges */
    transition: background-color 0.3s, color 0.3s;
}

.button:hover {
    background-color: #333; /* Use the same medium gray for hover */
    color: #fff; /* Keep the text white */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .top-bar {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center all items */
        height: auto; /* Let height adjust automatically */
    }

    nav {
        display: flex;
        flex-direction: column; /* Stack links vertically */
        align-items: center; /* Center the links */
        gap: 7px; /* Add spacing between the links */
    }

    .logo-left, .logo-right {
        height: 50px; /* Adjust the height for smaller screens */
        margin-bottom: 10px; /* Add space between logos and nav */
    }

    .buttons {
        flex-direction: column;
        width: 100%; /* Keep the buttons aligned properly */
    
    }

    .button {
        width:80%; /* Change to 80% width on mobile screens */
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* Stack Spotify embed and buttons vertically on mobile */
    .music-section {
        flex-direction: column;
        align-items: center; /* Center content on smaller screens */
    }

    .spotify-embed {
        width: 100%; /* Full width on mobile */
    }

    .music-buttons {
        width: 100%; /* Ensure buttons are full width on mobile */
        text-align: center; /* Center buttons on mobile */
        padding-left: 0; /* Remove padding on mobile */
    }

    .music-button {
        width: 100%; /* Reduce button width on smaller screens */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Spotify Embed Section */
.spotify-embed {
    margin-top: 20px; /* Add some space above the embed */
    max-width: 800px; /* Limit the maximum width of the Spotify player */
    margin-left: auto;
    margin-right: auto; /* Center the embed on the page */
}

/* Plugin Post Section */
.plugin-post {
    margin: 0px 0;
    padding: 00px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Align text to the left */
}

/* Flexbox for Image and Content */
.plugin-post .plugin-section {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: flex-start; /* Align items to the left */
    gap: 5px; /* Reduce the gap between the image and the content */
}

/* Thumbnail Image */
.plugin-post .thumbnail img {
    width: 100%; /* Make the image responsive */
    max-width: 400px; /* Set a maximum width of 400px */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure the image doesn't distort */
    display: block;
}

/* Content Section (text + YouTube) */
.plugin-post .content {
    flex: 1; /* Take up the remaining space */
}

/* YouTube Video */
.plugin-post .youtube-video iframe {
    width: 608px;
    height: 342px;
    margin-top: 10px;
    border-radius: 8px;
}

/* Excerpt Text */
.plugin-post .excerpt {
    margin-top: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .plugin-post .plugin-section {
        flex-direction: column; /* Stack the image and content vertically */
        align-items: center; /* Center the items */
    }

    .plugin-post .thumbnail img {
        width: 80%; /* Make the image larger on smaller screens */
        margin-bottom: 20px; /* Add space below the image */
        display: block;
        margin-left: auto;
        margin-right: auto; /* Center the image */
    }

    .plugin-post .content {
        padding-left: 0; /* Remove left padding */
        text-align: center; /* Center text on smaller screens */
    }

    .plugin-post .youtube-video iframe {
        width: 336px;
        height: 189px; /* Adjust video height for smaller screens */
    }
}

/* Single-line horizontal divider */
hr.divider {
    border: none; /* Remove default borders */
    border-top: .5px solid #555; /* Add a single solid line */
    margin: 20px 0; /* Add space above and below */
    width: 100%; /* Full width of the container */
}

/* Grid layout for the art-post section */
.art-post {
    padding: 30px;
    text-align: center;
}

/* Grid container for the art images */
.art-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 images per row */
    gap: 5px; /* Space between the images */
    justify-items: center; /* Center images horizontally */
    margin-top: 0px;
}

/* Styling for individual images inside the grid */
.art-grid a {
    display: block;
}

.art-grid img {
    width: 100%;
    height: auto;
    max-width: 100%; /* Ensures responsiveness */
    border-radius: 5px; /* Optional: Add rounded corners */
    transition: transform 0.2s ease; /* Optional: Animation on hover */
}

.art-grid img:hover {
    transform: scale(1.02); /* Slightly enlarge image on hover */
}

/* Media Query for responsiveness: On smaller screens, reduce the number of columns */
@media (max-width: 768px) {
    .art-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 images per row on smaller screens */
        gap: 5px;
    }
}

@media (max-width: 380px) {
    .art-grid {
        grid-template-columns: 1fr; /* 1 image per row on very small screens */
        gap: 5px;
    }
}

/* Media Query for very small screens (below 300px) */
@media (max-width: 300px) {
    .art-grid {
        grid-template-columns: 1fr; /* 1 image per row */
        gap: 5px; /* Maintain the gap between the images */
    }
}

/* carousel style */


.carousel-container {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-slide {
    display: flex;
    transition: transform 0.2s ease-in-out;
}

.carousel-slide img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: white;
    opacity: 0.9;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    user-select: none;
}

.carousel-arrow.left {
    left: 10px;
}

.carousel-arrow.right {
    right: 10px;
}

@media (max-width: 336px) {
    .carousel-container {
        max-width: 336px;
    }
}