/**
 * 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.
 */

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@600&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@400&family=Ubuntu&display=swap');

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

.tracking-supatight{
  letter-spacing: -0.095em;
}

/*#announcementBar {
  @apply h-60 !important;
  @apply m-7;
  @apply p-7;
  @apply text-5xl;
  @apply text-black !important;
  @apply bg-lightaccent !important;
  @apply border-4 !important;
  @apply border-black !important;
  @apply shadow-neoyellow;
  font-family: 'Lexend Mega', sans-serif;
}
*/

.close {
  opacity: 1 !important;
}

body {
  background-color: theme('colors.lightbackground');
}

[data-theme='dark'] body {
  background-color: theme('colors.darkbackground');
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lexend Mega', sans-serif;
  font-weight: 600;
}

article h1 {
  font-size: 2.488rem;
}

article h2 {
  font-size: 2.074rem;
}

article h3 {
  font-size: 1.728rem;
}

article h4 {
  font-size: 1.44rem;
}

article h5 {
  font-size: 1.2rem;
}

article h6 {
  font-size: 1rem;
}

.underline {
  text-decoration-skip-ink: none !important;
}

p, li {
  font-family: 'Ubuntu', sans-serif;
}

.navbar {
  /* flex: auto; */
  border: 0;
  box-shadow: none;
  height: 96px;
}

.navbar__item {
  font-family: 'Lexend Mega', sans-serif;
}

.navbar__item:hover {
  font-family: 'Lexend Mega', sans-serif;
}

.navbar__title {
  font-family: Lexend Mega, sans-serif;
  font-size: 1.5rem;
}

.menu__list .theme-doc-sidebar-item-link-level-1  {
  font-family: Lexend Mega, sans-serif;
  font-size: 1rem;
}

.menu__list .theme-doc-sidebar-item-category-level-1  {
  font-family: Lexend Mega, sans-serif;
  font-size: 1rem;
}

main > .container > .row > .col  article {
  @apply shadow-rainbow;
  @apply bg-white;
  @apply border-4;
  @apply border-black;
  @apply px-8;
  @apply py-4;
}

.title_node_modules-\@docusaurus-theme-classic-lib-theme-DocCategoryGeneratedIndexPage-styles-module{
  font-family: Lexend Mega, sans-serif;
  font-size: 2rem;
}

.theme-doc-sidebar-container {
  border: 0px !important;
}

.table-of-contents {
  border: 0px !important;
}

.navbar__link--active {
  font-weight: bolder;
  text-decoration-thickness: 2px;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-skip-ink: none !important;
  text-underline-offset: 0.2em;
}


.navbar__link:hover {
  text-decoration-skip-ink: none !important;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 0.2em;
  color: inherit;
}

.markdown {
  @apply prose;
  @apply lg:prose-xl;
  @apply max-w-none;
  @apply lg:p-8;
}

/*
.navbar__items--right > .navbar__item {
  background-color: yellow;
  border-color: black;
  border-width: 2px;
  border-radius: 10px;
  margin: 0 0.5rem;
  padding: 10px 15px;
}

.navbar__items--right > .navbar__item:hover {
  background-color: #E3A018;
  box-shadow: 2px 2px 0px 0px black;
  border-color: black;
  color: black;
  font-weight: bold;
  border-width: 2px;
  margin: 0 0.5rem;
}

.navbar__logo {
  margin: 0;
}

.navbar__logo > img {
  padding: 18px;
}
*/

.navbar__items--right > .navbar__item > svg {
  display: none;
}

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #9723c9;
  --ifm-color-primary-dark: #8820b5;
  --ifm-color-primary-darker: #801eab;
  --ifm-color-primary-darkest: #6a188d;
  --ifm-color-primary-light: #a52ada;
  --ifm-color-primary-lighter: #a934dc;
  --ifm-color-primary-lightest: #b652e1;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #7df9ff;
  --ifm-color-primary-dark: #57f7ff;
  --ifm-color-primary-darker: #44f6ff;
  --ifm-color-primary-darkest: #0bf4ff;
  --ifm-color-primary-light: #a3fbff;
  --ifm-color-primary-lighter: #b6fcff;
  --ifm-color-primary-lightest: #effeff;
}