/**
 * 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@900&family=Ubuntu&display=swap');
@tailwind base;

@layer base {
  code {
  }
}

@tailwind components;
@tailwind utilities;

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

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

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

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

.navbar__item {
  background-color: #A6FAFF;
  border-color: black;
  border-width: 2px;
  border-radius: 10px;
  margin: 0 0.5rem;
  padding: 10px 15px;
}

.navbar__item:hover {
  background-color: #79F7FF;
  box-shadow: 2px 2px 0px 0px black;
  border-color: black;
  color: black;
  font-weight: bold;
  border-width: 2px;
  margin: 0 0.5rem;
}
*/

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

.navbar__link {
  text-decoration: underline;
  text-decoration-style: wavy;
}

.navbar__link--active {
  font-weight: bolder;
  text-decoration-thickness: 2px;
}


.navbar__link:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
}

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