/* 
   NOTE: this skeleton will help you go through steps 1-3 (some parts are missing for you to work on them!)
   For a better learning, we recomend you take individual parts of this skeleton step-by-step, so that you can see how 
   each part changes the webpage's style as explained in the course website.
*/



/* 
   :root is used to define global CSS variables (custom properties)
   These variables can be reused throughout the stylesheet to maintain consistency
   For examplem we can use :root to define colors
*/
:root {
    --color-accent: oklch(65% 50% 0); /* Primary accent color in OKLCH format */
    --border-gray: oklch(80% 3% 200); /* Gray for borders */
    /* ADD the rest of the color definitions here if needed! */
}

/* STEP 1: Prevent content from getting too wide */

/* 
    Here we can define the base style for the body element. We already added this in Lab 1, but let's complete it!
*/
body {
    font: 100%/1.5 system-ui; /* 100% font size, 1.5 line height, system font. Same as in lab 1 */
    max-width: 50rem; /* Limits width to 50 rems for better readability */
    /* Add here margin-inline */
    /* Add here padding around the body */
}


/* STEP 2: Styling the navigation bar */

/* 
   Step 2.1: Getting <ul> and <li> out of the way
   "display: contents" removes default styling while keeping semantic structure 
   (you do not need to make any changes here for step 2.1, but please take note of it!)
*/
nav ul, 
nav li {
    display: contents;
}

/* Step 2.2: Apply Flexbox to the navigation */
nav {
    display: flex; /* Turns nav into a flex container */

    /* You will need to continue writing here for step 2.3 */
}

/* Step 2.3: Style navigation links for each element <a> */
nav a {
    flex: 1; /* step 2.2 for each element to take the same space  */
    text-decoration: none; /* Remove the underline from the links by setting */
    /* Add here color */
    /* Add here text-align */
    /* Add here padding */
    /* Add here margin-bottom */
}
    /* NOTE: please make sure that in each index.html page you add class="current" to the current page*/
        /* For example:  <a href="index.html" class="current">Home</a> */ 

        nav a.current {
    /* Add here what your current page should look like at the navigation bar (highlight)*/
}

/* Before jumping to the next step, remember to complete wtep 2.3 by editing 'nav' */

/* 
   Step 2.4: Accent color and hover styles
*/
nav a:hover {
    /* Add here hover effects */
}


/*  STEP 3: Contact form layout */

/* Step 3.1: Integrate typography */
    /* (you do not need to make any changes here for step 2.1, but please take note of it!) */
input,
textarea,
button {
    font: inherit; /* Ensures form elements use the same font as the body */
}

/* Step 3.2: Top-down layout */

label, input, textarea, button { /* We define the elements in which we want this to take effect */
    display: block;
    /* add width here*/
    /* add box-sizing here */
}
label { /* We'll add the spacing between labels here */
    margin-block: 0.5rem;
}

/* Step 3.2: Grid layout */
 
    /* 
        Please work on grid layout here.
        NOTE: this will override what you did in the previous step! remember *Specificity*
    */



/* STEP 4: Style your projects page */





/* STEP 5: Style your CV */

    /* HINT: one thing you could do here is define an ID selector in your resume/index.html -> <section id="resume"> 
             and then you can generate a layour just for your resume
             For example:
    */
    #resume { /* Use this # as your ID selector */ 
        max-width: 50rem;
        /* ... */ 
    }