:root {
    --s: 37px;
    --c1: #1a1b1f;
    --c2: #20222a;
}

html {
    --c: #0000, var(--c1) .5deg 119.5deg, #0000 120deg;
    --g1: conic-gradient(from 60deg at 56.25% calc(425%/6), var(--c));
    --g2: conic-gradient(from 180deg at 43.75% calc(425%/6), var(--c));
    --g3: conic-gradient(from -60deg at 50% calc(175%/12), var(--c));

    background:
        var(--g1), var(--g1) var(--s) calc(1.73*var(--s)),
        var(--g2), var(--g2) var(--s) calc(1.73*var(--s)),
        var(--g3) var(--s) 0, var(--g3) 0 calc(1.73*var(--s)) var(--c2);
    background-size: calc(2*var(--s)) calc(3.46*var(--s));
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #d2dbde;
    background-color: transparent;
}

header {
    color: #d2dbde;
    padding: 1rem;
    text-align: center;

    --c: #0000, var(--c2) .5deg 119.5deg, #0000 120deg;
    --g1: conic-gradient(from 60deg at 56.25% calc(425%/6), var(--c));
    --g2: conic-gradient(from 180deg at 43.75% calc(425%/6), var(--c));
    --g3: conic-gradient(from -60deg at 50% calc(175%/12), var(--c));

    background:
        var(--g1), var(--g1) var(--s) calc(1.73*var(--s)),
        var(--g2), var(--g2) var(--s) calc(1.73*var(--s)),
        var(--g3) var(--s) 0, var(--g3) 0 calc(1.73*var(--s)) var(--c1);
    background-size: calc(2*var(--s)) calc(3.46*var(--s));
}

main {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin: 1rem 0;
}

a {
    color: #1982d2;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.comment {
    color: slategray;
}

.wip {
    color: orange;
}

.title {
    text-transform: uppercase;
    font-weight: bold;
}