:root {

    /* catppuccin macchiato */
    --rosewater: #f4dbd6;
    --flamingo: #f0c6c6;
    --pink: #f5bde6;
    --mauve: #c6a0f6;
    --red: #ed8796;
    --maroon: #ee99a0;
    --peach: #f5a97f;
    --yellow: #eed49f;
    --green: #a6da95;
    --teal: #8bd5ca;
    --sky: #91d7e3;
    --sapphire: #7dc4e4;
    --blue: #8aadf4;
    --lavender: #b7bdf8;
    --text: #cad3f5;
    --subtext1: #b8c0e0;
    --subtext0: #a5adcb;
    --overlay2: #939ab7;
    --overlay1: #8087a2;
    --overlay0: #6e738d;
    --surface2: #5b6078;
    --surface1: #494d64;
    --surface0: #363a4f;
    --base: #24273a;
    --mantle: #1e2030;
    --crust: #181926;
}

::selection {
    background: var(--surface0);
}

body {
    color:      var(--text);
    background: var(--base);
    font-family: monospace, monospace;
    margin: 0;
}

main {
    margin: auto;
    max-width: 38rem;
    padding: 2rem;
}

pre {
    background-color: var(--crust);
    padding: 1em;
    border: 0;
}

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

h2:before {
    content: "◉";
    margin-right: 0.5em; 
}

h3:before {
    content: "○";
    margin-right: 0.5em; 
}

h4:before {
    content: "✸";
    margin-right: 0.5em; 
}

h1 {
    color: var(--blue);
    margin-bottom: .1rem;
}

h2 {
    margin-bottom: .1rem;
    color: var(--sapphire);
}

h3, h4, h5 {
    margin-bottom: .1rem;
    color: var(--sky);
}



blockquote {
    border-left: 1px solid var(--pink);
    margin: 0.5em 10px;
    padding: 0.5em 10px;
}

footer {
    align: center;
}

.status {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    background-color: var(--mantle);
    overflow: hidden; 
    text-align: center;
}

.status a {
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}