@import url('https://fonts.googleapis.com/css2?family=Salsa&display=swap');

@import url('pages/carte.css');
@import url('pages/contact.css');
@import url('pages/homepage.css');
@import url('pages/traiteur.css');
@import url('layouts/header.css');
@import url('layouts/footer.css');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Salsa', cursive;
  }
  
  html {
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

/* <================= Variables =================> */
:root {
    --main-color: #26962a;
    --secondary-color: rgb(255, 167, 38);
    --text-color: #ffffff;
    --secondary-text-color: #26962a;
    --background-color: rgb(14 8 0);
    --section-color: white;
    --fade: linear-gradient(to top, #ffffff, transparent);
    --background-color2: #f8f8f8;
    --layer: rgba(255, 255, 255, 0.806);
  }

  body {
    overflow-x: hidden;
    min-height: 100vh;
    background : url("../../public/assets/mandala.jpg") center/cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    /*background-size: cover;*/
    background-size: 100vw 100vh;
  }
  
h1 {
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    font-style: italic;
    text-shadow: hoff voff blur #000;
    color: var(--main-color);
    position: relative;
    font-size: 5rem;
  }
  
  h1::before {  
    transform: scaleX(0);
    transform-origin: bottom right;
  }
  
  h1:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  
  h1::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background: #731c6e;
    z-index: -1;
    transition: transform .3s ease;
  }
  
  h2 {
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    font-style: italic;
    text-shadow: hoff voff blur #000;
    position: relative;
    color: var(--secondary-color);
    font-size: clamp(2em, 4vw, 3.8em);
    line-height: 1.3;
  }
  
  h2::before {  
    transform: scaleX(0);
    transform-origin: bottom right;
  }
  
  h2:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  
  h2::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background:#731c6e;
  
    z-index: -1;
    transition: transform .3s ease;
  }