/* This controls the whole page background and main text */
body {
    background-color: #222222; /* A very dark gray, from the photo's shadows */
    color: #f0f0f0; /* A soft white for easy reading */
    font-family: sans-serif; /* A clean, simple font */
    margin: 0; /* Removes default white border around the page */
}

/* === 1. "HERO" SECTION STYLES === */
.hero {
    text-align: center; /* Centers the headline */
    padding-top: 40px; /* Adds space above the photo */
    padding-bottom: 20px; /* Adds space below the headline */
}

.hero img {
    width: 200px; /* Makes the photo a fixed width */
    height: 200px; /* Makes the photo a fixed height */
    object-fit: cover; /* Prevents the photo from stretching */
    border-radius: 50%; /* This makes the photo a circle */
    border: 4px solid #f0f0f0; /* Adds a simple white border */
}

.hero h1 {
    font-size: 2.5em; /* Makes the headline text larger */
    margin-top: 15px; /* Adds space between photo and headline */
    letter-spacing: 2px; /* Spreads the letters out a bit */
}


/* === 2. "CONTENT" SECTION === */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    max-width: 1200px; /* Adds a max width for very large screens */
    margin: 0 auto; /* Centers the columns on the page */
}

.column {
    background-color: #333333; /* A dark box, slightly lighter than the background */
    padding: 20px;
    border-radius: 8px;
}

.column ul {
    list-style-type: none; /* This removes the black bullet points */
    padding-left: 0;
}

.column:first-child h2 {
    color: #FF8C00; /* A fiery dark orange */
}

.column:last-child h2 {
    color: #00BFFF; /* An icy blue */
}


/* === 3. NEW "LINKS" SECTION STYLES === */
.links-container {
    display: grid; /* We use grid again to make a simple, single column */
    gap: 15px; /* Space between the buttons */
    padding: 20px;
    max-width: 800px; /* Makes the buttons wide, but not "full-screen" */
    margin: 20px auto 60px auto; /* Centers the button list on the page */
}

/* This is the main "Linktree" button style */
.button {
    display: block; /* Makes the link fill the box */
    background-color: #333333; /* Same color as the HEADS/TAILS boxes */
    color: #f0f0f0; /* Same soft white text */
    text-decoration: none; /* Removes the underline from links */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border: 2px solid #555; /* A subtle border */
    cursor: pointer; /* Makes the mouse turn into a "hand" */
    
    /* This adds a simple "grow" effect when you hover over it */
    transition: transform 0.2s ease-out;
}

/* This makes the button "grow" slightly on hover */
.button:hover {
    transform: scale(1.02);
    background-color: #444; /* Slightly lighter when you hover */
}

/* This targets the private buttons to give them a special look */
.private-button {
    /* We can add a "lock" icon or special color here later */
    /* For now, we'll make the border match the HEADS color */
    border-color: #FF8C00;
}