@import"https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&display=swap";
:root {
    --line-blue: #05a;
    --lucid-line-blue: #05a0;
    --lucid-fill-white: #fff3;
    --lucid-line-white: #fff5;
    --min-content-width: 300px;
    --max-content-width: 40rem;
    --gutter: 1rem;
    --margin-block: 1em;
}
html, body {
    height: 100%;
    margin: 0;
    font: 400 11pt/1.333 "Fira Sans", sans-serif;
}
body {
    background: url(./zsm/index.jpg) center;
    background-size: cover;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: var(--min-content-width);
}

body > * {
}

body > *::before,
body > *::after,
body > * > * {
    margin-inline: auto;
    padding-inline: var(--gutter);
    max-width: var(--max-content-width);
    box-sizing: border-box;
}

body > *::before,
body > *::after {
    content: '';
    display: block;
}

header, footer {
    --margin-block: 1ex;
}
header {
    background: var(--lucid-fill-white);
    color: var(--line-blue);
}
footer {
    color: white;
    &::before {
        border-top: 1px solid var(--lucid-line-white);
    }
}
main {
    color: var(--line-blue);
}

h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin-block: var(--margin-block);
}

ol, ul {
    padding-block-end: .5em;
}

li {
    display: block;
}

li a {
    --h-space: 1em;
    --h-margin: .5em;

    position: relative;
    margin-inline: calc(-1 * var(--h-margin));
    text-decoration-line: underline;
    text-decoration-color: var(--lucid-line-blue);
    text-underline-offset: 4px;
    transition: text-decoration-color 300ms;

    &::before,
    &::after {
        content: '\279E';
        display: inline-block;
        margin: 0;
        padding-inline: var(--h-margin);
        width: var(--h-space);
        text-align: center;
    }

    &:hover {
        text-decoration-color: var(--line-blue);
    }
    &::before {
        position: relative;
        left: 0;
        transition: left 200ms;
    }
    &:hover::before {
        opacity: 1;
        left: calc(100% - var(--h-space) - (2 * var(--h-margin)));
    }
    &::after {
        opacity: 0 !important;
    }
}



a {
    display: inline-block;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
a,
a:visited {
    /* use text color */
    color: inherit;
}