:root {
  --fibbo-primary: #B978ED;
  --fibbo-yellow: #F5EA70;
  --fibbo-black: #0A0901;
  --fibbo-black-300: #1A151E;
  --fibbo-black-600: #2A252C;
  --fibbo-secondary: #FFFBE4;
  --fibbo-secondary-300: #f4eecc;

  /* Font */
  --vp-c-text-1: var(--fibbo-black);

  /* Brand Primary Color */
  --vp-c-brand-1: var(--fibbo-primary);
  --vp-c-brand-2: var(--fibbo-primary);

  /* Primary Button */
  --vp-button-brand-bg: var(--fibbo-primary);
  --vp-button-brand-hover-bg: var(--fibbo-primary);
  --vp-button-brand-active-bg: var(--fibbo-primary);
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-active-text: var(--vp-c-white);

  /* Backgrounds */
  --vp-c-bg: var(--fibbo-secondary);
  --vp-c-bg-alt: var(--fibbo-secondary-300);
  --vp-c-bg-soft: var(--fibbo-secondary-300);

  /* Sidebar */
  --vp-sidebar-bg-color: var(--fibbo-secondary);

  /* Grey Code Background */
  --vp-code-bg: var(--fibbo-secondary-300);

  /* Divider */
  --vp-c-divider: var(--fibbo-secondary-300);

  /* Black */
  --vp-c-black: #0E0317;
}

.VPButton.medium.alt {
  color: var(--fibbo-secondary);
  background: var(--fibbo-black-300);
}
.VPButton.medium.alt:hover {
  color: var(--fibbo-secondary);
  background: var(--fibbo-black-300);
}
.VPImage.logo {
  height: 65%;
}

.dark {
  /* Brand Primary Color */
  --vp-c-brand-1: var(--fibbo-primary);
  --vp-c-brand-2: var(--fibbo-primary);

  /* Font */
  --vp-c-text-1: var(--fibbo-secondary);

  /* Backgrounds */
  --vp-c-bg: var(--fibbo-black);
  --vp-c-bg-alt: var(--fibbo-black-300);
  --vp-c-bg-elv: var(--fibbo-black-300);
  --vp-c-bg-soft: var(--fibbo-black-300);

  /* Sidebar */
  --vp-sidebar-bg-color: var(--fibbo-black);

  /* Grey Code Background */
  --vp-code-bg: var(--fibbo-black-300);

  /* Divider */
  --vp-c-divider: var(--fibbo-black-600);

  /* White */
  --vp-c-white: var(--fibbo-secondary);
}
