:root {
    --color-fg: #333;
    --color-md: #888;
    --color-lt: #f5f5f5;
    --color-bg: #fff;
    --color-eb: #fadada;
    --color-link: #4183C4;
    --font-size: 16px;
    --line-height: 24px;
    --border-radius: 4px;
    --padding-smaller: 8px;
    --padding-base: 12px;
    --padding-larger: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font: var(--font-size)/1.6 Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    color: var(--color-fg);
    background: var(--color-bg);
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 60px 80px;
    min-height: 100vh;
}

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

header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 80px;
    align-items: center;
}

header span,
header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

header span {
    background: var(--color-link);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

header img {
    object-fit: cover;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
}

nav a {
    display: block;
    color: var(--color-fg);
    text-decoration: none;
    margin-bottom: var(--padding-smaller);
}

nav a:hover { color: var(--color-link); }
nav a.current { font-style: italic; }

main { grid-column: 2; }

footer {
    grid-column: 2;
    color: var(--color-md);
    font-size: 14px;
}

main p { margin-bottom: 1em; }
main img { max-width: 100%; }

main button {
    background: var(--color-link);
    color: var(--color-bg);
    border: none;
    padding: var(--padding-base) var(--padding-larger);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size);
}

main button:hover { opacity: 0.9; }

@media (max-width: 600px) {
    body {
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto;
	gap: 30px;
	min-height: auto;
    }
    header {
	grid-template-columns: 1fr;
	gap: 12px;
    }
    header h1 { margin-bottom: var(--padding-base); }
    nav a { display: inline; margin-right: var(--padding-larger); }
    main, footer { grid-column: 1; }
}