:root {
  /* Default Color (white) */
  --theme-color: #333; 
  --shadow-color: #ddd; 
  --bgshadow-color: #eee; 
  --base-color: #fff; 

  /* Top Navigation Bar */
  --topnav-bg-color: #fff; 
  --topnav-color: #333;
  --topnav-hover-bg-color: #f0f0f
  --topnav-hover-color: #000;
  --topnav-active-bg-color: #e0e0e0;
  --topnav-active-color: #000; 

  /* Buttons */
  --button-bg-color: #f0f0f0;
  --button-text-color: #333; 
  --button-hover-bg-color: #e0e0e0; 
  --button-hover-text-color: #000; 
  
    /* Background Image */
    --background-image-url: url("/assets/image/WhiteBlanket.png");
  
    /* Serachbar */
    --searchbar-bg-color: #f9f9f9;
    --searchbar-color: #333;

    /* Title */
    --title-color: #333
  }
  
  body {
    background-color: var(--base-color);
    color: var(--theme-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .topnav {
    background-color: var(--topnav-bg-color);
    overflow: hidden;
    border-radius: 10px;
    opacity: 0.5;

  }
  
  .topnav a {
    float: left;
    color: var(--topnav-color);
    text-align: center;
    padding: 20px 20px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .topnav a:hover {
    background-color: var(--topnav-hover-bg-color);
    color: var(--topnav-hover-color);
  }
  
  .topnav a.active {
    background-color: var(--topnav-active-bg-color);
    color: var(--topnav-active-color);
  }
  
  button, .button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }
  
  button:hover, .button:hover {
    background-color: var(--button-hover-bg-color);
    color: var(--button-hover-text-color);
  }
  
  .topnav #icon {
    height: 38px; /* Adjust the height as needed */
    float: right; /* Aligns the icon to the right */
    padding: 10px; /* Adds some space around the icon */
  }
  .title {
    color: var(--title-color);
  }
  body {
    top: 50%;
    font-family: 'Poppins', sans-serif;
    color: #4c4c4c;
    background-image: var(--background-image-url);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    transition: 0.5s;
    scroll-behavior: smooth;
  }
  
  .searchbar {
    font-size: 14px;
    font-family: Poppins, sans-serif;
    color: var(--searchbar-color);
    display: flex;
    z-index: 3;
    height: 44px;
    background: var(--searchbar-bg-color);
    backdrop-filter: blur(40px);
    box-shadow: none;
    border-radius: 24px;
    margin: 0 auto;
    min-width: 200px;
    width: auto;
    max-width: 100px;
    transition: 0.5s;
    margin-top: 7px
  }

  .dark-theme {
    /* Overrides for dark theme */
    --theme-color: #e0e0e0;
    --shadow-color: #1d1f20;
    --bgshadow-color: #242528;
    --base-color: #121212;
    --topnav-bg-color: #181818;
    --topnav-color: #e0e0e0;
    --topnav-hover-bg-color: #2b2b2b;
    --topnav-hover-color: #ffffff;
    --topnav-active-bg-color: #232424;
    --topnav-active-color: #ffffff;
    --button-bg-color: #333333;
    --button-text-color: #ffffff;
    --button-hover-bg-color: #454545;
    --button-hover-text-color: #ffffff;
    --background-image-url: url("/assets/image/BlackBlanket.png"); /* Dark theme background image */
    --title-color: #ffffff
  }
  
  body.dark-theme {
    background-image: var(--background-image-url);
  }