/* General Page Styling */
body {
    margin: 0;
    padding: 0;
    font-family: 'Georgia', serif; /* Matching the serif font in your design */
    background-color: #f2ede4; /* Light cream background for top/bottom */
    color: #333;
    line-height: 1.6;
}

#wrapper {
    width: 100%;
}

/* Header & Navigation */
header {
    text-align: center;
    padding: 40px 0 20px 0;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

nav a {
    text-decoration: none;
    color: #000;
    margin: 0 15px;
    font-weight: bold;
}

/* The Pink Content Section */
.about-container {
    background-color: #e9c7c7; /* The dusty pink color from your design */
    display: flex; /* This creates the side-by-side layout */
    justify-content: center;
    align-items: center;
    padding: 60px 10%; /* Adds space inside the pink box */
    gap: 50px; /* Space between the text and the image */
}

section {
    max-width: 500px; /* Keeps the text from getting too wide */
}

section h1 {
    font-size: 2.2rem;
    margin-top: 0;
}

/* Image Styling */
aside img {
    max-width: 400px; /* Adjust this to match your desired photo size */
    height: auto;
    display: block;
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 30px 0;
}


/* This targets the parent container */
.contact-grid {
    display: flex;           /* Enables the side-by-side layout */
    flex-direction: row;     /* Forces items to stay in a row */
    justify-content: center; /* Centers the group in the middle of the page */
    align-items: flex-end;   /* Aligns the bottom of the icons/text */
    gap: 150px;              /* Creates the wide gap seen in your design */
    width: 100%;
    margin-top: 100px;       /* Pushes the icons down from the "Contact" title */
}

/* This targets each individual column (Email and Phone) */
.contact-item {
    text-align: center;
    width: 300px;            /* Gives each item enough room to breathe */
}

.contact-icon {
    width: 100px;            /* Size of the envelope/phone icon */
    height: auto;
    margin-bottom: 10px;
}

.contact-line {
    border: 0;
    height: 3px;
    background-color: #d8a7a7; /* The darker pink line from your screenshot */
    width: 100%;               /* Spans the width of the contact-item */
    margin: 10px 0;
}



/* Centers the content inside the contact section */
.contact-section {
    width: 100%;
    text-align: center; /* This centers the H1 and any text not in a flexbox */
}

.contact-section h1 {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 40px; /* Space between "Contact" and the icons */
    /* Removed position: absolute so it stays in the center */
}

/* Updated grid to ensure it stays centered under the heading */
.contact-grid {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 150px;
    width: 100%;
}

Gallery 

/* --- NEW GALLERY STYLING --- */

/* 1. Tell the pink container to stack items instead of side-by-side */
.gallery-container {
    display: flex;
    flex-direction: column; /* Stacks the title on top of the photos */
    align-items: center;    /* Centers everything horizontally */
    width: 100%;
    padding: 60px 5%;
}

/* 2. Remove the 500px limit so the title can reach the middle */
.gallery-section {
    max-width: 100%; 
    width: 100%;
    text-align: center;
}

/* 3. Style the Title */
.gallery-section h1 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-align: center;
}

/* 4. Keep photos in a straight line, centered under the title */
.photo-grid {
    display: flex;
    justify-content: center; 
    gap: 30px; 
    flex-wrap: nowrap; /* Forces them to stay in a straight line */
}

.photo-grid img {
    width: 200px;
    height: 250px;
    object-fit: cover;
    border-radius: 4px;
}











Resume Page 

/* Container for the resume image and button */
.resume-display {
    text-align: center;
    margin-top: 20px;
}

/* Styling the image to look like a paper document */
.resume-display img {
    width: 100%;
    max-width: 800px; /* Adjust this to fit your screen nicely */
    height: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Adds that 'paper' shadow */
    border: 1px solid #ccc;
    background-color: white;
    padding: 10px;
}

/* The Download Button styling */
.download-container {
    margin-top: 30px;
}

.download-button {
    background-color: #333;
    color: white;
    padding: 15px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}

.download-button:hover {
    background-color: #d8a7a7; /* Turns pink on hover to match your theme */
}





/* Helpful Links Layout */
.links-section {
    width: 100%;
}

.links-section h1 {
    text-align:center; /* Keeps "My Links" on the left like your design */
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.icon-grid {
    display: flex;
    justify-content: center; /* Centers the row of icons */
    align-items: center;
    gap: 30px; /* Space between the icons */
    flex-wrap: wrap; /* Allows them to wrap if the screen is small */
}

/* Styling the square icons */
.icon-grid img {
    width: 150px; /* Size of the square icons from your design */
    height: 150px;
    border-radius: 20px; /* Gives them the rounded square look */
    transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}

/* Hover effect: the icon grows slightly when you mouse over it */
.icon-grid a:hover img {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}



/* Media Page Layout */
.media-section {
    width: 100%;
}

.media-section h1 {
    text-align: left;
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.media-grid {
    display: flex;
    justify-content: center;
    gap: 40px; /* Space between the two video boxes */
    width: 100%;
}

.media-placeholder {
    flex: 1;
    background-color: #d8a7a7; /* Darker pink color from your design */
    aspect-ratio: 16 / 9;      /* Keeps the boxes at a standard video shape */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.media-placeholder iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- Corrected Bottom Section --- */

/* Centering the Media Header */
.media-section h1 {
    text-align: center; 
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 40px; 
}