@import "colors-light.css";
@import "colors-dark.css" (prefers-color-scheme: dark);
@import "table.css";
@import "description-list.css";
@import "links.css";

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    scrollbar-color: var(--blue) var(--background);
}

::selection {
    color: var(--background);
    background-color: var(--foreground);
}

body {
    font-family: "Atkinson Hyperlegible", sans-serif;
    color: var(--foreground);
    background-color: var(--background);
    margin: 10px;
}

#wrapper {
    padding: 16px;
    width: 65ch;
    margin: 0 auto;
}

#banner {
    text-align: left;
}

.vr {
    border-left:2px solid var(--foreground);
    margin: 8px
}

nav {
    ul {
        padding-left: 0;
        list-style-position: inside;
        list-style-type: cjk-heavenly-stem;
    }
}

p {
    line-height: 1.5em;
}

address {
    display: inline;
    font-style: normal;
}

h2 a:link {
    color: var(--black);
}

h2 a:visited {
    color: var(--catppuccin-latte-text);
}

h2 a:hover {
    color: var(--catppuccin-latte-sky);
}

h2 a::after {
    content: "¶";
    visibility: hidden;
    opacity: 0;
    transition: opacity 0s ease 0.1s;
    margin-left: 8px;
}

h2 a:hover::after {
    visibility: visible;
    opacity: 0.5;
}

footer {
    padding-top: 1em;
    padding-bottom: 1em;
}