/* 
Recomendation css order
Position -> position, top, left, right, bottom, z-index
Display & Layout -> display, flex, grid, justify-content, align-items, gap
Size -> width, height, min*, max*
Spacing -> margin, padding
Border -> border, border-radius
Background -> background, background-color
Typography -> font, line-height, text-align, color
Visual Effects -> opacity, box-shadow, filter
Animation -> transition, transform, animation
*/

<style>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        padding: 5px;
    }

    :root {
        --font-hero-heading: "Playfair Display", Georgia, serif;

        --font-sub-heading: "Space Grotesk", system-ui, sans-serif;

        --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

        --font-code: "JetBrains Mono",
            "Cascadia Code",
            Consolas,
            "Courier New",
            monospace;
    }

    body {
        margin: 15px;

        border: solid;
        border-width: 3px;

        font-family: var(--font-body);
    }

    h1 {
        font-family: var(--font-hero-heading);
    }
    h2, h3, h4, h5, h6 {
        font-family: var(--font-sub-heading);
    }

    code, pre, kbd, samp{
        font-family: var(--font-code);
    }

    header {
        display: flex;
        flex-direction: column ;
        margin: 1rem;
        text-align: center;
    }

    nav {
        display: flex;
        flex-direction: column;
        align-items:center;
        gap: 1rem;
    }
    
    nav a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    nav img {
        width: 24px;
        height: auto;
    }

    .nav-list {
        display: flex;
        gap: 1rem;
        
        list-style: none;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    .nav-list li::after {
        content: "/";
        margin-left: 0.5rem;
    }
    
    .nav-list li:last-child::after {
        content: "";
    }
    
    .wrapper {
        display: flex;
        flex-direction: column ;
    }

    .wrapper > section {
        border-top: 3px solid;
    }

    .wrapper > section:last-child {
        border-bottom: 3px solid;
    }

    section h2, section h3, section p, section a {
        padding-left: 1rem;
    }

    .project-list {
        list-style: none;
        margin: 0;
        padding: 0;
        background: lightgrey;
    }

    .project-list li {
        border-top: 3px solid; 
        padding: 1rem;
    }

    .work-experience section {
        border-top: 3px solid; 
        padding: 1rem;
        background: lightgrey;
    }

    @media (min-width:768px) {
        header{
            justify-content: space-between;
        }

        nav{
            flex-direction: row;
            display: flex;
            justify-content: space-between;
        }

        .wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-block: solid;
            writing-mode: horizontal-tb;
            border-width: 3px;
        }
    
        .wrapper section {
            flex: 1;
        }

        .left {
            border-right: 3px solid;
        }
    }

</style>