:root {
    --base03: #002b36;  /*brblack  */
    --base02: #073642;  /*black   */
    --base01: #586e75;  /*brgreen */
    --base00: #657b83;  /*bryellow */
    --base0: #839496;   /*brblue   */
    --base1: #93a1a1;   /*brcyan   */
    --base2: #eee8d5;   /*white    */
    --base3: #fdf6e3;   /*brwhite */
    --yellow: #b58900;  /*yellow  */
    --orange: #cb4b16;  /*brred  */
    --red: #dc322f;     /*red    */
    --magenta: #d33682; /*magenta  */
    --violet: #6c71c4;  /*brmagenta */
    --blue: #268bd2;    /*blue    */
    --cyan: #2aa198;    /*cyan          */   
    --green: #859900;  /*green    */
}

:root[data-theme="dark"] {
    --bg-color:var(--base03);  /* brblack */
    --alt-bg-color: var(--base02); /* black */
    --text-color: var(--base0);
    --header-color: var(--base1);
    --link-color: var(--blue);
}

:root[data-theme="light"] { 
    --bg-color: var(--base3);   /* brwhite */
    --alt-bg-color: var(--base2); /* white */
    --text-color: var(--base02);
    --header-color: var(--base03);
    --link-color: var(--blue);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-color: var(--base3);
        --text-color: var(--base02);
        --header-color: var(--base03);
        --link-color: var(--blue);
    }
}

nav {
    text-align: right;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Arial', sans-serif;
    transition: background-color 0.5s ease, color 0.3s ease;
}

.center-header {
    color: var(--header-color);
    text-align: center;
    margin-top: 3%;
    font-size: 225%;
}

p {
    color: var(--text-color);
    line-height: 1.6;
    margin: 20px 0;
}

text {
    color: var(--text-color);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--header-color);
    text-align: center;
    margin-top: 3%;
}

/* List item styling */
li {
    color: var(--text-color);
    line-height: 1.6;
    margin: 5px 0;
}

ul, ol {
    color: var(--text-color);
    padding-left: 40px;
}

/* Link styling */
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Inherit color for generic containers */
span, div {
    color: inherit;
}

.code-block {
    background-color: var(--alt-bg-color);
    color: var(--text-color);
    padding: 10px;
    border-radius: 5px;
    font-family: 'Fira Code', monospace;
    overflow-x: auto;
}