/* Basic colour scheme, typography setup */
:root {
    color-scheme: dark;

    --bg: #010101;
    --text: #dcdcdc;
    --accent: #A2F2EA;
    --accent-hover: #FF2BC7;

    --font-variable: "Inter", sans-serif;
    --font-monospace: "Monaspace Neon", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
}

a,
a:visited {
    color: var(--accent);
}
a:hover {
    color: var(--accent-hover);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-size: 18px;
    padding: 1rem 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* Layout tools */
two-columns  {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    section {
        max-width: 30rem;
        padding: 2rem;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}

/* when two-columns is within body, try to vertically center in viewport */
body:has(> two-columns) {
    padding: 0; margin: 0;
    > two-columns {
        min-height: 100vh;
    }
}

main {
    max-width: 70ch;
    margin: 0 auto;
    padding: 1rem 0;
}

/* Navbar */
nav {
    margin-top: 1.5rem;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 0.4rem;
    padding: 0;

    a {
        padding: 0.5rem;
        text-decoration: none;
        background: var(--accent);
        color: var(--bg);

        &:hover,
        &:active {
            color: initial;
            background: var(--accent-hover);
        }
        &:visited { color: initial; }
    }
}

breadcrumbs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    gap: 0.4rem;
    padding: 0;

}