/* =========================
   GLOBAL STYLES
   These apply to the entire page
   ========================= */

/* Reset some default browser spacing */
body {
    margin: 0; /* removes default margin */
    padding: 0; /* removes default padding */
    font-family: Arial, sans-serif; /* sets a clean default font */
    font-style: bold;
    background-color: rgb(184,42,42); /* page background */
}

/* =========================
   WRAPPER
   Using # because it is an ID (only used once on the page)
   This keeps the same overall container size on every page
   ========================= */
#wrapper {
    width: 80%; /* controls overall page width */
    margin: 0 auto; /* centers the wrapper horizontally */
    background-color: white; /* base background behind sections */
    padding: 0; /* removes extra inside spacing so sections line up cleanly */
}

/* =========================
   HEADER
   Keeps your name on the left and nav on the right
   ========================= */
header {
    background-color: rgb(184,42,42); /* red header */
    color: white; /* white text */
    padding: 30px;

    display: flex; /* puts name + nav side by side */
    align-items: center; /* lines them up vertically */
    justify-content: space-between; /* pushes nav to the right */
    gap: 30px; /* space between title and nav */
}

/* Main title in header */
header h1 {
    margin: 0; /* removes extra spacing */
    font-family: "Jomolhari", serif; /* your title font */
    font-size: 85px; /* large name text */
    font-weight: 400;
    color: white;
    white-space: nowrap; /* keeps your name on one line */
}

/* =========================
   NAVIGATION
   Large pink box across the nav
   ========================= */
nav {
    margin-top: 0; /* keeps nav aligned with name */
    background-color: rgb(243,182,182); /* pink nav box */
    padding: 35px 40px; /* makes the pink box larger */
    display: flex; /* puts links in a row */
    align-items: center;
    justify-content: space-between;
    gap: 30px; /* spacing between links */
    flex-wrap: wrap; /* lets links wrap if screen gets smaller */
}

/* Style all links inside nav */
nav a {
    color: black; /* black nav text */
    text-decoration: none; /* removes underline */
    font-weight: bold;
    font-size: 20px;
    background-color: transparent; /* removes individual pink boxes */
}

/* Optional active/current page style */
nav a.active {
    color: white;
}

/* Hover effect */
nav a:hover {
    text-decoration: underline; /* adds underline on hover */
}

/* =========================
   MAIN CONTENT AREA
   This keeps section and aside next to each other
   ========================= */
main {
    margin-top: 0;
    background-color: rgb(157, 57, 57);
    display: flex; /* puts section and aside side by side */
    padding: 30px;
    gap: 30px; /* space between left and right columns */
}

/* =========================
   SECTION (LEFT SIDE)
   ========================= */
section {
    flex: 1; /* left side takes up available space */
    padding: 0;
    background-color: rgb(157, 57, 57);
    color: white;
}

/* Main page heading inside section */
section h1 {
    margin-top: 0;
    font-size: 60px;
    color: white;
    font-family: Inter, sans-serif;
}

/* =========================
   ASIDE (RIGHT SIDE)
   ========================= */
aside {
    flex: 1; /* right side same width as left by default */
    padding: 0;
    background-color: rgb(157, 57, 57);
    color: white;
    margin-left: 0;
}

/* Paragraph styling inside aside */
aside p {
    font-size: 22px;
    line-height: 1.4;
    font-weight: bold;
    color: white;
}

/* Images inside aside */
aside img {
    max-width: 100%; /* keeps image inside container */
    height: auto; /* keeps image proportions correct */
    display: block;
    margin-top: 20px;
}

/* =========================
   FOOTER
   ========================= */
footer {
    margin-top: 0;
    padding: 40px;
    background-color: rgb(160, 108, 108);
    color: white;
    text-align: center;
}

aside a {
    color: white;
}
aside a {
    color: white; /* makes links visible on red background */
    text-decoration: none;
}

aside a:hover {
    text-decoration: underline;
}
/* =========================
   RESUME WHITE BOX (UPDATED)
   ========================= */

.resume-box {
    background-color: white; /* white box */
    padding: 30px;
    
    width: 70%;
    margin: 40px auto; /* centers it and adds space */

    position: relative; /* allows layering */
    z-index: 10; /* brings it to the front */

    border-radius: 5px; /* slight rounded edges */

    /* stronger shadow so it pops forward */
    box-shadow: 0px 8px 25px rgba(0,0,0,0.35);
}

/* image inside */
.resume-box img {
    width: 100%;
    height: auto;
}

/* PDF version */
.resume-box iframe {
    width: 100%;
    height: 650px;
    border: none;
    aside {
    position: relative;
    z-index: 1;
}

/* =========================
   CENTER RESUME
   ========================= */

aside {
    display: flex; /* turns aside into a flex container */
    justify-content: center; /* centers horizontally */
    align-items: center; /* centers vertically */
}

/* =========================
   MAIN LAYOUT FIX
   ========================= */

main {
    margin-top: 20px;
    background-color: rgb(157, 57, 57);

    display: flex; /* puts section + aside side by side */
}

/* =========================
   CONTACT FORM
   ========================= */

.contact-form {
    display: flex; /* stacks form items vertically */
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    gap: 12px; /* space between fields */
}

/* labels above each field */
.contact-form label {
    color: white;
    font-weight: bold;
    font-size: 18px;
}

/* input boxes and message box */
.contact-form input,
.contact-form textarea {
    padding: 12px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    font-family: Arial, sans-serif;
}

/* submit button */
.contact-form button {
    padding: 12px;
    font-size: 18px;
    font-weight: bold;
    background-color: rgb(243,182,182);
    color: black;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

/* button hover effect */
.contact-form button:hover {
    background-color: rgb(230,160,160);
}

/* =========================
   GALLERY GRID
   ========================= */

.gallery {
    display: grid; /* turns container into a grid */
    grid-template-columns: repeat(3, 1fr); /* 3 images per row */
    gap: 20px; /* space between images */
}

/* images */
.gallery img {
    width: 100%; /* fills each grid box */
    height: auto;
    display: block;
}

.gallery img {
    width: 100%;
    height: auto;
    border-radius: 6px; /* soft edges */
}
/* =========================
   GALLERY HORIZONTAL ROW
   ========================= */

.gallery {
    display: flex; /* puts images side by side */
    gap: 20px; /* space between images */
    overflow-x: auto; /* allows scrolling if too many images */
}

/* images */
.gallery img {
    height: 200px; /* keeps all images same height */
    width: auto; /* keeps proportions correct */
    display: block;
}
/* =========================
   PARAGRAPH FONT (HOME + ABOUT)
   ========================= */

section p {
    font-family: "Inter", Arial, sans-serif; /* uses Inter first */
}
}