/* GENERAL */
body {
    margin: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background: #000;
    color: #fff;
}

a {
    color: white;
    text-decoration: none;
}

/* HEADER */
/* HEADER */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
}

/* Logo Text */
.logo-text {
    font-family: 'Bebas Neue', sans-serif;  /* only logo text */
    font-size: 30px;                        /* larger size */
    letter-spacing: 2px;
    font-weight: 400;                        /* Bebas Neue is mostly regular weight */
    color: white;
}

/* MENU LINKS */
nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

nav a {
    font-size: 12px;       /* adjust as needed */
    opacity: 0.85;
    display: flex;
    font-weight: 550;
    align-items: center;
    font-family: inherit;  /* keeps menu text default, not Bebas Neue */
}

nav a:hover {
    opacity: 0.5;
}

/* SMALL LOGOS IN MENU */
.menu-logo img {
    width: 20px;       /* smaller size */
    height: 20px;
    margin-left: 5px;  /* slight spacing */
}


nav a:hover {
    opacity: 0.5;
}

/* TOP SECTION LAYOUT */
.top-section {
    display: flex;
    gap: 25px;
    padding: 40px;
    position: relative;
}

/* PROFILE IMAGE */
.left-img img {
    width: 260px;
    border-radius: 10px;
    margin-top: 20px;
}

/* IMAGE LINKS (AUTHOR + HUSTLING) */
.cards {
    display: flex;
    gap: 25px;
    position: relative;
}

/* BOTH IMAGES ARE JUST IMAGES (NO TEXT OVERLAY) */
.img-link img {
    width: 210px; /* Match your screenshot proportions */
    border-radius: 4px;
    display: block;
}

/* AUTHOR OVERLAPS PROFILE IMAGE */
.author-img {
    margin-left: -60px; /* overlap */
    margin-top: 40px;
}

/* HUSTLING IMAGE POSITIONING */
.hustling-img {
    margin-top: 40px;
}

/* GALLERY */
.gallery {
    padding: 40px;
    background: #ffffff;
    display: grid;

    /* Slightly larger columns for bigger images */
    grid-template-columns: repeat(2, minmax(10px, 270px));

    justify-content: center;   /* keeps grid centered */
    gap: 10px;                 /* equal spacing in all directions */
}

/* Centered images */
.gallery img {
    width: 100%;
    max-width: 270px;
    display: block;
    margin: 0 auto;
    transition: transform 0.25s ease;
}

.gallery img:hover {
    transform: scale(1.03);
}




/* FOOTER */
footer {
    text-align: center;
    padding: 40px 20px;
}

.footer-links a {
    margin: 0 10px;
    font-size: 12px;
    opacity: 0.8;
    font-weight: 550; /* stronger font for links */
}

footer p {
    font-size: 12px;
    opacity: 0.8;
    margin: 10px 0;
}

/* FOOTER LOGOS */
.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;  /* smaller spacing between logos */
    margin-top: 10px;
}

.footer-logos img {
    width: 24px;     /* small logo size */
    height: 24px;
}



.fade-in {
    opacity: 0;
    animation: fadeInOnly 1.2s ease forwards;
}

/* This animation ONLY affects opacity, so parallax works */
@keyframes fadeInOnly {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.left-img img {
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
}

/* PFP fade-in */
.pfp-img.fade-in {
    opacity: 0;
    animation: fadeInOnly 1.5s ease forwards; /* slightly longer for smooth intro */
}

/* Parallax transform for PFP */
.pfp-img {
    transition: transform 0.2s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}



/* ================= MOBILE RESPONSIVE (iPhone 14 / small devices) ================= */
/* ================= MOBILE RESPONSIVE (iPhone 14 / small devices) ================= */
@media (max-width: 600px) {

    /* HEADER */
    header {
        flex-direction: column;
        align-items: center;
        padding: 15px 10px;
        gap: 10px;
    }

    .logo-text {
        font-size: 22px;
    }

    nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    nav a {
        font-size: 11px;
    }

    .menu-logo img {
        width: 16px;
        height: 16px;
    }

    /* TOP SECTION */
    .top-section {
        flex-direction: column;
        align-items: center;   /* centers PFP + cards */
        gap: 20px;
        padding: 20px 10px;
    }

    /* PFP image */
    .left-img img {
        width: 180px;           /* smaller for mobile */
        margin: 0 auto;
    }

    /* Cards container (Author + Hustling) */
    .cards {
        flex-direction: column;
        align-items: center;    /* center images */
        gap: 15px;
        margin-left: 0 !important;
    }

    /* Author & Hustling images */
    .img-link img {
        width: 180px;
        margin: 0 auto;
    }

    .author-img, .hustling-img {
        margin-left: 0;
        margin-top: 0;
    }

    /* Disable parallax on very small screens */
    .pfp-img, .img-link img {
        transform: rotateX(0deg) rotateY(0deg) scale(1);
    }

    /* GALLERY */
    .gallery {
        padding: 20px 10px;
        grid-template-columns: 1fr;  /* single column */
        gap: 10px;
    }

    .gallery img {
        max-width: 100%;
    }

    /* FOOTER */
    footer {
        padding: 30px 15px;
    }

    .footer-links a {
        font-size: 11px;
        margin: 0 5px;
    }

    footer p {
        font-size: 11px;
    }

    .footer-logos img {
        width: 20px;
        height: 20px;
    }
}