/* https://color.adobe.com/create/color-contrast-analyzer */
/*dark theme*/
body.dark{
    --bg-color: #000;
    /*
     * #5ac
     * */
    --normal-text: #CCC;
    --link-clicked: #B250D8;
    --link-unclicked: #d80;
    --header-bg: #333;
    --nav-link-color: #6B0;
    --content-border-color: #5ac;
}
/*
 *#ABABD4;
 *bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
 * */
/*light theme*/
body.light{
    --bg-color: #e2e3e5;
    --normal-text: #000;
    --link-unclicked: #2535B4;
    --link-clicked: #832244;
    /*#E6DDE6
     * #dce2e5
     *
     * promising
     * #b4d2ec*/

    --header-bg: #dce5dc;
    /*#841163
     * #115e84*/
    --nav-link-color: #118411;
    --content-border-color: #026;
}

body {
    background: var(--bg-color);
    color: var(--normal-text);
    padding: 0px;
    margin: 0px;
    font-family: Georgia, serif;
}

.nav-link {
    color: var(--nav-link-color) !important;
}

a {
    color: var(--link-unclicked);
    font-weight: bold;
    text-decoration: none;
}

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

a:hover {
    text-decoration: underline;
}

#header {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5em;
    align-items: center;
    background: var(--header-bg);
    width: 100%;
    font-size: 24px;
    padding: 0.5em 1em;
}

#content {
    display: inline-block;
    margin: 1em;
    padding: 1em;
    min-width: calc(100% - 5em);
    border: 0.5em solid var(--content-border-color);
    border-radius: 0.5em;
}