body {
        color: #000000;
        font-family: Arial, sans-serif;
        background-color: #f3f3f3;
        margin: 0;
        padding: 0;
        transition: background-color 0.3s, color 0.3s;
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s, color 0.3s;
        border-style: solid;
        border-color: gray;
        margin-top: 10px; margin-bottom: 10px;
    }

    h1 {
        font-size: 28px;
        transition: color 0.3s;
    }

    p {
        font-size: 16px;
        transition: color 0.3s;
    }

    body.dark-mode {
        background-color: #121212;
        color: #fff;
    }

    body.dark-mode a {
        color: #bb86fc;
    }

    body.dark-mode .container {
        background-color: #292b2f;
        color: #fff;
    }

    body.dark-mode h1 {
        color: #fff;
    }

    body.dark-mode p {
        color: #fff; /* White text color for p in dark mode for better readability */
    }