body.vertigoes {
    --bg: #0f0b28;
    --fg: #deceff;
    --bold: #9792E3;
    --bold-lighter: #aca7e9;
    --link: #af69d8;
    --link-hover: #e694ff;
    --nav-bg: #0b060c;
}

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: 'Inter', sans-serif;
    margin: 1em 1em 4em;
}

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

a:hover { color: var(--link-hover); }

nav img, .card img { image-rendering: pixelated; }

nav {
    background-color: var(--nav-bg);
    padding: 0.5em 0.6em;
    border-radius: 2em;
    display: flex;
    gap: 0.5em;
    margin-bottom: 2em;
}

nav a {
    background-color: #3b344e;
    padding: 0.5em 1em;
    border-radius: 1em;
    text-decoration: none;
    display: inline-flex;
    color: var(--bold);
	align-items: center;
    font-weight: bold;
}

nav a.active {
    pointer-events: none;
    cursor: not-allowed;
}

nav a img {
    height: 1.2em;
    padding-left: 0.5em;
    image-rendering: pixelated;
}

main {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    gap: 0;
    font-size: 1.1em;
}

p, dl { margin: 0; }

h1 { margin-top: 5px; }

body {
    display: flex;
    flex-direction: column;
	align-items: center;
}

b { color: var(--bold); }

.card {
    background-color: var(--nav-bg);
    margin-bottom: 1em;
    padding: 1em;
    border-radius: 1em;
}

.card div {
    display: flex;
    margin-top: 1em;
	justify-content: space-between;
}

.card div b { font-size: 1.5em; }

.card > div:first-of-type { margin-top: 0; }

.card span { color: var(--bold-lighter); }

.card img {
    width: 2em;
    height: 2em;
}