html {
    --color-accent: oklch(40% 50% 200);
    accent-color: var(--color-accent);
    color-scheme: light dark;
}

body {
    /* Set line height to 1.5 times the font size
       and use the OS’s UI font as the website font
    */
    font: 100%/1.5 system-ui;
    max-width: 100ch;
    margin-inline: auto;
    padding: 2ch;
}

h1 {
    font-size: 400%;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
}

img {
    max-width: 100%;
}

label.color-scheme {
    position: absolute;
    font-size: 70%;
    top: 1em;
    right: 1em;
    * {
        font: inherit;
    }
}

nav {
    --border-color: oklch(50% 10% 200 / 40%); /* uses semi-transparency to work in both light and dark mode*/
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1em;

    ul, li {
        display: contents;
    }

    a {
        flex: 1;
        text-decoration: none;
        color: inherit;
        text-align: center;
        padding: 0.5em;
    }

    a.current {
        border-bottom: 0.4em solid var(--border-color);
        padding-bottom: 0.1em;
    }

    a:hover {
        border-bottom: 0.4em solid var(--color-accent);
        padding-bottom: 0.1em;
        background-color: color-mix(in oklch, var(--color-accent), canvas 85%);
        /* background-color: oklch(from var(--color-accent) 95% 5% h); hard coded lightmode colour */
    }
}

/* block layout
input, textarea, button, label {
    font: inherit;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

label {
    margin-block: 1em 1em;
}
*/


form {
    display:grid;
    grid-template-columns: auto 1fr;
    gap: 1em;

    label {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
    }

    button {
        /* i'm having the button start from the second column because i like the look better 
        when it aligns with the input forms */
        grid-column: 2 / -1;
    }

    textarea {
        /* prevent textarea from resizing horizontally, which misaligns its edges from the grid*/
        resize: vertical;
    }

    * { /* all descendants of form */
        font: inherit;
    }
}

.projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    gap: 1em;

    article {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        
        h2 {
            margin: 0;
        }
    }
}

.resume-contact {
    ul {
        display: flex;
        list-style-type: none;
        li {
            flex: 1;
            text-align: center;
        }
    }
}

.resume section {
    display: grid;
    column-gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    
    :not(article){
        /* we only want the articles to display in a grid
        anything that's not an article should take up an entire row*/
        grid-column: 1/-1;
    }

    article {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
    }

    /* this modifies the way links look on the page */

    a, a:visited {
        text-decoration: none;
    }

    a:hover {
        font-style: italic;
    }

    :not(h3) > a, :not(h3) > a:visited {
        color: #3366CC;
    }

    header h3 {
        a {
            color: inherit;
        }
        
        a::after {
            content: " " url("images/external-link.svg");
        }
    }

    /* everything below here is meant to modify the margins to reduce wide spacings between rows */

    header {
        margin-top: 1em;
        * {
            /* removes all margin in child elements of the header
            this moves the h3 and p blocks closer together so they read more like a single heading*/
            margin: 0;
        }
    }
    
    h2 {
        margin-bottom: 0;
    }

    h3 {
        margin: 0;
    }
}

/* github stats formatting */
#profile-stats dl {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    dt {
        grid-row: 1;
        color: gray;
    }
    dd {
        font-size: 3em;
    }
}