* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  

body {  
    font-family: Arial, sans-serif;  
    line-height: 1.6;  
    background-color: #f9f9f9;  
    color: #333;  
    padding: 20px;  
    display: flex;  
    flex-direction: column;  
    min-height: 100vh; /* Ensure body takes the full height */  
}  

header {  
    background-color: #4CAF50;  
    color: white;  
    padding: 20px;  
    text-align: center;  
}  

.logo-image {  
    width: 100px;  
    height: auto;  
    border-radius: 50%;  
    margin-bottom: 10px;  
}  

h1 {  
    margin: 10px 0;  
}  

nav ul {  
    list-style: none;  
    padding: 0;  
}  

nav ul li {  
    display: inline;  
    margin: 0 15px;  
}  

nav ul li a {  
    color: white;  
    text-decoration: none;  
}  

nav ul li a:hover {  
    text-decoration: underline;  
}  

h2, h3 {  
    margin-bottom: 10px;  
}  

.banner {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    text-align: center;  
    padding: 20px;  
}  

.banner-image {  
    display: block;  
    max-width: 100%;  
    height: auto;  
}  

.gallery {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
}  

.gallery img {  
    width: calc(25% - 10px);  
    margin: 5px;  
    border: 2px solid #ddd;  
    border-radius: 5px;  
    transition: transform 0.2s;  
}  

.gallery img:hover {  
    transform: scale(1.05);  
}  

.bio {  
    margin: 20px 0;  
    max-width: 600px;  
    text-align: center;  
}  

.bio-image {  
    width: 100px;  
    height: auto;  
    border-radius: 50%;  
}  

footer {  
    background: #333;  
    color: white;  
    text-align: center;  
    padding: 10px;  
    margin-top: auto; /* Push footer to the bottom */  
}  

/* Mobile Styles */  
@media (max-width: 768px) {  
    nav ul {  
        display: flex;  
        flex-direction: column; /* Stack menu items vertically */  
        align-items: center; /* Center items */  
        padding: 0; /* Remove padding */  
    }  

    nav ul li {  
        display: block; /* Ensure list items take full width */  
        margin: 10px 0; /* Space between items */  
    }  

    .gallery img {  
        width: calc(50% - 10px); /* Two items per row on tablets */  
    }  

    .product-item {  
        flex: 0 1 calc(50% - 20px); /* Two items per row on tablets */  
    }  

    .bio {  
        max-width: 100%; /* Full width */  
    }  

    main {  
        padding: 10px; /* Reduce padding on mobile */  
    }  

    .banner-content {  
        padding: 10px; /* Reduce padding for the banner on mobile */  
    }  
}  

@media (max-width: 480px) {  
    nav ul li {  
        margin-bottom: 10px; /* Space for stacked items */  
    }  

    .gallery img {  
        width: 100%; /* Full width on mobile */  
        margin: 5px 0; /* Reduce margin */  
    }  

    .product-item {  
        flex: 0 1 100%; /* Full width for product items */  
    }  

    .bio {  
        max-width: 100%; /* Full width for bios */  
    }  

    .banner-content {  
        padding: 10px; /* Less padding for smaller screens */  
    }  
}  

/* Form Styles */  
form {  
    background: #f9f9f9;  
    border-radius: 5px;  
    padding: 20px;  
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
    max-width: 500px;  
    margin: 20px auto;  
}  

.form-group {  
    margin-bottom: 15px;  
}  

label {  
    display: block;  
    margin-bottom: 5px;  
    font-weight: bold;  
}  

input[type="text"],  
input[type="email"],  
input[type="password"],  
textarea {  
    width: 100%;  
    padding: 10px;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
}  

textarea {  
    resize: vertical;  
    height: 100px;  
}  

button {  
    background-color: #4CAF50;  
    color: white;  
    border: none;  
    padding: 10px 15px;  
    cursor: pointer;  
    font-size: 16px;  
    border-radius: 5px;  
    transition: background-color 0.3s;  
}  

button:hover {  
    background-color: #45a049;  
}  

.product-item {  
    border: 1px solid #ddd;  
    border-radius: 5px;  
    padding: 10px;  
    text-align: center;  
    margin: 10px;  
    background: #f9f9f9;  
    flex: 0 1 calc(25% - 20px);  
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;  
    max-width: 250px;  
}   

.product-item img {  
    width: 100%;  
    height: 200px;  
    object-fit: cover;  
}  

.price {  
    font-weight: bold;  
    color: #4CAF50;  
}  

.description {  
    text-align: justify;  
    margin: 10px 0;  
    line-height: 1.5;  
    color: #555;  
    flex-grow: 1;  
}  

ul {  
    margin-left: 20px;  
}  

ul li {  
    margin-bottom: 10px;  
}  

@keyframes rgb-blink {  
    25% { background-color: green; }    
    100% { background-color: red; }  
}  

.banner-buttons {  
    margin-top: 20px;  
}  

.btn {  
    display: inline-block;  
    color: white;  
    padding: 15px 30px;  
    text-decoration: none;  
    border-radius: 5px;  
    font-size: 18px;  
    margin: 10px 5px;  
    animation: rgb-blink 1.5s infinite;  
    transition: transform 0.3s;  
}  

.btn:hover {  
    transform: scale(1.05);  
}  

@keyframes rgb-blink-heading {  
    0% { color: red; }  
    25% { color: green; }  
    50% { color: blue; }  
    75% { color: yellow; }  
    100% { color: red; }  
}  

.rgb-blink {  
    animation: rgb-blink-heading 1.5s infinite;  
    text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.5);  
}  

.main {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: start;  
    padding: 20px;  
}  

.bio-image {  
    width: 100px;  
    height: auto;  
    border-radius: 50%;  
}

/* Artist Bios Page Styles */  

body {  
    font-family: Arial, sans-serif;  
    background-color: #f9f9f9;  
}  

header {  
    background-color: #4CAF50;  
    color: white;  
    padding: 20px;  
    text-align: center;  
}  

.logo-image {  
    width: 100px; /* Logo size */  
    height: auto; /* Maintain aspect ratio */  
}  

h1 {  
    margin: 10px 0;  
}  

nav ul {  
    list-style: none;  
    padding: 0;  
}  

nav ul li {  
    display: inline;  
    margin: 0 15px;  
}  

nav ul li a {  
    color: white;  
    text-decoration: none;  
    transition: color 0.3s;  
}  

nav ul li a:hover {  
    text-decoration: underline;  
    color: #e0e0e0; /* Change on hover */  
}  

main {  
    max-width: 800px; /* Centered container */  
    margin: 20px auto; /* Center the main content */  
    padding: 20px;  
    background-color: white; /* White background for the main section */  
    border-radius: 8px; /* Rounded corners */  
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */  
}  

h2 {  
    text-align: center; /* Center the section heading */  
    color: #4CAF50; /* Match header color */  
    margin-bottom: 20px;  
}  

.bio {  
    margin: 20px 0; /* Space between bios */  
    text-align: center; /* Center align text in bio sections */  
    border: 1px solid #ddd; /* Border around each bio */  
    border-radius: 5px; /* Rounded corners */  
    padding: 15px; /* Padding within bio */  
    background-color: #f3f3f3; /* Light background for bios */  
    transition: transform 0.2s; /* Smooth hover effect */  
}  

.bio:hover {  
    transform: scale(1.02); /* Slight scale on hover */  
}  

.bio-image {  
    width: 150px; /* Adjust image size */  
    height: auto; /* Maintain aspect ratio */  
    border-radius: 50%; /* Circular images */  
    margin-bottom: 10px; /* Space below images */  
}  

.bio h3 {  
    color: #4CAF50; /* Green color for artist names */  
    margin-bottom: 10px; /* Space below artist's name */  
}  

footer {  
    background: #4CAF50;  
    color: white;  
    text-align: center;  
    padding: 10px;   
    margin-top: 20px; /* Space above footer */  
}  

/* Small device adjustments */  
@media (max-width: 480px) {  
    nav ul li {  
        display: block; /* Stack items vertically on small screens */  
        margin: 10px 0; /* Space between stacked items */  
    }  

    .bio {  
        padding: 10px; /* Adjust padding for smaller devices */  
    }  

    .bio-image {  
        width: 100px; /* Smaller portrait images for mobile */  
    }  
}  


.artist-bio-page h2,  
.artist-bio-page .bio {  
    border-color: #4CAF50; /* Green border for bios */  
}

/* Footer Styles */  
footer {  
    background: #333;  /* Dark background color */  
    color: white;      /* Text color */  
    text-align: center; /* Center align text */  
    padding: 10px;     /* Padding for the footer */  
    margin-top: auto;  /* Pushes the footer to the bottom */  
    position: relative; /* Allows positioning relative to the page */  
}  

/* Ensuring the body allows footer to stay at the bottom */  
body {  
    display: flex;           /* Use flexbox for layout */  
    flex-direction: column;  /* Arrange items in a column */  
    min-height: 100vh;      /* At least the full height of the viewport */  
}