/* COLOR THEMES */

:root {  
    /* Flat White */
    --flatwhite-bg-nullary: #E4DDD2;
    --flatwhite-bg-primary: #F6F3EE;
    --flatwhite-bg-secondary: #E4DDD2;
    --flatwhite-fg-primary: #5F5B53;
    --flatwhite-bd-primary: #5F5B53;
    --flatwhite-red: #F7C9C3;
    --flatwhite-orange: #F7E0C3;
    --flatwhite-yellow: #F4EFC2; /* manually picked */
    --flatwhite-green: #E2E9C1;
    --flatwhite-cyan: #D2EBE3;
    --flatwhite-blue: #DDE4F2;
    --flatwhite-violet: #F1DDF1;

    /* Monokai Pro */
    --monokaipro-bg-nullary: #1c1717;
    --monokaipro-bg-primary: #2B2525;
    --monokaipro-bg-secondary: #362F2F;
    --monokaipro-fg-primary: #FDF1F3;
    --monokaipro-bd-primary: #908E8F;
    --monokaipro-red: #ED6C89;
    --monokaipro-orange: #EE9D70;
    --monokaipro-yellow: #F7D877;
    --monokaipro-green: #ADD47E;
    --monokaipro-cyan: #8DD4E0;
    --monokaipro-blue: #7E99F1;
    --monokaipro-violet: #A79CE9;
    

    /* Manually Set */
    --manual-bg-nullary: #f0f;
    --manual-bg-primary: #fffff0;
    --manual-bg-secondary: #f0f;
    --manual-fg-primary: #2a2222;
    --manual-bd-primary: #f0f;
    --manual-red: #fedcdd;
    --manual-orange: #ffc494;
    --manual-yellow: #f8ea70;
    --manual-green: #f0f;
    --manual-cyan: #f0f;
    --manual-blue: #b9ddff;
    --manual-violet: #f5dcfe;
}

/* COLOR USES */

:root {
    --bg-nullary: var(--manual-bg-nullary);
    --bg-primary: var(--manual-bg-primary);
    --bg-secondary: var(--manual-bg-secondary);

    --fg-primary: var(--manual-fg-primary);
    --bd-primary: var(--manual-bd-primary);

    --heading-fg: var(--manual-fg-primary);
    --heading-bg: var(--manual-yellow);

    --strong-fg: var(--manual-fg-primary);
    --strong-bg: var(--manual-bg-primary);

    --link-fg: var(--manual-fg-primary);
    --link-bg: var(--manual-blue);
    --link-bd: var(--manual-fg-primary);
}

@media (prefers-color-scheme: dark) {:root {
    --bg-nullary: var(--monokaipro-bg-nullary);
    --bg-primary: var(--monokaipro-bg-primary);
    --bg-secondary: var(--monokaipro-bg-secondary);

    --fg-primary: var(--monokaipro-fg-primary);
    --bd-primary: var(--monokaipro-bd-primary);

    --heading-fg: var(--monokaipro-yellow);
    --heading-bg: var(--monokaipro-bg-primary);

    --strong-fg: var(--monokaipro-red);
    --strong-bg: var(--monokaipro-bg-primary);

    --link-fg: var(--monokaipro-cyan);
    --link-bg: var(--monokaipro-bg-primary);
} }

html, body {
    background-color: var(--bg-primary);
    color: var(--fg-primary);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18px;
}

main {
    max-width: 40em;
    margin: 0 1em;
}

h1, h2, h3 {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 5px 10px;
    margin: 0.25em 0;
    border-radius: 5px;
}

h1 { 
    font-size: 1.75rem;
    color: var(--heading-fg);
    background-color: var(--heading-bg);
}

h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }

p { 
    text-align: justify; 
    padding: 5px 10px;
    line-height: 1.5em;
}

ul li {
    list-style-type: disc;
}

ul li, ol li {
    line-height: 1.3em;
}

code {
    font-size: 20px;
    padding: 0px 5px;
    color: var(--mono-fg);
    background-color: var(--mono-bg);
    border-color: var(--mono-bd);
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
}

strong {
    color: var(--strong-fg);
    background-color: var(--strong-bg);
}

a { 
    border: 1px solid var(--link-bg);
    background-color: var(--link-bg);
    text-decoration: none;
    color: var(--link-fg);
    border-radius: 5px;
    padding: 1px 5px;
}

a:hover {
    /* border: 1px solid var(--link-bd); */
    text-decoration: underline;
    text-decoration-color: var(--link-fg);
}

li:has(a):not(:has(p)) {
    margin-top: 5px;
    margin-bottom: 5px;
}