@import 'style.css';

/* full-viewport centering */
html,
body,
main,
nav,
footer {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* old Edge */
    user-select: none;
    /* modern browsers */
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

}

body {
    margin: 0;
    padding: 0;
    background: var(--light-pink);
    /* light pink from your palette */
    color: var(--royal-green);
    /* royal green for contrast */
    min-height: 100vh;
    position: relative;
}

/* container holding the bio */
.bio-container {
    max-width: 700px;
    padding: 40px;
    background: var(--honey-yellow);
    /* honey yellow */
    border-radius: 24px;
    box-shadow: 0 0 40px rgba(222, 17, 119, 0.25);
    /* soft hot-pink glow */
    text-align: left;
    z-index: 10;
}

/* typography */
.bio-container h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--hot-pink);
    /* hot pink */
    text-align: center;
}

.bio-container p {
    line-height: 1.65;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.center-wrapper {
    min-height: 100vh;
    /* desktop fallback */
    min-height: 100svh;
    /* mobile correct vh */
    display: flex;
    justify-content: center;
    align-items: center;
    /* desktop centered */
    padding: 40px 16px;
    box-sizing: border-box;
}

/* ---------- NAV BAR ---------- */

.top-nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px 0;
    background: rgba(248, 212, 234, 0.6);
    /* translucent light-pink */
    backdrop-filter: blur(10px);
    z-index: 30;
}

.top-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;

    display: flex;
    justify-content: center;
    gap: 40px;
}

.top-nav a {
    text-decoration: none;
    color: var(--royal-green);
    /* royal green */
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;

    position: relative;
    transition: color 0.2s ease;
}

/* hot-pink underline hover effect */
.top-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: var(--hot-pink);
    /* hot pink */
    transition: width 0.25s ease;
}

.top-nav a:hover {
    color: var(--hot-pink);
    /* hot pink */
}

.top-nav a:hover::after {
    width: 100%;
}


/* ---------- FOOTER BAR ---------- */

.site-footer {
    width: 100%;
    position: fixed;
    /* pinned like nav */
    bottom: 0;
    left: 0;
    padding: 16px 0;
    background: rgba(187, 215, 90, 0.6);
    /* light green translucent */
    backdrop-filter: blur(10px);
    z-index: 30;

    text-align: center;
    font-size: 0.9rem;
}

.site-footer a {
    color: #de1177;
    /* hot pink */
    text-decoration: none;
    font-weight: 600;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
    .top-nav ul {
        gap: 20px;
        font-size: 0.95rem;
    }

    .center-wrapper {
        align-items: flex-start;
        /* top aligned */
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .bio-container {
        width: 100%;
        max-width: 700px;
    }

    .site-footer {
        padding: 20px 0;
    }
}