/* General Reset */
body, h1, h2, ul, li {
    margin: 0;
    padding: 0;
}

/* Updated Logo Styling */
.logo {
    font-size: 70px;
    font-family: 'Press Start 2P', cursive; /* Pixelated retro gaming font */
    background: linear-gradient(135deg, #00ff99, #ffcc33, #ff3399, #3399ff);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 
        3px 3px 0 #222,  /* Dark retro shadow */
        -1px -1px 0 #ff33cc, /* Highlighting */
        1px -1px 0 #00ffcc; /* Glowy secondary tone */
    animation: holographic-shift 4s infinite ease-in-out;
    margin: 0;
    display: inline-block;
}

/* Holographic Shift Animation */
@keyframes holographic-shift {
    0% {
        background-position: 0% 50%;
        text-shadow: 
            3px 3px 0 #222, 
            -1px -1px 0 #ff33cc, 
            1px -1px 0 #00ffcc,
            0 0 10px #ff3399, 
            0 0 20px #3399ff;
    }
    50% {
        background-position: 100% 50%;
        text-shadow: 
            3px 3px 0 #000, 
            -1px -1px 0 #00ffcc, 
            1px -1px 0 #ff3399,
            0 0 20px #ffcc33, 
            0 0 30px #00ff99;
    }
    100% {
        background-position: 0% 50%;
        text-shadow: 
            3px 3px 0 #222, 
            -1px -1px 0 #ff33cc, 
            1px -1px 0 #00ffcc,
            0 0 10px #3399ff, 
            0 0 20px #ff3399;
    }
}

/* Font Import for Pixelated Retro Style */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Background Update for a Funky Retro Feel */
body {
    font-family: 'Press Start 2P', monospace; /* Consistent pixelated font */
    background: radial-gradient(circle, #1a1a1a 60%, #333 100%); /* Dark radial gradient */
    color: #fff;
    overflow-x: hidden;
}

.navbar {
    background: linear-gradient(145deg, #ff007f, #ff00ff); /* Neon pink to purple gradient */
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 2px solid #333; /* Changed border color and thickness */
    font-family: 'Digital-7', monospace; /* Digital font for navbar */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
}

.navbar a {
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 10px 20px;
    background: linear-gradient(145deg, #3b3b98, #6161cc); /* Retro blue gradient */
    border: 2px solid #fff;
    border-radius: 20px;
    box-shadow: 3px 3px 0 #333;
    transition: transform 0.3s, box-shadow 0.3s;
}

.navbar a:hover {
    transform: translateY(-5px);
    box-shadow: 5px 5px 0 #000;
    background: linear-gradient(145deg, #6161cc, #3b3b98);
}

.navbar a:active {
    transform: translateY(2px);
    box-shadow: 2px 2px 0 #000;
}

/* Main Layout */
main {
    display: flex;
    height: calc(100vh - 50px);
}

/* Timeline with 80s/90s Retro Colors */
.timeline {
    background: #8cc7ff; /* Light neon blue background */
    width: 25%;
    padding: 30px;
    overflow-y: auto;
    border-right: 2px solid #333;
}
.timeline h2 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-family: 'Digital-7', monospace; /* Digital font for heading */
    color: #ff0099; /* Neon pink text */
}
.timeline .year-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}
.timeline button {
    width: 80%;
    padding: 12px 0;
    background: linear-gradient(145deg, #00ff99, #33ffcc); /* Vibrant teal gradient */
    color: #1a1a1a; /* Dark contrast text */
    border: 2px solid #1a1a1a;
    border-radius: 10px;
    font-size: 18px;
    font-family: 'Digital-7', monospace; /* Digital font for buttons */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 3px 3px 0 #1a1a1a;
}
.timeline button:hover {
    background: linear-gradient(145deg, #33ffcc, #00ff99); /* Reverse gradient on hover */
    box-shadow: 5px 5px 0 #000;
    transform: translateY(-3px);
}
.timeline button:active {
    background: #00ff99; /* Solid teal color when active */
    box-shadow: 2px 2px 0 #000;
    transform: translateY(2px);
}

/* General Reset */
body, h1, h2, ul, li {
    margin: 0;
    padding: 0;
}

/* Updated Logo Styling */
.logo {
    font-size: 70px;
    font-family: 'Press Start 2P', cursive; /* Pixelated retro gaming font */
    background: linear-gradient(135deg, #00ff99, #ffcc33, #ff3399, #3399ff);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 
        3px 3px 0 #222,  /* Dark retro shadow */
        -1px -1px 0 #ff33cc, /* Highlighting */
        1px -1px 0 #00ffcc; /* Glowy secondary tone */
    animation: holographic-shift 4s infinite ease-in-out;
    margin: 0;
    display: inline-block;
}

/* Holographic Shift Animation */
@keyframes holographic-shift {
    0% {
        background-position: 0% 50%;
        text-shadow: 
            3px 3px 0 #222, 
            -1px -1px 0 #ff33cc, 
            1px -1px 0 #00ffcc,
            0 0 10px #ff3399, 
            0 0 20px #3399ff;
    }
    50% {
        background-position: 100% 50%;
        text-shadow: 
            3px 3px 0 #000, 
            -1px -1px 0 #00ffcc, 
            1px -1px 0 #ff3399,
            0 0 20px #ffcc33, 
            0 0 30px #00ff99;
    }
    100% {
        background-position: 0% 50%;
        text-shadow: 
            3px 3px 0 #222, 
            -1px -1px 0 #ff33cc, 
            1px -1px 0 #00ffcc,
            0 0 10px #3399ff, 
            0 0 20px #ff3399;
    }
}

/* Font Import for Pixelated Retro Style */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Background Update for a Funky Retro Feel */
body {
    font-family: 'Press Start 2P', monospace; /* Consistent pixelated font */
    background: radial-gradient(circle, #1a1a1a 60%, #333 100%); /* Dark radial gradient */
    color: #fff;
    overflow-x: hidden;
}

/* Main Layout */
main {
    display: flex;
    height: calc(100vh - 50px);
}

.timeline {
    background: #8cc7ff; /* Light neon blue background */
    width: 25%;
    padding: 30px;
    overflow-y: auto;
    border-right: 2px solid #333;
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.timeline h2 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-family: 'Digital-7', monospace;
    color: #ff0099;
}

.timeline button {
    width: 80%;
    padding: 12px 0;
    background: linear-gradient(145deg, #00ff99, #33ffcc);
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
    border-radius: 10px;
    font-size: 18px;
    font-family: 'Digital-7', monospace;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 3px 3px 0 #1a1a1a;
    box-sizing: border-box;
}

#welcome-message {
    text-align: center;
    margin-top: 300px; /* Adjust as needed */
    font-family: 'Digital-7', monospace; /* Retro font */
    display: block;
}

#welcome-message h2 {
    font-size: 30px;
    margin-bottom: 10px;
    color: #ff007f;
}

#welcome-message p {
    font-size: 16px;
    line-height: 1.5;
    color: #1a1a1a
}

/* Product List with Matching Teal Background */
.product-list {
    background: #33ffcc;
    width: 100%; /* Full screen width */
    padding: 0; /* Remove padding */
    overflow-y: auto;
    color: #1a1a1a;
    border-left: none; /* Remove left border */
}

.product-list h2 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 18px;
    font-family: 'Digital-7', monospace; /* Digital font for product list heading */
}
.product-list ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-list li {
    padding: 10px;
    background: #fff;
    margin: 10px 0;
    border: 1px solid #333;
    width: 90%;
    text-align: center;
    font-size: 16px;
    font-family: 'Digital-7', monospace; /* Digital font for list items */
}

/* Product Images */
.product-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
    gap: 20px; /* Space between images */
    margin-top: 20px;
    padding: 20px;
    justify-items: center; /* Center images horizontally */
}

/* Individual image styling */
.product-images img {
    width: 100%; /* Make the images responsive */
    max-width: 200px; /* Set a consistent size */
    height: auto;
    border: 3px solid #333; /* Retro-style border */
    border-radius: 15px; /* Rounded corners for a retro feel */
    background: #fff; /* Background for the border */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Hover effect: Add glow */
.product-images img:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    box-shadow: 3px 3px 0 #000, 0 0 20px #ff33cc, 0 0 40px #33ccff; /* Neon glow shadow */
    filter: brightness(1.2); /* Enhance brightness for a glowing effect */
}

/* Active effect when image is clicked */
.product-images img:active {
    transform: scale(0.95); /* Slightly shrink on click */
    box-shadow: 3px 3px 0 #333; /* Reduced shadow on click */
    filter: brightness(1); /* Remove brightness effect */
}

/* Product Detail Section */
.product-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 20px;
    background-color: #33ffcc; /* Matching teal background */
    border: 2px solid #1a1a1a; /* Solid border for retro effect */
}

.product-detail {
    background: #33ffcc; /* Extend the teal background */
    border: none; /* Optional: Remove the border if unnecessary */
    padding-bottom: 40px; /* Add extra space to avoid any cutoff */
}

/* Product Content Section */
.product-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center the content vertically */
    height: 100vh; /* Full screen height */
    padding: 20px;
}

/* Product Image */
.product-image img {
    width: auto; /* Allow natural width scaling */
    max-width: 500px; /* Limit maximum size for large screens */
    height: auto; /* Maintain aspect ratio */
    border: 5px solid #333;
    border-radius: 15px;
    background: #fff;
    margin: 0 auto; /* Center the image */
    display: block; /* Ensure the image centers */
}

/* Product Information */
.product-info {
    text-align: center;
    font-family: 'Digital-7', monospace;
    width: 60%; /* Reduced width */
    margin: 0 auto; /* Centers the container */
}

.product-info h2 {
    margin-bottom: 10px;
    margin-top: 40px;
}

.product-info p {
    line-height: 1.5;
}

/* Back Button */
.back-button-container {
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: center;

}

/* Back Button */
.back-button {
    display: inline-block; /* Ensure it aligns within the content block */
    width: auto; /* Adjust to fit text */
    padding: 12px 30px; /* Larger padding for balance */
    background: linear-gradient(145deg, #ff007f, #ff00ff); /* Match navbar color */
    color: #fff; /* White text */
    border: 2px solid #fff; /* Consistent border style */
    border-radius: 20px;
    font-size: 18px;
    font-family: 'Digital-7', monospace;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 3px 3px 0 #333; /* Retro shadow */
    transition: all 0.3s ease-in-out;
    margin: 0 auto; /* Center button */
}

.back-button:hover {
    transform: translateY(-5px);
    box-shadow: 5px 5px 0 #000;
}

.back-button:active {
    transform: translateY(2px);
    box-shadow: 2px 2px 0 #000;
}


/* About Section */
.about-section {
    background: #33ffcc; /* Matching teal background */
    width: 100%;
    padding: 220px;
    overflow-y: auto;
    text-align: center;
    font-family: 'Digital-7', monospace; /* Digital font for retro look */
}

.about-section h2 {
    margin-bottom: 10px;
    font-size: 30px;
    color: #ff007f;

}

.about-section p {
    line-height: 1.5;
    font-size: 16px;
    margin-bottom: 20px;
    color: #1a1a1a
}

/* Radio Section */
.radio-section {
    background: #33ffcc; /* Matching teal background */
    color: #1a1a1a; /* Dark text for contrast */
    width: 100%;
    padding: 220px;
    overflow-y: auto;
    text-align: center;
    font-family: 'Digital-7', monospace;
}

.radio-section h2 {
    margin-bottom: 10px;
    font-size: 30px;
    color: #ff007f;
}

.spotify-container {
    background: linear-gradient(145deg, #ff007f, #ff00ff); /* Neon pink to purple gradient */
    border: 2px solid #fff; /* White border to match the navbar's style */
    border-radius: 20px; /* Rounded corners */
    margin-top: 40px; /* Space above the container */
    margin-bottom: 40px; /* Space below the container */
    padding: 30px; /* Spacing around the embedded link */
    box-shadow: 3px 3px 0 #333; /* Retro-style shadow */
    display: inline-block;
    transition: transform 0.3s, box-shadow 0.3s;
}

.spotify-container:hover {
    transform: translateY(-5px); /* Hover effect */
    box-shadow: 5px 5px 0 #000;
}

.spotify-container:active {
    transform: translateY(2px); /* Active click effect */
    box-shadow: 2px 2px 0 #000;
}

/* Retro Spotify iframe */
.spotify-container iframe {
    border-radius: 15px; /* Softer rounded edges */
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.15); /* Inner shadow for vintage depth */
    border: none; /* Remove iframe border */
    filter: sepia(50%) contrast(120%) brightness(90%); /* Add a sepia tone for a vintage look */
}

.coming-soon {
    text-align: center;
    font-family: 'Digital-7', monospace;
    margin: 300px auto;
}

.coming-soon h2 {
    font-size: 28px;
    color: #ff007f;
}

.coming-soon p {
    font-size: 18px;
    color: #333;
}