body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    height: 100%;
    background-color: #1a1a1a;
}

.content-section {
    max-width: 1200px;
    margin: 0 auto; /* Centers the content section */
    padding: 25px 0; /* Optional padding */
    background-color: #1a1a1a;
}

.twitch-feed {
    
    background-color: #1a1a1a;
    /* No need to set max-width here as it's controlled by .content-section */
    padding-bottom: 25px;
    padding-top: 25px;
}

.twitch-feed-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap; /* Allows items to wrap as needed */
    color: white;
}

.twitch-live-feed {
    flex-basis: calc(100% - 340px);
    position: relative;
    height: 720px;
}

.twitch-live-feed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.twitch-chat-feed {
    flex-basis: 340px;
    height: 720px;
}

.twitter-embed-container {
    display: flex;
    max-height: 600px;
    align-content: center;
    
}

.twitter-embed {
    flex: 1; /* Takes half the space */
    /* Adjustments for the Twitter embed */
    overflow: auto; /* Adds scrollbars if content overflows */
}

.buttons-container {
    flex: 1; /* Takes the other half of the space */
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    justify-content: center; /* Center buttons vertically */
    align-items: center; /* Center buttons horizontally */
    color: white;
}

.buttons-container h1{
    font-size: 56px;
}

.custom-link-button {
    display: block; /* Make the link fill the container */
    margin: 10px 0; /* Spacing between links */
    padding: 10px 20px;
    background-color: #0875ca; /* Example button color */
    color: white;
    text-align: center;
    text-decoration: none; /* Remove underline from link */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: auto; /* Adjust width as needed, or use '100%' to fill the container */
}

.custom-link-button:hover {
    background-color: #065a9d; /* Darker shade for hover effect */
}


/* Responsive adjustments */
@media (max-width: 650px) {
    .twitter-embed-container {
        flex-direction: column;
    }

    .twitter-embed, .buttons-container {
        flex-basis: auto; /* Adjusts size automatically */
    }
}

/* Responsive styling for device width below 650px */
@media (max-width: 650px) {
    .twitch-chat-feed {
        display: none;
    }

    .twitch-live-feed {
        flex-basis: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
        height: auto;
    }
}