/*
 * Light and dark mode support 
 */

:root {
    color-scheme: light dark;
    --base-light: #fffbfb;
    --base-dark: #11111f;
    --header-subhead-light: rebeccapurple;
    --header-subhead-dark: rebeccapurple;
    --link-light: green;
    --link-dark: deepskyblue;
    --link-hover-light: deepskyblue;
    --link-hover-dark: green;
    /*--serif-font: "Source Serif 4";*/
    /*--sans-serif-font: "Source Sans 3";*/
    --sans-serif-font: "myriad-pro";
    --mono-font: "Source Code Pro";
}

/*
 * Grid layout
 */

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

.wrapper {
    display: grid;
    gap: 0;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
}

@media (min-width: 640px) {
    .wrapper {
        grid-template-columns: 1fr 7fr 1fr;
        grid-template-areas:
            "... header ..."
            "... nav ..."
            "... main ..."
            "... footer ...";
    }
}

/*
 * Block elements
 */

html,
body {
    background: light-dark(var(--base-light), var(--base-dark));
    color: light-dark(var(--base-dark), var(--base-light));
    font-size: 100%;
    font-family: var(--sans-serif-font);
    font-style: normal;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

header,
footer,
nav {
    padding: 1rem;
}

header {
    border-bottom: 1px solid light-dark(var(--base-dark), var(--base-light));
}

footer {
    border-top: 1px solid light-dark(var(--base-dark), var(--base-light));
}

main {
    padding: 1rem;
}

section {
    margin: 0 0 1.5rem;
}

/*
 * Text elements 
 */

body>* {
    font-size: 1.1rem;
}

.header-subhead {
    color: light-dark(var(--header-subhead-light), var(--header-subhead-dark));
    font-size: 1.8rem;
    font-weight: 800;
}

nav a {
    font-family: var(--mono-font);
    padding: 0 2rem 0 0;
}

a,
a:visited,
button {
    color: light-dark(var(--link-light), var(--link-dark));
    text-decoration: none;
}

a:hover,
a:active,
a:focus,
button:hover {
    color: light-dark(var(--link-hover-light), var(--link-hover-dark));
    cursor: pointer;
    text-decoration: underline;
}

button {
    background-color: transparent;
    border: none;
    font-family: var(--mono-font);
    font-size: 100%;
    padding: 0;
}

h1,
h2,
footer,
dt {
    font-family: var(--mono-font);
}

h1 {
    margin: 0;
    font-weight: 800;
}

h2 {
    margin: 0 0 1rem;
    font-weight: 600;
}

nav a {
    font-weight: 600;
}

p {
    margin: 0;
}

dt::before {
    color: light-dark(var(--header-subhead-light), var(--header-subhead-dark));
    content: "\3E";
    margin-right: 0.7rem;
    font-weight: 800;
}


dt {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

dd {
    margin-bottom: 1rem;
}

dd em {
    font-size: 1.15rem;
}