:root {
    --color-bg: #ffffff;
    --color-text: #000000;
    --color-accent: #011257;
    --color-accent-alt: #011257;
    --color-accent-light: #243481;
    --color-border: #808000;
    --color-surface: #ffffff;
    --color-link: #243481;
    --color-link-visited: #512481;

    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 15px;
    --space-lg: 20px;

    --measure: 40em;
    --thumb-inline: 160px;
    --thumb-block: 100px;
    --icon-size: 16px;
    --logo-size: 60px;
}

body {
    padding: var(--space-md);
    line-height: 1.5;
    background-color: var(--color-bg);
    color: var(--color-text);
}

a {
    color: var(--color-link);

    &:visited {
        color: var(--color-link-visited);
    }
}

:is(h1, h2) {
    color: var(--color-accent);
}

h2 {
    border-block-end: 2px solid var(--color-border);
}

h3 {
    color: var(--color-accent-alt);
}

hr {
    border: none;
    border-block-start: 1px solid var(--color-border);
}

header {
    padding: var(--space-sm);
    background-color: var(--color-accent-alt);
    border: 2px outset var(--color-accent-light);

    a {

        &,
        &:visited {
            color: var(--color-bg);
        }
    }

    nav {
        display: inline;

        ul {
            display: inline;
            padding: 0;

            li {
                display: inline;
                margin-inline-end: var(--space-lg);
            }
        }
    }
}

.logo {
    display: inline-block;
    inline-size: var(--logo-size);
    margin-inline-end: var(--space-lg);
    vertical-align: middle;
    fill: var(--color-bg);

    svg {
        display: block;
        inline-size: 100%;
        block-size: auto;
    }
}

section {
    overflow: hidden;
    padding-block: var(--space-sm) var(--space-lg);
}

:is(p, ul) {
    max-inline-size: var(--measure);
}

.project {
    overflow: hidden;
    max-inline-size: var(--measure);
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);

    h3 {
        margin-block-start: 0;
    }

    p {
        max-inline-size: none;
    }

    img {
        inline-size: var(--thumb-inline);
        block-size: var(--thumb-block);
        float: inline-start;
        margin-block-end: var(--space-xs);
        margin-inline-end: var(--space-md);
        border: 1px solid var(--color-border);
        object-fit: cover;
    }
}

#contact {
    ul {
        list-style-type: none;
        padding: 0;

        li {
            padding-block: var(--space-xs);
        }
    }
}

.icon {
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
    margin-inline-end: var(--space-xs);
    vertical-align: middle;
    object-fit: contain;
}