/* Reset some default styles */
body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    font-family: 'Chakra Petch', monospace;
}

/* Header styles */
.header {
    background-color: #111;
    color: #ff6cc1;
    text-align: center;
    padding: 5px;
    margin-bottom: 300px;
}

/* Container styles */
.container {
    margin: 0 auto;
    padding: 20px;
    background-color: #111;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    max-width: 800px;
}

.container-nobg {
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    background-color: #000;
}

/* Responsive container */
.responsive-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row if needed */
}

/* Left column (1/3 width) */
.left-column {
    flex: 1; /* Occupy 1/3 of the container's width */
    min-width: calc(33.33% - 20px); /* Calculate min-width with some spacing */
    padding: 10px; /* Add spacing around content */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Right column (2/3 width) */
.right-column {
    flex: 2; /* Occupy 2/3 of the container's width */
    min-width: calc(66.66% - 20px); /* Calculate min-width with some spacing */
    padding: 10px; /* Add spacing around content */
    box-sizing: border-box; /* Include padding in width calculation */
}

@media (max-width: 899px) {
    .header {
        margin-bottom: 0;
    }
    .container {
        max-width: 100%; /* Make it responsive */
    }
    #twitch-container {
        display: none;
    }

    #twitch-card {
        display: none;
    }

    .responsive-container {
        flex-direction: column; /* Stack columns vertically on small screens */
    }

    /* Both columns occupy full width on small screens */
    .left-column, .right-column {
        flex: 1;
        min-width: 100%;
    }
}

@media (min-width: 900px) and (max-width: 1400px) {
    #twitch-container {
        display: block;
    }
    .container {
        max-width: 100%;
    }
}

/* Limit container width to 1200px at larger screen sizes */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }
    .container-nobg {
        max-width: 100%;
    }
}

/* Heading styles */
h1 {
    color: #ff6cc1;
    font-size: 1.2rem;
}

a {
    color: #ce308b;
}

a:visited {
    color: #ce308b;
}

/* Social links styles */
.social-links {
    text-align: center;
    margin-top: 20px;
}

.social-links a {
    margin: 10px;
    font-size: 1.5rem;
    text-decoration: none;
    color: #9c27b0; /* Purple color for links */
    transition: color 0.3s; /* Smooth color transition on hover */
}

.social-links a:hover {
    color: #6a1b9a; /* Darker purple color on hover */
}

/* Stream schedule styles */
.stream-schedule {
    margin-top: 20px;
}

.stream-schedule h2 {
    color: #ff6cc1; /* Pink as the accent color */
    font-size: 1.5rem;
}

.stream-event {
    border-top: 1px solid #ff6cc1; /* Add top border with pink accent color */
    border-bottom: 1px solid #ff6cc1; /* Add bottom border with pink accent color */
    padding: 10px 0; /* Add padding to create space between events */
}

.stream-event h3 {
    color: #fff;
    font-size: 1.2rem;
}

.stream-event p {
    color: #ccc;
    font-size: 1rem;
}

button, a.btn {
    background-color: #4c058a;
    border-color: #370464;
    border-radius: 15px;
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
}

button.rainbow, a.btn.rainbow {
    animation: rainbow 10s linear infinite;
}

@keyframes rainbow {
    0% {
        background: linear-gradient(45deg, red, orange, green, blue, indigo, violet);
        background-size: 200% 200%;
        background-position: 0 100%;
    }
    100% {
        background: linear-gradient(45deg, violet, indigo, blue, green, orange, red);
        background-size: 200% 200%;
        background-position: 100% 0%;
    }
}

/* Card */
.card {
    background-color: #f3c623;
    border-top-right-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 90%; /* Adjust as needed */
    margin: 10px;
}

/* Card header with yellow top */
.card-header {
    color: #000;
    padding: 2px 15px;
    text-align: left;
    font-weight: bold;
}

.card-header h2, .card-header h3 {
    margin: 0;
    padding: 5px 10px;
}

/* Card content styling (customize as needed) */
.card-content {
    background-color: #2d2d2d;
    padding: 20px;
    font-size: 16px;
    line-height: 1.5;
}

/* Style the gallery container */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Style individual gallery items */
.gallery-item {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    max-width: 300px; /* Limit maximum image width */
}

/* Style the images */
.gallery-item img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Style the artist attribution text */
.gallery-item p {
    margin-top: 5px;
    font-style: italic;
}

/* Add hover effect to gallery items */
.gallery-item:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* Twitch Stuff */
/* CSS for the Twitch container */
#twitch-container {
    display: none;
    /*position: fixed;*/
    /*top: -480px; !* Initially off-screen *!*/
    /*left: 0;*/
    /*right: 0;*/
    /*width: 100%;*/
    /*max-width: 854px;*/
    /*margin: 0 auto;*/
    /*background-color: #000;*/
    /*transition: top 0.5s ease-in-out; !* Animation transition *!*/
    /*z-index: 1000; !* Adjust the z-index as needed *!*/
}

/* Style the background banner */
.banner {
    background-image: url('img/fiverr_banner_1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    position: sticky;
    top: 0;
    z-index: 999;
}

/* Style the content below the banner */
.content {
    padding-top: 220px; /* Adjust to match the banner height + some padding */
}

.avatar-frame {
    max-width: 500px;
    padding: 0;
}

.avatar-frame img {
    background-color: #ccc;
    max-width: 100%;
    border: solid 5px #ec0d9f;
}