body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    font-family: 'Metal Mania', cursive;
    color: #ffffff;
    
    min-height: 100vh;
    
    /* NEW: Ensures the content starts at the top of the screen */
    display: flex;
    flex-direction: column; /* Stacks the content vertically */
    align-items: center;    /* Keeps it centered horizontally */
    justify-content: flex-start; /* THIS IS THE KEY FIX: Pushes content to the top */
    
    text-align: center;
}

/* --- Main Content Container --- */
.main-container {
    max-width: 90%; 
    padding: 0 20px;
    
    /* NEW FIX: Reduces the blank space below the social icons */
    margin-bottom: 50px; /* Adjust this value down (e.g., 20px) if 50px is still too much */
}

/* --- Title Styling --- */
.main-title {
    font-family: 'Metal Mania', cursive;
    
    /* Ensure the font is large and white to glow */
    font-size: 4em; 
    color: #ffffff; 
    /* Add a subtle text shadow/glow if needed */
    margin-bottom: 110px;
    letter-spacing: 5px;
}

/* --- Image Styling --- */
.image-wrapper {
    margin-bottom: 10px;
}

.main-image {
    max-width: 40%; 
    height: 40%;
}

.regret-text{
    font-family: 'Metal Mania', cursive;
    
    /* *** FINAL INCREASED SIZE *** */
    font-size:3em;
    
    font-weight: bold;
    color: #ffffff; 
    margin-top: 60px; 
    margin-bottom: 20px; 
    text-align: center;
    width: 100%; 
}

/* --- Links/Buttons Styling --- */
.links-container {
    margin-top: 0;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;
    gap: 15px; /* Spacing between button and social links */
}

/* --- 1. The Primary Green Button Style (Replicating "its a fwog" look) --- */
.primary-cta-button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    color: #ffffff; /* White text */
    font-weight: bold;
    font-size: 1.1em;
    font-family: sans-serif; /* Use a cleaner font for the button text */
    
    /* Green background and strong border/shadow */
    background-color: #4CAF50; /* Eerie Green */
    border-radius: 20px; /* Highly rounded corners */
    border: 2px solid #000000; /* Dark border for separation */
    box-shadow: 0 4px 0 0 #222222; /* Drop shadow for depth */
    
    transition: all 0.1s ease;
}

.primary-cta-button:hover {
    transform: translateY(-1px); /* Slight lift on hover */
    box-shadow: 0 5px 0 0 #222222;
}

/* --- 2. Social Links (Icons Only) Styling --- */
/* --- Social Links (Icons Only) Styling --- */
.social-links {
    display: flex;
    gap: 30px; 
    margin-top: 20px;
}

.social-link {
    color: #ffffff; 
    font-size: 3em; /* Sets size for Telegram icon */
    transition: color 0.2s;
    display: inline-block; 
    /* NEW: Ensures all link content is vertically aligned */
    vertical-align: top; 
}

.social-link:hover {
    /* Green hover effect applies to the Telegram icon */
    color: #f3f7f3; 
}


/* --- Custom Image Styling for X Logo --- */
.custom-social-icon {
 /* *** FIXED: Use EM unit for consistent sizing relative to surrounding text *** */
    height: 0.9em; /* Set to 1.1em for visual balance (adjust slightly if needed) */
    width: auto;
    
    vertical-align: middle; 
    
    /* Fine-tuning baseline */
    margin-bottom: -0.1em;
    margin-right: -20px;
    
    object-fit: contain; 
    transition: opacity 0.2s ease;
}

.tg-social-icon {
    /* Set a precise, visually balanced size */
    height: 1.6em; 
    width: auto;
    
    /* NEW: Use vertical-align to fine-tune centering */
    vertical-align: middle; 
    
    /* **NEW FIX**: Pulls the icon up by 2 pixels */
    position: relative;
    top: -8.5px; 

    /* NEW: Use a small negative margin to pull it slightly closer to the baseline if needed */
    margin-bottom: -0.01em;
    
    /* Ensure the icon is not stretched */
    object-fit: contain; 
    
    transition: opacity 0.2s ease;
}

/* Ensure the hover effect still works */
.social-link:hover .custom-social-icon {
    opacity: 0.7; 
}

.social-link:hover .tg-social-icon {
    opacity: 0.7; 
}


.ca-address {
    font-family: 'Metal Mania', cursive; /* Use the bold font */
    
    /* *** INCREASED FONT SIZE *** */
    font-size: 2em; 
    
    color: #ffffff;
    margin-top: 15px; /* Spacing above */
    margin-bottom: 5px;
    word-break: break-all; /* Ensures it wraps correctly on small screens */
}

/* Styling for the GOMO button image */
.gomo-button-img {
    /* NEW: Significantly reduce the maximum width */
    max-width: 30%; /* Start with 40% - this will make it about half the size */
    height: auto;

    display: block;
    margin: 0 auto; 
}

/* --- Mobile Responsiveness --- */
@media (max-width: 600px) {
    /* ... existing mobile rules (main-title, ca-address) ... */
    .main-image {
        /* Customize size here. 75% will make it large on mobile. */
        max-width: 75%; 
    }

    /* NEW FIX: Increase the button size specifically for mobile screens */
    .gomo-button-img {
        /* Set to 60% or 70% of the available width on small screens */
        max-width: 65%; 
        /* Ensure max-width is used to prevent it from getting too large */
    }

    /* You may also want to slightly reduce the size of the social icons on mobile */
    .social-link {
        font-size: 2.5em; /* Example: Reduce from 3em to 2.5em */
    }

    .ca-address {
        font-size: 1.5em; /* Reduce from global 2em (or whatever size you set) */
        /* Ensure bottom margin is small for close spacing to social icons */
        margin-bottom: 20px;
    }
}