:root {
    /* Palette is AMMO-8: https://lospec.com/palette-list/ammo-8 */
    --color-1: #040c06;
    --color-2: #112318;
    --color-3: #1e3a29;
    --color-4: #305d42;
    --color-5: #4d8061;
    --color-6: #89a257;
    --color-7: #bedc7f;
    --color-8: #eeffcc;

    --color-primary: var(--color-5);
    --color-base: var(--color-3);
    --color-content: var(--color-7);

    background-color: var(--color-base);
    color: var(--color-content);

    font-size: calc((2/3) * 1rem + 0.25vw);
}

@font-face {
    font-family: Daydream;
    src: local("Daydream"),
        url("/assets/font/daydream/Daydream.otf") format("opentype");
}

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,
::after,
::before {
    box-sizing: border-box
}

html {
    tab-size: 4;
}

body {
    margin: 0;
}

b,
strong {
    font-weight: bolder;
}

small {
    font-size: smaller;
    opacity: 0.6;
}

h1,
h2,
h3,
ul,
li,
p {
    margin: unset;
    padding: unset;
}

ul {
    list-style: none;
}

ul.list {
    list-style: inside disc;
    margin-left: 1rem;
}

p {
    text-align: justify;
}

h1.fancy {
    font-family: "Daydream", sans-serif;
    background-image: linear-gradient(
            var(--color-8),
            var(--color-7),
            var(--color-6),
            var(--color-5)
    );

    color: transparent;
    background-clip: text;
}


body {
    width: clamp(320px, 45%, 864px);
    margin: auto;
    font-family: Helvetica, sans-serif;
    font-weight: normal;

    line-height: 1.25;
    text-rendering: geometricPrecision;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    /* letter-spacing: -0.325px; */
    letter-spacing: -0.045rem;
    @media (width < 576px) { letter-spacing: -0.5px; }
}

header {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

header > a::before {
    content: "← ";
}

main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    container-type: inline-size;
}

section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

a {
    color: var(--color-8);
    text-decoration-style: dotted;
    text-decoration-color: color-mix(in srgb, var(--color-content), transparent 40%);
}

a:hover {
    color: var(--color-7);
}

main>h1 {
    font-size: clamp(12px, 4cqi, 24px);
    text-align: center;
    word-break: keep-all;
    overflow-wrap: normal;
}

section#socials>ul:first-child {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

section#socials svg {
    width: 2.5rem;
    height: 2.5rem;
}

section#pages>nav>ul>li {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
}

section#pages>nav>ul>li>a {
    font-size: larger;
    order: 0;
}

section#pages>nav>ul>li:after {
    content: "";
    flex-grow: 1;
    order: 1;
    margin-left: 1rem;
    margin-right: 1rem;
    border-bottom: 1px solid var(--color-primary);
    opacity: 50%;
}

section#pages>nav>ul>li>span {
    order: 2;
}