:root[data-theme='dark'] {
    --bg-color: #100c08;
    --text-color: #ffffff;
    --button-bg-color: #ffffff;
    --button-text-color: #100c08;
    --nav-border-color: #444;
    --nav-button-border-color: #ffffff;
    --box-bg-color: #1d1710;
    --accent-color: #FFA07A;
    --shadow-color-1: rgba(255, 160, 122, 0.3);
    --shadow-color-2: rgba(255, 160, 122, 0.15);
    --heading-color: #C48D8D;
    --sub-heading-color: #C0A5A5;
    }

    :root[data-theme='light'] {
    --bg-color: #ffffff;
    --text-color: #100c08;
    --button-bg-color: #100c08;
    --button-text-color: #ffffff;
    --nav-border-color: #adadad; 
    --nav-button-border-color: #100c08;
    --box-bg-color: #f5f3ed;
    --accent-color: #FF6F61;
    --shadow-color-1: rgba(255, 111, 97, 0.3);
    --shadow-color-2: rgba(255, 111, 97, 0.15);
    --heading-color: #6F4444;
    --sub-heading-color: #735963;
    }

    @media (prefers-color-scheme: light) {
    :root {
        --bg-color: #ffffff;
        --text-color: #100c08;
        --button-bg-color: #100c08;
        --button-text-color: #ffffff;
        --nav-border-color: #adadad; 
        --nav-button-border-color: #100c08;
        --box-bg-color: #f5f3ed;
        --accent-color: #FF6F61;
        --shadow-color-1: rgba(255, 111, 97, 0.3);
        --shadow-color-2: rgba(255, 111, 97, 0.15);
        --heading-color: #6F4444;
        --sub-heading-color: #735963;
    }
    }

    .flex-container,
    .flex-container1,
    .flex-container2,
    .flex-container3,
    .flex-container4,
    .flex-container5 {
    background-color: var(--bg-color);
    }

    .button-right{
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 1100;
    }