@import url('https://fonts.googleapis.com/css2?family=Gruppo&family=Monsieur+La+Doulaise&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Ephesis&family=Gruppo&family=Monsieur+La+Doulaise&display=swap');
@import "tailwindcss";


:root {
  --background: rgb(245,235,221);
  --color-bgMenu: rgb(204, 195, 181);
  --color-text: rgb(92,74,66);
  --color-title: rgb(216,163,157);
  --color-accent: rgb(203,174,158);
  --color-buttons: rgb(200,213,193);
  --color-bold: rgb(238,200,195);
}


@theme {
  --breakpoint-tablet: 768px;
  --breakpoint-laptop: 1024px;
  --breakpoint-desktop: 1280px;
  --breakpoint-big : 1536px;
}

@theme inline {
  --color-background: var(--background);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --text: var(--color-text);
  --title: var(--color-title);
  --accent: var(--color-accent);
  --buttons: var(--color-buttons);
  --bold: var(--color-bold);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Grupo", Arial, Helvetica, sans-serif;
}

b {
  color : var(--color-bold)
}

button {
  background: var(--color-buttons);
  padding: 0.5rem 2rem;
  border-radius: 0.5rem;
}

button:hover {
  background: var(--color-accent);
  cursor: pointer;
}

footer {
  background: var(--color-menu);
}

.logo {
  font-family: "Monsieur La Doulaise", cursive;
  font-weight: 400;
  font-style: normal;
}

.menu-ellipse {
  clip-path: ellipse(50% 34% at 50% 100%)
}


/* FILTRES DE COULEUR */

.filterToText {
  filter: brightness(0) saturate(100%) invert(28%) sepia(8%) saturate(1314%) hue-rotate(333deg) brightness(91%) contrast(83%);
}