body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #121212; /* Dark background */
    color: #e0e0e0; /* Light text color */
}

header {
    text-align: center;
}

footer {
    text-align: center;
}

.header-image {
    width: 100%;
    max-width: 750px;
    height: auto;
}

.blurb {
    text-align: center;
    padding: 20px;
    background-color: #1e1e1e; /* Darker card background */
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.streamers {
    text-align: center;
    margin: 20px;
}

.streamer-links {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    justify-content: center; /* Centers the items */
}

.streamer-container {
    position: relative;
    margin: 10px;
    width: 100%;
    max-width: 325px; /* Match image max width */
    box-sizing: border-box;
}
.streamer-image {
    width: 100%; /* Makes the image responsive */
    max-width: 325px; /* Sets a maximum width for the images */
    border-radius: 8px;
    transition: transform 0.2s;
    border: 2px solid #e0e0e0; /* Light border for images */
}

.streamer-name {
    position: absolute; /* Keep the name overlay */
    bottom: calc(100% - 320px); /* Adjust this value to position the name above the links */
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: #e0e0e0; /* Light text color */
    text-align: center;
    padding: 5px;
}

.social-media-links {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap; /* Force wrapping if links exceed width */
    justify-content: center; /* Center within container */
    gap: 5px; /* Optional: adds consistent spacing */
}
.social-media-links a {
    display: inline-block; /* Makes the links inline */
    margin: 0 5px; /* Space between links */
    padding: 5px 10px; /* Padding for clickable area */
    background-color: #1e1e1e; /* Background color for links */
    color: #e0e0e0; /* Light text color */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s; /* Smooth background color transition */
}

.social-media-links a:hover {
    background-color: #3a3a3a; /* Darker background on hover */
}

.streamer-image:hover {
    transform: scale(1.05);
}