:root {
  /* Gray's */
  --primary-gray-color: #7f7f7f;
  --lightgray-color: #7f7f7f33;
  --very-lightgray-color: #e1e1e1;
  --gray: rgba(240, 240, 240, 1.0);
  --gray-700: rgba(180, 180, 180, 0.3);
  /* Font size */
  --logo-size: 16px;
  --font-size-1: 25px;
  --font-size-1-5: 12px;
  --font-size-2: 10px;
  --font-size-3: 8px;
  --transition-3th: 0.3s;
  --transition-5th: 0.5s;
  /*Background color */
  --main-bg-color: #ffffff;
  --alt-bg-color: #111111;

  /* Font color */
  --main-text-color: #111111;
  --alt-text-color: #ffffff;
  
  --black: rgba(25, 25, 25, 1.0);
  --gray-700: rgba(180, 180, 180, 0.5);
  --bubble-gray: rgba(220, 220, 220, 0.3);
}

:root:has(#light-theme-toggle:checked) {
  --gray-700: rgba(180, 180, 180, 0.5);
  --bubble-gray: rgba(220, 220, 220, 0.3);

  /*Background color */
  --main-bg-color: #ffffff;
  --alt-bg-color: #111111;

  /* Font color */
  --main-text-color: #111111;
  --alt-text-color: #ffffff;
  
  --black: rgba(25, 25, 25, 1.0);
}

:root:has(#dark-theme-toggle:checked) {
  --gray-700: rgba(180, 180, 180, 0.3);
  --bubble-gray: rgba(220, 220, 220, 0.1);

  /* Background color */
  --main-bg-color: #111111;
  --alt-bg-color: #ffffff;

  /* Font color */
  --main-text-color: #ffffff;
  --alt-text-color: #111111;
  
  --black: rgba(25, 25, 25, 1.0);
}