@import url('beem-regular.css');
@import url('beem-bold.css');

:root {
    --font-scale: 0.88;
    --font-scale: 0.77;
    --dvmin: min(1dvh, 1dvw);
    --fs-rel: calc(var(--dvmin) * 2);
    --fs-min: calc(16px * 1.5);
    --font-size: calc(max(var(--fs-min), var(--fs-rel)) * var(--font-scale));

    font-size: var(--font-size);
}

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

body {
    --cv-bg: #e6e1dc;
    --v-grid: 1.5;
    --v-grid-rem: calc(var(--v-grid) * 1rem);

    font-family: 'Beem', Consolas, monospace;
    font-size: 1rem;
    line-height: var(--v-grid-rem);
    letter-spacing: -0.035em;

    box-sizing: border-box;
    display: flow-root;
    min-height: 100dvh;
}

.show-grid {
    --step: var(--v-grid-rem);
    --line-color: pink;
    --line-width: 1px;
    --line-start: calc(var(--step) - var(--line-width));
    --grid-bg: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent var(--line-start),
        var(--line-color) var(--line-start),
        var(--line-color) var(--step)
    );

    background-image: var(--grid-bg);
    background-repeat: repeat-y;
}

main {
    --max-width: 40em;
    --margin-x-1: calc((100% - var(--max-width)) / 2);
    --margin-x-2: 12vmin;
    --margin-x: max(var(--margin-x-1), var(--margin-x-2));
    margin: 2vmin var(--margin-x);
    max-width: var(--max-width);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
    margin: 0;
}
p,
ul {
    letter-spacing: -0.04em;
    margin-block-start: 0;
    margin-block-end: var(--v-grid-rem);
    word-spacing: -0.135em;
}
ul {
    list-style-type: none;
    padding-inline-start: 1.2em;

    li {
        margin-block-end: calc(var(--v-grid-rem) / 2);
    }

    &.no-gap li {
        margin-block-end: 0;
    }
}

a {
    --line: 0.085em;
    --line-color: color-mix(in srgb, transparent, currentColor 17.5%);

    text-decoration: underline;
    text-decoration-thickness: calc(var(--line) * 0.92);
    text-underline-offset: calc(var(--line) * 1.12);
    text-decoration-color: var(--line-color);
    text-decoration-skip-ink: none;

    &:link {
        color: rgba(0, 32, 192, 1);
    }
    &:focus-visible {
        background-color: var(--line-color);
        outline-color: var(--line-color);
        outline-width: 0.05em;
        text-decoration: none;
    }
}

h1 {
    font-weight: normal;
    font-size: 156%;
    font-weight: bold;
    letter-spacing: -0.035em;
    margin-block: calc(var(--v-grid-rem) * 2.85);
    word-spacing: -0.1em;

    i {
        font-style: normal;
    }
    i:nth-child(1) {
        margin-right: 0.035em;
        margin-left: -0.015em;
    }
    i:nth-child(2) {
        margin-left: 0.0125em;
    }
    i:nth-child(3) {
        margin-left: -0.015em;
        margin-right: 0.035em;
    }
    i:nth-child(4) {
        margin-right: 0.05em;
        margin-left: 0.025em;
    }
    i:nth-child(5) {
        margin-left: 0.015em;
        margin-right: 0.03em;
    }
}

h2 {
    font-size: 1.125rem;
    font-weight: bold;
    letter-spacing: -0.015rem;

    i {
        font-style: normal;
    }

    &.h2-dev i:nth-child(1) {
        margin-right: -0.05em;
    }
    &.h2-dev i:nth-child(2) {
        margin-right: -0.03em;
    }
    &.h2-des i:nth-child(1) {
        margin-right: -0.05em;
    }
    &.h2-des i:nth-child(2) {
        margin-right: -0.02em;
    }
    &.h2-tnk i:nth-child(1) {
        margin-right: -0.02em;
    }
    &.h2-- {
        letter-spacing: -0.05em;
    }
}

@media (pointer: coarse) and (orientation: portrait) {
    :root {
        --font-scale: 0.72;
    }
}