/* 1. DEFINE VARIABLES AT THE TOP */
:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --border-color: #ffffff;
}

/* 2. OVERRIDE VARIABLES WHEN LIGHT-MODE IS ON BODY */
body.light-mode {
    --bg-color: #ffffff;
    --text-color: #000000;
    --border-color: #000000;
}

/* 3. APPLY VARIABLES TO ELEMENTS */
body {
    background-color: var(--bg-color) !important;
    color: var(--text-color);
    margin: 0;
}


/* Container to control margins around the section */
.container {
    max-width: 2000px;
    margin: 0 auto;       /* Centers the container horizontally */
    padding: 0 20px;      /* Prevents text from touching edge on mobile screens */
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
    flex-wrap: nowrap; /* Prevents jumping down */
    overflow: hidden;  /* Protects layout integrity on small screens */
    gap: 20px;
}

.myles-heading {
    font-family: 'Roboto', sans-serif;
    /* Adjusted fluid clamp range so [MYLES PERRY] fits on a single line on desktop screens */
    font-size: clamp(36px, 6.5vw, 130px); 
    letter-spacing: 0.01em; 
    line-height: 0.85;                   
    white-space: nowrap;                 /* Prevents "PERRY" from wrapping onto a second line */
    
    margin-top: 20px;                          
    margin-bottom: clamp(5px, 1vw, 15px);     
    margin-left: 0;
    margin-right: auto;
}


/* Container holding image and text side-by-side */
.content-row {
    display: flex;
    flex-wrap: nowrap;          /* Strictly forces side-by-side, prevents wrapping */
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

/* Image scaling with clamp */
.portfolio-image {
    flex: 0 0 auto;
    width: clamp(400px, 35vw, 800px);
    height: auto;
    margin-top: 5px;                  
    
    /* LEFT POSITIONING: Gives a crisp 20px gap off the left edge (matching your container padding) */
    margin-left: 20px;                /* Changed from 'auto' to 20px */
    margin-right: auto;               /* Pushes all remaining space toward the body text */
    
    border: 3.7px solid var(--border-color);
    box-sizing: border-box;
}

/* YOUR EXACT BODY TEXT STYLES - 100% UNTOUCHED */
.myles-body-text {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(12px, 1.2vw, 20px);
    margin: clamp(10px, 2vw, 20px) 0;
    text-align: justify;
    margin-left: auto;
    margin-top: 5px;
    margin-right: 20px;
    max-width: 730px;
    letter-spacing: 0.2em;
    font-weight: 700;
}

/* Button styles */
.nav-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 180px;
}

/* Inserts a backslash after every button except the last one */
.nav-buttons .nav-button:not(:last-child)::after {
    content: "\\";
    position: relative;
    left: 10px; /* Matches the gap distance */
    font-family: 'Roboto', sans-serif;
    font-size: clamp(14px, 1.2vw, 20px);
    pointer-events: none;
    color: var(--text-color); /* Swaps separator color in light/dark mode */
}

.nav-button {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(12px, 1.2vw, 20px);
    padding: 0px 0%;
    border: 0px solid;
    background-color: transparent;
    border-radius: 0px;
    cursor: pointer;
    letter-spacing: 0.1;
    font-weight: 700;
    color: var(--text-color); /* Swaps button text color in light/dark mode */
}

.nav-button:hover {
    opacity: 0.5;
}

/* Custom horizontal line style */
.divider-line {
    border: none;                             /* Removes default browser border */
    border-top: 2.7px solid var(--border-color); /* Pure solid color matching the active theme */
    width: 100%;                              /* Spans full width */
    margin-top: 20px;                         /* Spacing above the line */
    margin-bottom: 20px;                      /* Spacing below the line before body text */
    opacity: 1;                               /* Full crisp opacity */
}