/* @tailwind base; */
@tailwind components;
@tailwind utilities;

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #4594d5;
  --ifm-color-primary-dark: #2f87cf;
  --ifm-color-primary-darker: #2c7fc4;
  --ifm-color-primary-darkest: #2469a1;
  --ifm-color-primary-light: #5ca1da;
  --ifm-color-primary-lighter: #68a8dd;
  --ifm-color-primary-lightest: #8abce5;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #4594d5;
  --ifm-color-primary-dark: #2f87cf;
  --ifm-color-primary-darker: #2c7fc4;
  --ifm-color-primary-darkest: #2469a1;
  --ifm-color-primary-light: #5ca1da;
  --ifm-color-primary-lighter: #68a8dd;
  --ifm-color-primary-lightest: #8abce5;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
  --ifm-button-color: #fff;
}

[data-theme='dark'] .home .bg-dark {
  background: rgba(75, 85, 99);
}


[data-theme='dark'] .home .bg-light {
  background: #262b30;
}

.home .bg-dark {
  background: #fff;
}

.home .bg-light {
  background: rgba(75, 85, 99);
  color: #fff;
}

a:hover {
  color: unset;
  text-decoration: unset;
}

.navbar__logo {
  border-radius: 100%;
  overflow: hidden;
}