:root {
    color-scheme: light dark;

    --background: var(--bg_0);
    --highlight: var(--bg_1);
    --primary: var(--fg_0);
    --secondary: var(--dim_0);
    --emphasized: var(--fg_1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg_0: #103c48;
        --bg_1: #174956;
        --bg_2: #325b66;
        --dim_0: #72898f;
        --fg_0: #adbcbc;
        --fg_1: #cad8d9;

        --red: #fa5750;
        --green: #75b938;
        --yellow: #dbb32d;
        --blue: #4695f7;
        --magenta: #f275be;
        --cyan: #41c7b9;
        --orange: #ed8649;
        --violet: #af88eb;

        --br_red: #ff665c;
        --br_green: #84c747;
        --br_yellow: #ebc13d;
        --br_blue: #58a3ff;
        --br_magenta: #ff84cd;
        --br_cyan: #53d6c7;
        --br_orange: #fd9456;
        --br_violet: #bd96fa;
    }

    img {
        filter: grayscale(15%);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg_0: #fbf3db;
        --bg_1: #e9e4d0;
        --bg_2: #cfcebe;
        --dim_0: #909995;
        --fg_0: #53676d;
        --fg_1: #3a4d53;

        --red: #d2212d;
        --green: #489100;
        --yellow: #ad8900;
        --blue: #0072d4;
        --magenta: #ca4898;
        --cyan: #009c8f;
        --orange: #c25d1e;
        --violet: #8762c6;

        --br_red: #cc1729;
        --br_green: #428b00;
        --br_yellow: #a78300;
        --br_blue: #006dce;
        --br_magenta: #c44392;
        --br_cyan: #00978a;
        --br_orange: #bc5819;
        --br_violet: #825dc0;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding: 5em;
}

body {
    background-color: var(--background);
    color: var(--primary);
    height: 100%;
    margin: auto;
    font-family: sans-serif;
}

h1 > a,
h1 > a:visited,
h2 > a,
h2 > a:visited,
h3 > a,
h3 > a:visited,
h4 > a,
h4 > a:visited,
h5 > a,
h5 > a:visited,
h6 > a,
h6 > a:visited {
    color: var(--emphasized);
}

h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child),
h5:not(:first-child),
h6:not(:first-child) {
    margin-top: 2em;
    margin-bottom: 1em;
}

ul,
ol {
    padding-left: 0;
    list-style-position: outside;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: var(--violet);
}

header,
nav,
main,
footer {
    max-width: 43rem;
    margin: auto;
    padding-left: 2rem;
    padding-right: 1rem;
}

header,
nav {
    border-bottom: 1px solid var(--secondary);
}

footer {
    border-top: 1px solid var(--secondary);
}

nav {
    position: sticky;
    top: 0;
    background-color: var(--background);
    z-index: 1;
}

header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: baseline;
}

header h1 a,
header h1 a:hover,
header h1 a:visited {
    color: var(--emphasized);
    text-decoration: none;
}

header h1,
header p {
    margin: 0.5em 0;
}

footer ul,
nav ul {
    margin: 0.5em 0em;
    line-height: 2em;
}

nav li {
    display: inline-block;
}

nav li a {
    padding: 0.5em;
}

nav li:hover {
    background-color: var(--highlight);
}

nav li:hover a {
    text-decoration: none;
}

nav li a.active {
    background-color: var(--highlight);
}

.dropdown {
    display: inline-block;
}

.items {
    display: none;
    position: absolute;
    background-color: var(--background);
    border: 1px solid var(--secondary);
}

@media (pointer: fine) {
    .dropdown:hover .items {
        display: block;
    }
}

.items ul {
    margin: 0.5em;
}

.items li {
    display: block;
}

main {
    line-height: 2em;
}

figure#profile {
    float: right;
    margin: 0em;
}

figure#profile img {
    border-radius: 50%;
}

footer {
    text-align: center;
    color: var(--secondary);
    font-size: smaller;
}

footer li {
    display: inline-block;
}

footer li:not(:last-child)::after {
    content: " ·";
}

table.qrcode {
    padding: 1rem 0;
    border-width: 0;
    border-spacing: 0;
}

blockquote {
    color: var(--emphasized);
    background-color: var(--highlight);
    padding: 0em 1em;
    margin: 1em 0em;
    border-radius: 1em;
}

.offer {
    color: var(--emphasized);
    background-color: var(--highlight);
    margin-left: -1em;
    padding-left: 1em;
    border-left: solid var(--red);
}

.qrcode_off,
.qrcode_on {
    width: 1rem;
    height: 1rem;
}

.qrcode_off {
    background-color: var(--background);
}

.qrcode_on {
    background-color: var(--primary);
}

a.cta {
    color: var(--background);
    background-color: var(--green);
    border-radius: 2em;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    padding: 0 1em;
}

li.peeking {
    list-style-type: "🫣 ";
}

li.hourglass {
    list-style-type: "⏳ ";
}

li.money {
    list-style-type: "💸 ";
}

li.chart {
    list-style-type: "📈 ";
}