@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
:root {
    --main-bg-color: brown;
    --fg: #98d1ce;
    --bg: #0a0f14;

    /* black */
    --color0: #0a0f14;
    --color8: #10151b;

    /* red */
    --color1: #c33027;
    --color9: #d26939;

    /* green */
    --color2: #26a98b;
    --color10: #081f2d;

    /* yellow */
    --color3: #edb54b;
    --color11: #245361;

    /* blue */
    --color4: #195465;
    --color12: #093748;

    /* magenta */
    --color5: #4e5165;
    --color13: #888ba5;

    /* cyan */
    --color6: #33859d;
    --color14: #599caa;

    /* white*/
    --color7: #98d1ce;
    --color15: #d3ebe9;
}
p {
    padding-top: 2rem;
}

div.highlight {
    padding: 2rem;
}

/*
body {
  background-size: 40px 40px;
  background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}
body {
  background-size: 40px 40px;
  #background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}
html {
  --s: 100px;

  --_g: #0000 90deg,#00f 0;
  background:
    conic-gradient(from 90deg at 2px 2px,var(--_g))
     0 0/var(--s) var(--s),
    conic-gradient(from 90deg at 1px 1px,var(--_g))
     0 0/calc(var(--s)/5) calc(var(--s)/5);

  background-color: #333
}

*/

html,
body {
    background-color: var(--bg);
    color: var(--fg);
}

div.content {
}

article {
    background-color: var(--bg);
    color: var(--fg);
}

h1 {
    color: var(--color1);
}

h2,
h3,
h4,
h5,
h6 {
    color: var(--color4);
}

a:link,
a:visited,
a:active {
    color: var(--color3);
}

a:hover {
    color: var(--color6);
    text-decoration: underline red;
}

pre {
    font-family: "Share Tech Mono", monospace;
}

body {
    font-size: 16px;
    line-height: 1.6;
    font-family: "Helvetica", "Arial", sans-serif;
}

/* Headings */
h1 {
    font-size: 2.5rem; /* 40px */
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem; /* 32px */
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

h4 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

h5 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.45;
    margin-bottom: 0.5rem;
}

h6 {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
    margin-bottom: 0.25rem;
}