body {
    /* Using your local GIF */
    background-image: url('icegif-1087.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #ffffff;
    font-family: 'Pixelify Sans', cursive;
    margin: 0;
    padding: 40px 20px; /* Padding for the entire content area */
    min-height: 100vh;
    display: flex;
    justify-content: center; /* Center the main content horizontally */
    align-items: flex-start; /* Align content to the top */
    box-sizing: border-box;
}

.main-content-wrapper {
    display: flex;
    gap: 40px; /* Space between left and right columns */
    max-width: 1200px; /* Max width for the whole content block */
    width: 100%;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    justify-content: center; /* Center columns when wrapped */
}

/* Common Styling for Panels/Boxes */
.panel-box {
    background-color: rgba(0, 0, 0, 0.7); /* Consistent background with transparency */
    border: 2px solid #555577; /* Consistent border */
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}

/* Left Column: Socials and Mod List */
.left-column {
    flex: 1; /* Allow to grow */
    min-width: 300px; /* Minimum width before wrapping */
    max-width: 450px; /* Max width for the left column */
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between social section and mod list */
}

.socials-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align icons to the left */
}

.social-icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive grid for icons */
    gap: 20px;
    width: 100%;
}

.social-icon {
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.1s ease-in-out;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    position: relative; /* For Instagram note positioning */
}

.social-icon:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.1);
}

.social-icon img {
    width: 70px;
    height: 70px;
    display: block;
    margin: 0 auto 5px;
    image-rendering: pixelated;
}

.icon-label {
    font-size: 0.9em;
    line-height: 1.2;
}

.instagram-note {
    position: absolute;
    top: 50%; /* Center vertically relative to icon */
    left: 100%; /* To the right of the icon */
    transform: translate(15px, -50%) rotate(-3deg); /* Adjust position and add rotation */
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid #555577;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    color: #cccccc;
    white-space: nowrap;
    z-index: 5; /* Ensure it's above other elements but not too high */
}

/* Mod List Section */
.mod-list-section {
    /* No specific styles needed beyond .panel-box */
}

.section-header {
    font-size: 1.3em;
    color: #aaccff;
    margin-bottom: 15px;
    text-align: center;
}

.mod-entry {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background-color: #2a2a40;
    border: 1px solid #3a3a50;
    padding: 8px;
    border-radius: 5px;
    /* NEW: Hoverable styles */
    cursor: pointer; /* Indicates interactivity */
    transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

/* NEW: Hover effect for mod entries */
.mod-entry:hover {
    transform: translateY(-3px); /* Slightly less lift than social icons */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle highlight */
}

.mod-entry img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    image-rendering: pixelated;
}

.mod-details {
    flex-grow: 1;
}

.mod-details strong {
    display: block;
    font-size: 1em;
    color: #aaccff;
}

.mod-details span {
    font-size: 0.8em;
    color: #cccccc;
}

/* Right Column: PFP, Status, Contact */
.right-column {
    flex: 1; /* Allow to grow */
    min-width: 300px; /* Minimum width before wrapping */
    max-width: 350px; /* Max width for the right column */
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between profile panel and contact box */
}

.profile-panel {
    text-align: center;
}

.profile-panel img {
    width: 120px; /* Larger PFP */
    height: auto;
    border-radius: 50%; /* Circular avatar */
    border: 3px solid #aaccff;
    display: block;
    margin: 0 auto 15px;
    image-rendering: pixelated;
}

.profile-panel h2 {
    font-size: 1.8em;
    color: #aaccff;
    margin-bottom: 5px;
}

.profile-panel p {
    margin: 5px 0;
    line-height: 1.4;
}

.profile-panel hr {
    border-color: #444;
    margin: 15px auto;
    width: 80%;
}

/* Update the emoji size and add proper vertical alignment */
.profile-panel .discord-custom-status-emoji {
    width: 64px; /* Your desired size */
    height: 64px; /* Maintain aspect ratio */
    vertical-align: middle; /* Align with the middle of the line box */
    margin: 0 8px; /* Added a bit more space around the larger emoji */
    border: none;
    image-rendering: pixelated;
}

/* Ensure the status container has enough vertical space and aligns its content */
#current-activity {
    display: inline-block; /* Important: Allows setting line-height and keeps it inline */
    line-height: 64px; /* Set line-height to match emoji height for true vertical centering */
    font-size: 1.2em; /* Optionally make the text larger to match the emoji better */
    white-space: nowrap; /* Prevents text from wrapping if it's short */
}

/* You might want to adjust the line-height of the surrounding <p> tags in .profile-panel
   if the large emoji causes issues with other text lines.
   For example:
   .profile-panel p {
       line-height: 1.6; /* Increased line-height for more spacing */
*/

.contact-box {
    text-align: center;
    font-size: 1.1em;
}

.contact-box img {
    width: 30px;
    height: auto;
    vertical-align: middle;
    margin-right: 10px;
    image-rendering: pixelated;
}

.contact-box a {
    color: #aaccff;
    text-decoration: none;
}

/* Footer Branding - remains at bottom right, relative to body */
.footer-branding {
    position: fixed; /* Fixed position so it's always visible */
    bottom: 20px;
    right: 30px;
    font-size: 1.8em; /* Slightly smaller */
    color: #aaccff;
    opacity: 0.8; /* Slight transparency */
    z-index: 100; /* Ensure it's on top */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        padding: 20px 10px; /* Less padding on small screens */
    }
    .main-content-wrapper {
        flex-direction: column; /* Stack columns on smaller screens */
        align-items: center; /* Center items when stacked */
        padding: 20px 0;
    }

    .left-column, .right-column {
        max-width: 90%; /* Take up more width when stacked */
        min-width: unset; /* Remove min-width when stacking */
        width: 100%;
    }

    .social-icons-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Smaller icons on small screens */
    }

    .instagram-note {
        position: static; /* Remove absolute positioning */
        transform: none; /* Remove rotation */
        margin-top: 5px; /* Add margin below the icon */
        display: block; /* Make it a block element */
    }

    .footer-branding {
        position: static; /* Make it flow with content */
        text-align: center;
        margin-top: 30px;
    }
}