/* base styles */
body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--system-ui-fonts);
    font-size: 18px;
}

/* typography */
p:first-of-type, p:empty:first-of-type + p { margin: 0; }
p:not(:first-of-type) { margin-top: 0.75em; }
a { color: inherit; }
a:visited { color: inherit; } /* don't change the color of visited links */
pre:has(code) { overflow-x: scroll; }
pre:has(code) { margin-bottom: var(--gutter-1x, 15px); }
svg { color: inherit; }
figcaption { font-size: 0.875em; color: var(--text-muted); text-align: center; margin-top: 0.5em; }
figure { margin-bottom: var(--gutter-1x, 15px); }

[data-hyper-mention] { font-weight: bold; text-decoration: none; }


/* buttons */
[button] {
    display: flex;
    flex-direction: row;
    border-radius: 50vh;
    border: 2px solid light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.50));
    background-color: light-dark(rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.25));
    box-shadow: var(--shadow-elevation-1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    justify-content: center;
}
[button] a, [button] a:hover {
    box-shadow: none;
    text-decoration: none;
    margin: 0 var(--gutter-1x, 15px);
}