:root {
    --main-bg-color-dark: #181A1B;
    --main-bg-color-dark-alt: black;
    --main-bg-color-highlight: rgba(255, 0, 212, 0.5);
    --main-bg-color-highlight-light: wheat;

    --main-font-color: #EAB2A0;
    --main-font-color-alt: #ff8c6a;
    --main-subheading-color: white;

    --md-code-bg-color: #241f31;
    --md-code-bg-color-alt: #3f191946;
    --md-plaintext-color: white;
    --md-plaintext-color-alt: #F6B17A;

    --body-width: 50em;

    /* --dark-blue: #030637; */
}

* {
    font-family: monospace;
}

p, h1, ol > li, a {
    color: var(--main-font-color);
}

h2, h3 {
    color: var(--main-subheading-color);
}

summary, ul, li::marker {
    color: var(--main-font-color-alt);
}

body {
    background-color: var(--main-bg-color-dark);
    max-width: var(--body-width);
    margin: auto;
}

html {
    margin-top: 17px;
    /* To create a 'min-width'*/
    margin-left: 1.5mm;
    margin-right: 1.5mm;
}

button {
    border-radius: 1mm;
    background-color: yellowgreen;
}

button:active {
    transform: translate(0.05em, 0.05em);
    box-shadow: 0.05em 0.05em;
}

button a {
    color: black;
}

.color-alt {
  color:var(--main-font-color-alt);
}

.nav-flex {
  display: flex;
  align-items: center;
  justify-content:space-evenly;
  max-width: 50em;
  margin: auto;
}

.flex {
  display: flex;
  align-items: center;
  justify-content:space-between;
  margin: auto;
}

.hover-emphasis:hover {
    background-color: var(--main-bg-color-highlight);
}

*::selection {
  background-color: var(--main-bg-color-highlight);
  color:white;
}

i, em {
  color: #cb5ce6;
}

.dir-table {
  color: var(--main-font-color-alt);
  width: 100%;
  max-width: inherit;
}

#fun-facts {
    outline: 1px solid khaki;
    > li {
        & > a, ul > a {
            text-decoration-color: orange;
        }
        &:nth-child(even of &) {
            /* background-color: var(--md-code-bg-color-alt); */
            &, * {
                color: wheat;
            }
        }
        &:nth-child(odd of &) {
            /* background-color: var(--md-code-bg-color); */
            &, * {
                color: goldenrod;
            }
        }
        padding: 0.1em;
        margin-left: 1em;
    }
    a {
        &:hover {
            background-color: black;
            text-decoration-color: lightcyan;
        }
    }
    .flex {
        float: right;
    }
    padding: inherit;
}