/* =========================================================
   ABOUT PAGE CSS
   This version is built to match your mockup closely.
   ========================================================= */


/* =========================
   RESET
   Removes default browser spacing
   ========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================
   BODY
   Sets the overall page color and default text color
   ========================= */
body {
    background-color: #B03737; /* overall red background */
    color: #FFFFFF; /* default text color */
    font-family: "Inter", Arial, sans-serif;
}


/* =========================
   WRAPPER
   # is used because wrapper is an ID and should only appear once
   ========================= */
#wrapper {
    display: flex;
    width: 1471px; /* fixed width to match your mockup */
    height: 918px; /* fixed height to match your mockup */
    flex-direction: column; /* stacks header, main, and footer vertically */
    justify-content: flex-start; /* starts content at the top */
    align-items: flex-start; /* lines content up from the left */
    background-color: #B03737;
}


/* =========================
   HEADER
   Top bright red section
   ========================= */
header {
    width: 1471px;
    height: 248px;
    background-color: #BF2424;
    padding-top: 50px;
    padding-left: 32px;
}


/* =========================
   HEADER ROW
   Uses flexbox to keep name on left and nav on right
   ========================= */
.header-row {
    display: flex;
    align-items: center;
}


/* =========================
   SITE TITLE
   Large white name on the left
   ========================= */
.site-title {
    color: #FFF;
    font-family: "Jomolhari", serif;
    font-size: 85px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-right: 80px; /* space between your name and nav box */
}


/* =========================
   NAV BOX
   Light pink rectangle behind navigation links
   ========================= */
.nav-box {
    width: 975px;
    height: 146px;
    background-color: #E1ADAD;
    display: flex;
    align-items: center; /* centers nav vertically inside pink box */
    padding-left: 36px;
}


/* =========================
   NAV
   Lays out links in one row
   ========================= */
nav {
    display: flex;
    align-items: center;
    gap: 52px; /* space between links */
}


/* =========================
   NAV LINKS
   Default black navigation links
   ========================= */
nav a {
    color: #000000;
    text-decoration: none; /* removes underline */
    font-family: "Inter", Arial, sans-serif;
    font-size: 29px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


/* =========================
   ACTIVE LINK
   Makes About Me white since it is the current page
   ========================= */
nav a.active {
    color: #FFFFFF;
}


/* =========================
   MAIN
   Large darker red content section
   ========================= */
main {
    width: 1471px;
    height: 549px;
    background-color: #A83838;
    padding-top: 22px;
    padding-left: 32px;
}


/* =========================
   ABOUT LAYOUT
   Creates two columns: text left, image right
   ========================= */
.about-layout {
    display: flex;
    align-items: flex-start;
}


/* =========================
   ABOUT TEXT
   Left column for title and paragraph
   ========================= */
.about-text {
    width: 700px;
}


/* =========================
   PAGE TITLE
   About Me heading
   ========================= */
.page-title {
    color: #FFF;
    font-family: "Inter", Arial, sans-serif;
    font-size: 57px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 72px;
}


/* =========================
   PARAGRAPH
   Styles your about me paragraph
   ========================= */
.about-text p {
    color: #FFF;
    font-family: "Inter", Arial, sans-serif;
    font-size: 31px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    width: 600px;
    margin-left: 18px;
}


/* =========================
   ABOUT IMAGE
   Right column image placement
   ========================= */
.about-image {
    margin-left: 115px;
    margin-top: 12px;
}


/* =========================
   IMAGE
   Sets exact image size like your mockup
   ========================= */
.about-image img {
    width: 394px;
    height: 526px;
    object-fit: cover; /* keeps image filled nicely */
    display: block;
}


/* =========================
   FOOTER
   Bottom muted pink block
   ========================= */
footer {
    width: 1471px;
    height: 121px;
    background-color: #A26767;
}