* { margin: 0; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
/** end reset **/

:root {
    font-size: calc(14px + 0.2vw);
    --max-width: 56ch;
    --block-spacing: 1lh;
    --inline-spacing: 4ch;

    --red: hsl(358, 68%, 45%);
    --darkred: hsl(358, 68%, 30%);
    --purple: hsl(260, 68%, 30%);
    --silver0: hsl(0, 0%, 90%);
    --silver1: hsl(0, 0%, 70%);
    --silver2: hsl(0, 0%, 50%);
    --silver3: hsl(0, 0%, 30%);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

body {
    font: 100%/1.4 verdana, system-ui, sans-serif;
}
body.full-width { --max-width: 100%; }

body > * {
    padding-block: var(--block-spacing);
    margin-inline: var(--inline-spacing);
    max-width: var(--max-width);
}

body > * + * {
    border-top: 1px solid var(--silver0);
}

body > .hero { border-top: none; }
body > .hero + * { border-top: none; }

/*** customisation ----------------------- */
.app-hidden { display: none; }

nav {
    max-width: var(--max-width);
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    @media screen and (max-width: 30rem) {
        & {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media screen and (max-width: 20rem) {
        & {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    a {
        text-decoration: underline;
        color: black;
    }
    a:hover { color: var(--darkred); }

    .home {
        grid-row: span 2;

        a {
            font-weight: bold;
            color: var(--silver1);
            text-decoration: none;
        }

        a:hover {
            color: var(--silver2);
            text-decoration: underline;
        }
    }
}

header {
    display: flex;
    justify-content: space-between;

    h1 {
        font-size: 100%;
        margin: 0;

        a { color: var(--silver1); }
        a:hover { color: var(--silver2); }
    }

    ul {
        margin: 0;
        list-style: none;
        display: flex;
        gap: 2ch;

        a { color: var(--red); }
        a:hover { color: var(--darkred); }
    }
}

.hero {
    margin-inline: 0;
    max-width: 100%;
    padding: calc(2 * var(--block-spacing)) var(--inline-spacing);

    img {
        height: auto;
        max-width: 100%;
        box-shadow: 0 .1lh 1ch rgba(0,0,0,.3), 0 0 10px rgba(0,0,0,.2);
        border-radius: 4px;
    }
}

/*** main -------------------------------- */
main > *:first-child { margin-top: 0 !important; }

.buttons {
   display: flex;
   gap: 2ch;
   justify-content: space-between;
}
.buttons div {
    display: flex;
    gap: 2ch;
}

.buttons a {
    text-decoration: none;
}
.buttons a:hover span {
    text-decoration: underline;
}

.buttons:has(+ main) {
    padding-block-start: .5lh;
}
.buttons + main {
    border-top: none;
}

main + .buttons {
    padding-block-end: .5lh;
    border-top: none;
}


/*** footer ------------------------------ */
footer span {
    font-size: 80%;
}

/*** article ------------------------------ */
article + article {
    margin-block-start: 2lh;
}

article img:first-child {
    margin-left: -2ch;
    max-width: calc(100vw - 5ch);
    max-height: 100vh;
}


/*** content ***/
p, dl, ol, ul, hr, pre, blockquote, img { margin-block: 1lh; }

blockquote {
    font-family: serif;
    font-style: italic;
    font-size: 120%;
    margin-inline: 3ch;
    position: relative;
}
blockquote:before {
    content: "“";
    font-size: 200%;
    position: absolute;
    top: -0.25lh;
    left: -0.5lh;
}

hr {
    border-top: none;
    border-bottom-color: var(--silver2);
    margin-inline: 3ch;
}

/* lists */
ul, ol {
    padding: 0;
    margin-inline-start: 3ch;
}

dt { font-style: italic; }
dd { margin-inline-start: 2ch; margin-block-end: 1lh; }

/* links */
a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 10%;
    text-underline-offset: 10%;
}
a:hover { color: var(--darkred); }
a:active { color: var(--purple); }

/* headings */
h1, h2, h3, hgroup { font-style: italic; }
h1, hgroup * { font-size: 160%; }
hgroup {
    display: flex;
    gap: 2ch;
}
hgroup > * {
    margin: 0 !important;
    display: inline-block;
}

h2 {
    font-size: 120%;
}

h3 {
    font-size: 100%;
}

/* code */
code { font-size: 90%; }
pre {
    border-top: 1px dashed var(--silver1);
    border-bottom: 1px dashed var(--silver1);
    padding: 1lh 0;
    overflow-x: auto;
}