body {
    font: 100%/1.5 system-ui;
    max-width: 100ch;
    margin-inline: max(1em, (100% - 100ch) / 2);
}

html {
    --color-accent: oklch(65% 50% 0);
    accent-color: var(--color-accent);
}

nav {
    display: flex;
    border-bottom: 1px solid oklch(80% 3% 200);
    margin-bottom: 1.5em;
}

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

nav a.current {
    border-bottom: 0.4em solid oklch(80% 3% 200);
    padding-bottom: 0.1em;
}

nav a:hover {
    border-bottom: 0.4em solid var(--color-accent);
    padding-bottom: 0.1em;
    background-color: oklch(from var(--color-accent) 95% 5% h);
}

/* Contact form */
form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
    max-width: 50ch;
}

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

form input,
form textarea,
form button {
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

form textarea {
    height: 8em;
}

form button {
    grid-column: 1 / -1;
}

/* Projects grid */
h1 {
    font-size: 400%;
}

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

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

.projects article {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
}

.projects article h2 {
    margin: 0;
}

.projects article img {
    width: 100%;
}


/* Resume */
header h1 {
    font-size: 200%;
    margin-bottom: 0.1em;
}

header p {
    margin-top: 0;
    color: oklch(50% 3% 200);
}

section {
    margin-bottom: 2em;
    border-top: 1px solid oklch(80% 3% 200);
    padding-top: 1em;
}

section h2 {
    font-size: 120%;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: 0.5em;
}

section article {
    margin-bottom: 1.5em;
}

section article header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5em;
}

section article header h3 {
    margin: 0;
    font-size: 105%;
}

section article header p {
    margin: 0;
    font-size: 90%;
    color: oklch(50% 3% 200);
}

section ul {
    margin-top: 0.5em;
    padding-left: 1.5em;
}

section ul li {
    margin-bottom: 0.3em;
}