* {
    margin: 0; 
    padding: 0;
}


#header-text{
color: #FFF;
text-align: center;
font-family: Snell Roundhand;
font-size: 80px;
font-style: normal;
font-weight: 400;
line-height: normal;
}


#header-text2{
color: #FFF;
text-align: center;
font-family: Optima;
font-size: 50px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.nav-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}

#home-text,
#about-text,
#gallery-text,
#media-text,
#links-text {
    color: #FFF;
    text-align: center;
    font-family: "Snell Roundhand", cursive;
    font-size: 30px;
    width: fit-content;
    margin: 0 auto;
}

/* Polished nav link styling */
#home-text,
#about-text,
#gallery-text,
#media-text,
#links-text {
    padding: 6px 12px;                 /* adds breathing room */
    border-radius: 8px;                /* soft rounded corners */
    transition: all 0.25s ease;        /* smooth animation */
    cursor: pointer;                   /* feels clickable */
}

/* Hover effect */
#home-text:hover,
#about-text:hover,
#gallery-text:hover,
#media-text:hover,
#links-text:hover {
    background-color: rgba(255, 255, 255, 0.18);  /* soft glow */
    transform: scale(1.08);                       /* gentle pop */
}



/* HEADER */
header {
    background-color: #612727;
    height: 225px;
    width: 100%;   /* FIXED: no more 1470px */
}

/* BACKGROUND */
body {
    background-image: url(../_images/book\ 2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
}

/* Container that holds both headings */
.home-overlap {
    position: relative;
    height: 200px;   /* controls how much vertical space the text can move in */
}

/* Top text layer */
#home-body {
    position: absolute;
    top: 40px;              /* <-- moves text down */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Snell Roundhand;
    font-size: 124px;
    font-weight: 450;
    line-height: 1.2;
    color: white;
    white-space: nowrap;
    z-index: 2;
}

/* Bottom text layer (shadow color) */
#home-body2 {
    position: absolute;
    top: 40px;              /* <-- must match #home-body to stay overlapped */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Snell Roundhand;
    font-size: 127px;
    font-weight: 500;
    line-height: 1.2;
    color: #612727;
    white-space: nowrap;
    z-index: 1;
}


/* PAGE LAYOUT FOR FOOTER */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.page-container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#home-image1 {
    position: absolute;
    top: 500px;
    left: 50px;
}
#home-image2 {
    position: absolute;
    top: 470px;
    left: 1125px;
}
#home-image3 {
    position: absolute;
    top: 492px;
    left: 40px;
}
#home-image4 {
    position: absolute;
    top: 460px;
    left: 1115px;
}

.about-wrapper {
    position: relative;
    width: 100%;
    height: 400px;   /* controls how far the footer sits */
    margin-bottom: 0; /* do NOT push the footer manually */
}

#about-me-text {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 40px;
    font-weight: 300;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;

    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

#about-square1 {
    position: absolute;
    top: 660px; /* sits below your text */
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: 280px;
    z-index: 0;
}
#about-square2 {
     position: absolute;
    top: 600px; /* sits below your text */
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 400px;
    z-index: 0;
}

#about-image3 {
    position: absolute;
    top: 675px; /* sits below your text */
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 250px;
    z-index: 0;
}

#resume-text {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 12px 20px;
    width: fit-content;
    margin: 20px auto;
    border-radius: 10px;
    transition: background-color 0.25s ease;
}

#resume-text:hover {
    background-color: #612727;
}

#resume-text a {
    color: #FFF;
    font-size: 28px;
    text-decoration: none;
    font-family: Imprima;
}


#resume-text {
    background-color: rgba(255, 255, 255, 0.15); /* soft rectangle */
    padding: 12px 20px;
    width: fit-content;
    margin: 20px auto; /* centers the rectangle */
    border-radius: 10px;
    transition: all 0.25s ease;
}

#resume-text a {
    color: #FFF;
    font-size: 28px;
    text-decoration: none;
    font-family: Imprima;
}

/* Hover effect */
#resume-text:hover {
    background-color: #612727; /* brighter glow */
    transform: scale(1.06); /* gentle pop */
}

#gallery-text1 {
     position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 40px;
    font-weight: 300;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;

    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

.gallery-wrapper {
    position: relative;
    width: 100%;
    height: 100px;   /* controls how far the footer sits */
    margin-bottom: 0; /* do NOT push the footer manually */
}
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 photos per row */
    gap: 40px; /* space between photos */
    width: 90%;
    max-width: 1200px;
    margin: 0 auto; /* centers the grid */
    padding: 40px 0;
}


.photo-grid a {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    padding: 10px;        /* smaller padding */
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.25s ease;
}

.photo-grid a:hover {
    transform: scale(1.03); /* gentle pop on hover */
}

.photo-grid img {
    width: 100%;        /* makes images scale nicely */
    height: auto;
    border-radius: 8px; /* optional: round the image corners */
}

.media-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 80px; /* gives space for the video without stretching the page */
}

/* Centered Title */
#media-text1 {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 40px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Centered Video */
.media-wrapper iframe {
    position: absolute;
    top: 160px; /* adjust this number to move video up/down */
    left: 50%;
    transform: translateX(-50%);
    width: 560px;
    height: 315px;
    border: none;
}

.links-wrapper {
    position: relative;
    width: 100%;
    height: 0px; /* gives room so footer moves up */
}


/* Subtitle */
#links-subtitle {
    position: absolute;
    top: 50px; /* moved up since title is gone */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 50px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Each link line */
.link-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Position each line individually */
.links-wrapper .link-line:nth-child(2) { top: 200px; } /* first link */
.links-wrapper .link-line:nth-child(3) { top: 250px; } /* second link */
.links-wrapper .link-line:nth-child(4) { top: 300px; } /* third link */

/* Link styling */
.link-line a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.25s ease;
}

.link-line a:hover {
    background-color: #612727;
    color: #ffffff;
    transform: scale(1.05);
}


.gallery-photo-1-wrapper {
    position: relative;
    width: 100%;
    height: 900px; /* adjust to move footer up/down */
}

/* First line */
#gallery-photo-1-text1 {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 32px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Second line */
#gallery-photo-1-text2 {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Third line */
#gallery-photo-1-text3 {
    position: absolute;
    top: 155px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Photo */
#gallery-photo-1-img {
    position: absolute;
    top: 230px; /* adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

#gallery-photo-1-text1 a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s ease;
}

#gallery-photo-1-text1 a:hover {
    text-decoration: underline;
    transform: scale(1.05);
}

.gallery-photo-2-wrapper {
    position: relative;
    width: 100%;
    height: 1000px; /* adjust if needed */
}

/* First line */
#gallery-photo-2-text1 {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 32px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Second line */
#gallery-photo-2-text2 {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Third line */
#gallery-photo-2-text3 {
    position: absolute;
    top: 155px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Photo */
#gallery-photo-2-img {
    position: absolute;
    top: 230px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Link styling */
#gallery-photo-2-text1 a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s ease;
}

#gallery-photo-2-text1 a:hover {
    text-decoration: underline;
    transform: scale(1.05);
}
.gallery-photo-3-wrapper {
    position: relative;
    width: 100%;
    height: 900px; /* adjust if needed */
}

/* First line */
#gallery-photo-3-text1 {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 32px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Second line */
#gallery-photo-3-text2 {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Third line */
#gallery-photo-3-text3 {
    position: absolute;
    top: 155px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Photo */
#gallery-photo-3-img {
    position: absolute;
    top: 230px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Link styling */
#gallery-photo-3-text1 a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s ease;
}

#gallery-photo-3-text1 a:hover {
    text-decoration: underline;
    transform: scale(1.05);
}
/* GALLERY PHOTO 4 — FULL, FIXED, CLEAN VERSION */
.gallery-photo-4-wrapper {
    position: relative;
    width: 100%;
    height: 750px;   /* this is the correct height so the footer sits properly */
}

/* First line */
#gallery-photo-4-text1 {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 32px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Second line */
#gallery-photo-4-text2 {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Third line */
#gallery-photo-4-text3 {
    position: absolute;
    top: 155px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Photo */
#gallery-photo-4-img {
    position: absolute;
    top: 230px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Link styling */
#gallery-photo-4-text1 a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s ease;
}

#gallery-photo-4-text1 a:hover {
    text-decoration: underline;
    transform: scale(1.05);
}

.gallery-photo-5-wrapper {
    position: relative;
    width: 100%;
    height: 700px; /* adjust if needed */
}

/* First line */
#gallery-photo-5-text1 {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 32px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Second line */
#gallery-photo-5-text2 {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Third line */
#gallery-photo-5-text3 {
    position: absolute;
    top: 155px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Photo */
#gallery-photo-5-img {
    position: absolute;
    top: 230px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Link styling */
#gallery-photo-5-text1 a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s ease;
}

#gallery-photo-5-text1 a:hover {
    text-decoration: underline;
    transform: scale(1.05);
}
.gallery-photo-6-wrapper {
    position: relative;
    width: 100%;
    height: 700px; /* adjust if needed */
}

/* First line */
#gallery-photo-6-text1 {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 32px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Second line */
#gallery-photo-6-text2 {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Third line */
#gallery-photo-6-text3 {
    position: absolute;
    top: 155px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: Imprima;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.7),
        4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Photo */
#gallery-photo-6-img {
    position: absolute;
    top: 230px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Link styling */
#gallery-photo-6-text1 a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s ease;
}

#gallery-photo-6-text1 a:hover {
    text-decoration: underline;
    transform: scale(1.05);
}


/* FOOTER */
footer {
    margin-top: auto;      /* pushes footer to bottom */
    background-color: #612727;
    height: 120px;
    width: 100%;
    color: white;
    text-align: center;
    padding-top: 40px;
    font-size: 20px;
}

#footer-text {
    color: #FFF;
text-align: center;
font-family: Imprima;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.social-icons {
    display: flex;
    justify-content: center;   /* centers them */
    align-items: center;       /* vertically aligns them */
    gap: 20px;                 /* space between icons */
}
.social-icons img {
    transition: transform 0.2s ease;
}

.social-icons img:hover {
    transform: scale(1.1);
}