@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'fonts/montserrat.css';
@import 'fonts/source-sans-pro.css';
@import 'fonts/source-code-pro.css';

:root {
  --ifm-color-primary: #892ca0;
  --ifm-color-primary-darkest: #5f246b;
  --ifm-color-primary-light: #bd58dd;
  --ifm-color-primary-lightest: #e3b4f3;
  --ifm-code-fonts-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(43, 39, 53, 0.1);
}

/* for readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #893ca0;
  --ifm-color-primary-darkest: #6f246b;
  --ifm-color-primary-light: #bd59dd;
  --ifm-color-primary-lightest: #e4b4f3;
  --docusaurus-highlighted-code-line-bg: rgba(44, 39, 53, 0.3);
}

.breadcrumbs__link {
  @apply -my-2;
}

.menu__list {
  @apply mt-10;
}

.navbar__title {
  font-family: Montserrat;
  font-weight: 500 !important;
  /* font-size: 200%; */
  padding: 8px 0px;
  letter-spacing: -1.5px !important;
  font-kerning: normal !important;
}

#__docusaurus > nav > div.navbar__inner > div:nth-child(1) > a > b {
  font-size: xxx-large;
  line-height: 2rem;
}

.navbar__logo {
  height: 6.25rem;
}

.navbar {
  box-shadow: none;
  @apply bg-gradient-to-r from-blue-500  to-purple-700 dark:from-blue-700 dark:to-purple-900;
}

.navbar--fixed-top {
  height: 7rem;
}

.navbar__title,
.navbar__link,
.clean-btn {
  @apply text-white dark:text-gray-50;
  font-size: x-large;
}

.navbar__link svg,
.footer__item svg {
  display: inline;
  margin-left: 12px;
}

.navbar__link,
.navbar__brand {
  @apply no-underline transition duration-150 ease-linear hover:text-purple-300;
}

.footer {
  @apply bg-purple-700 dark:bg-purple-900;
}

.footer a {
  @apply text-blue-50 no-underline hover:text-blue-300 dark:hover:text-blue-500;
}

.footer__copyright p{
  display: block;
  font-size: medium;
  padding: 0px;
}

.footer__copyright a{
  font-size: medium;
  @apply text-blue-300 hover:text-blue-500
}

.menu a {
  @apply no-underline;
}

.table-of-contents__link {
  @apply no-underline;
}

.navbar__link--active {
  @apply text-purple-300 underline dark:text-purple-300 dark:underline;
}

/* ------------------ */
/* Font Configuration */
/* ------------------ */
@layer base {
  /* headings */
  h1,
  h2,
  h2>a,
  h3,
  h4,
  h5 {
    @apply font-display dark:text-gray-300;
  }

  /* main text */
  p,
  dl,
  dt,
  dd,
  ol,
  figcaption,
  blockquote {
    @apply font-text text-lg dark:text-gray-100 lg:text-xl;
  }

  /* monospace */
  code,
  pre {
    @apply font-mono text-lg dark:text-gray-100 lg:text-xl;
  }

  a {
    @apply font-text text-lg text-blue-500 underline underline-offset-4 transition duration-150 ease-linear hover:opacity-90 dark:text-blue-500 dark:hover:text-blue-700 lg:text-xl;
  }

  /* headings size and weight */
  h1 {
    @apply text-4xl font-bold lg:text-5xl;
  }
  h2 {
    @apply text-2xl font-bold lg:text-3xl;
  }
  h3 {
    @apply text-xl font-semibold lg:text-2xl;
  }
  h4 {
    @apply text-lg font-semibold lg:text-xl;
  }
  h5 {
    @apply text-base font-semibold lg:text-lg;
  }
}

/** light-mode dark-mode image support for github **/
[data-theme='light'] img[src$='#gh-dark-mode-only'],
[data-theme='dark'] img[src$='#gh-light-mode-only'] {
  display: none;
}