body {
    padding: 0;
    margin: 0;
    font-size: 12pt;

    --theme-color: white;
    --theme-background-color: black;
    --theme-box-color: rgb(32, 32, 32);
    --theme-box-outline: rgb(64, 64, 64);
    --theme-link-color: #59afff;
    --theme-visited-link-color: #ce85ff;
    background-color: var(--theme-background-color);
    color: var(--theme-color);
}

body[theme="light"] {
    --theme-color: black;
    --theme-background-color: white;
    --theme-box-color: rgb(190, 190, 190);
    --theme-box-outline: rgb(179, 179, 179);
    --theme-link-color: #0538e2;
    --theme-visited-link-color: #a300cc;
}

a {
    color: var(--theme-link-color)
}

a:visited {
    color: var(--theme-visited-link-color)
}

.topbar {
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: min-content;
    margin: 0;
    background-color: var(--theme-background-color);
    color: var(--theme-color);
    font-size: 15pt;
}

.bar-item {
    border-width: 2pt;
    border-radius: 0;
    border-color: var(--theme-color);
    border-style: solid;
    ;
    margin: 0;
    padding: 0;
    color: inherit;
}

.logo {
    padding: 5pt;
}

.theme-select {
    padding: 5pt;
}

.content {
    margin: 10pt;
    display: flex;
    flex-direction: column;
}

.page {
    width: 600pt;
    align-self: center;
}

.topbar-fill {
    flex-grow: 1;
}

.linkbutton {
    padding: 5pt;
    margin: 0;
    height: 100%;
    font-size: inherit;
    text-decoration: none;
}

.linkbutton:hover {
    background-color: var(--theme-color);
    color: var(--theme-background-color);
}

.linkbutton:focus {
    border-color: #0083fd;
}

.theme-select-input {
    font-size: 40pt;
}

.code {
    font-family: monospace;
    margin-top: 0;
    margin-top: 0;
}

.box {
    margin: 2ch;
    width: min-content;
    height: min-content;
    background-color: var(--theme-box-color);
    background-size: contain;
    border: solid 2pt;
    border-color: var(--theme-box-outline);
    padding: 2ch;
}