/*
 * basbrands.nl
 * Deliberately small. The browser does most of the work.
 * Colours borrowed from my CV: dark blue name, blue headings.
 */

/* Let the browser pick light or dark colours from the visitor's settings.
   light-dark() picks the first value in light mode, the second in dark mode. */
:root {
    color-scheme: light dark;
    --name: light-dark(#1f3864, #a9c1ec);
    --heading: light-dark(#2f5496, #8fb0e8);
    --rule: light-dark(#4472c4, #6f95d8);
}

/* One readable column, Roboto, no frills. */
body {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1rem;
    font-family: Roboto, system-ui, sans-serif;
    line-height: 1.6;
}

/* The name with a thin line under it, like the top of the CV. */
h1 {
    color: var(--name);
    font-weight: 400;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--rule);
}

h2,
h3 {
    color: var(--heading);
    font-weight: 500;
}

/* Photo floats to the right on wider screens, sits on top on phones. */
.portrait {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (min-width: 30rem) {
    .portrait {
        float: right;
        margin: 0 0 1rem 1.5rem;
    }
}

/* Section links on one line. */
nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0;
    list-style: none;
}

/* Keep sections from wrapping around the floated photo. */
main {
    clear: both;
}

footer {
    margin-top: 3rem;
    border-top: 1px solid var(--rule);
}

/* A clear focus ring for keyboard users. */
:focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
}

/* Skip link: hidden until it receives keyboard focus. */
.skip-link {
    position: absolute;
    left: -999rem;
}

.skip-link:focus {
    position: static;
}