:root {
    --primary-bg-light: #f5f5f5;
    /* Light mode background color */
    --primary-bg-dark: #1a1a1a;
    /* Dark mode background color */

    --primary-text-light: #333;
    /* Light mode text color */
    --primary-text-dark: #e0e0e0;
    /* Dark mode text color */

    --accent-color-light: #3498db;
    /* Light mode accent color */
    --accent-color-dark: #2980b9;
    /* Dark mode accent color */

    --secondary-bg-light: #ffffff;
    /* Light mode secondary background color */
    --secondary-bg-dark: #2c3e50;
    /* Dark mode secondary background color */

    --border-color-light: #dcdcdc;
    /* Light mode border color */
    --border-color-dark: #34495e;
    /* Dark mode border color */

    --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Light mode box shadow */
    --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.6);
    /* Dark mode box shadow */

    --link-color-light: #3498db;
    /* Light mode link color */
    --link-color-dark: #2980b9;
    /* Dark mode link color */

    --link-hover-light: #217dbb;
    /* Light mode link hover color */
    --link-hover-dark: #1a6390;
    /* Dark mode link hover color */

    --white1: #ffffff;
    --white2: #f8f8f8;
    --white3: #e9e9e9;
    --white4: #dcdcdc;
    --black1: #222222;
    --black2: #2c2c2c;
    --black3: #000000;
}

/* Define the styles for the scrollbar track */
::-webkit-scrollbar {
    width: 10px;
}

/* Define the styles for the scrollbar handle */
::-webkit-scrollbar-thumb {
    background-color: var(--white2);
    /* Change the color to your preference */
    border-radius: 6px;
    opacity: 0.8;
}

/* Define the styles for the scrollbar track on hover */
::-webkit-scrollbar-track:hover {
    background-color: #f1f1f1;
    /* Change the color to your preference */
}

/* Define the styles for the scrollbar handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #2c3e50;
    /* Change the color to your preference */
}

/* Define the styles for the scrollbar corner */
::-webkit-scrollbar-corner {
    background-color: transparent;
}

body {
    background-color: var(--white4);
    font-family: 'Ubuntu', sans-serif;

}

.menubar{
    display: flex;
    background-color: var(--white1);
}