@charset "UTF-8";
/*COLOURS OF THE CHARTER*/
/*Général Background*/
/*Footer Background*/
/*general "transform" of the buttons/links*/
/*_______________________________________*/
/*for menu descriptions*/
/*general placement of items*/
li, .header, .header2__nav--arrow, .location, .discovery h2, .tutorial, .tutorial__elem .tutorial__step, .tutorial__button, .NEW_CONTENT::before, .menu__price--valid, .order {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/*For hover of tutorial button*/
/*For the "NOUVEAU" label*/
html {
  overflow-x: hidden;
}

body,
a,
a:hover {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAkdJREFUWEdjZBhgwDjA9jOMOoCoEFjifn27ijCjw42Xf7c82KsV3sDA+I9aUUfQATV6NxRTrBhuyQsysfz4zfB/1cW/u+/v1vCkliMIOqBW/6p2ujXLRWl+RmaQr3/++f9/zcV/e+/s0nCnhiOIckC2LfN5cV4m1rdfGf4JczMwUTMkSHLA/FP/ntkoMoioijKxUSskSHLA6ot/991/xTgxwIBxtZooI9uvP///r7jw9/AWAU2n1asZ/5KTMEl2QNg2TedOkxt+1HIEWQ4A+ZRajiDbAdRyBEUOoIYjKHYApY6gigMocQTVHECuI6jqAHIcQXUHkOoIih3QaXYlXoqf2R29FPz257+xnzazigQvI7juWHnhz8aEPVqB6OoocsAsu2vTw4yZ0/g5GJkIFcOXnv/7OfXyF95ZZ01+I6sl2wHTHK52RxqwFgpwMjD/+MPw7+ef/zgbKX/+Mvzfe+ffzfBtmrpUCYGpDtfrw/WYa4W5GZjffGH4u/z8n553Xxn24AyFf/8/MQi+OtdwwPEPxQ549ol5Y4Th/15xHkaWD98Z/i6/8LM/64BuKaEowCVPUhQsPP3nras6M78UHyPL5x8M/1Zc+DMjbb9WNrmWg/SR5IAP3/7/F+BiZARZvvL8v/mpBzRSKLGcaAekW7FclBaAtAm//fr/f+WlP6uTdmuHU2o5UQ4At4otGW7JCzGxfP8FbgFtStqrGcjAwPifLg4AWbLY7dpWFVEmpxuv/m5+uFsrghqtYZjjCaYBavgSnxmjDgAAGCDVMFPoq3UAAAAASUVORK5CYII=) 0 0, default;
}

/* 
the cursor comes from : https://icones8.fr/icons/set/cursor-pointer
CSS url link generated by : http://profilki.pl/en/generators/cursor-generator
*/
body {
  font-family: "Roboto", sans-serif;
  margin-inline: 0px;
  margin-top: 15px;
  margin-bottom: 0px;
}

ul {
  padding: inherit;
}

ol {
  -webkit-padding-start: 0px;
          padding-inline-start: 0px;
}

li {
  list-style: none;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

a {
  text-decoration: none;
  color: currentColor;
}

footer ul {
  margin: inherit;
}

@-webkit-keyframes SCREEN-EVENT {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    z-index: -1;
  }
}

@keyframes SCREEN-EVENT {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    z-index: -1;
  }
}

@-webkit-keyframes LOADING-EVENT {
  to {
    background-position: -200% center;
  }
}

@keyframes LOADING-EVENT {
  to {
    background-position: -200% center;
  }
}

@-webkit-keyframes NEW_CONTENT {
  50% {
    opacity: 0;
  }
}

@keyframes NEW_CONTENT {
  50% {
    opacity: 0;
  }
}

@-webkit-keyframes BORDER-EVENT {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@keyframes BORDER-EVENT {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@-webkit-keyframes MENU-EVENT {
  from {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes MENU-EVENT {
  from {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes ROTATE-ICON {
  0% {
    -webkit-transform: rotate(-270deg);
            transform: rotate(-270deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@keyframes ROTATE-ICON {
  0% {
    -webkit-transform: rotate(-270deg);
            transform: rotate(-270deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

.loading__screen {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  z-index: 1;
  inset: 0;
  background-color: whitesmoke;
  height: 100vh;
  -webkit-animation: SCREEN-EVENT 0s 3s;
          animation: SCREEN-EVENT 0s 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  font-family: "Shrikhand", sans-serif;
}

.fa-utensils {
  margin-right: 15px;
}

.loading__screen--anim {
  background-image: linear-gradient(225deg, #9c27b0 0%, #9356dc 29%, #ff79da 67%, #99e2d000 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: LOADING-EVENT 1.5s cubic-bezier(0.4, 0, 1, 1) infinite;
          animation: LOADING-EVENT 1.5s cubic-bezier(0.4, 0, 1, 1) infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  font-size: x-large;
}

@media screen and (min-width: 374px) {
  .loading__screen--anim {
    font-size: xx-large;
  }
}

@media screen and (min-width: 768px) {
  .loading__screen--anim {
    font-size: 5rem;
  }
}

/*header of the main page "index"*/
.header {
  position: relative;
  width: 100%;
  -webkit-box-shadow: 0px 2px 2px 1px lightgrey;
          box-shadow: 0px 2px 2px 1px lightgrey;
}

.header__logo {
  width: 50%;
  padding-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .header__logo {
    width: 40%;
  }
}

/*header of the restaurants pages*/
.header2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.header2__bg {
  width: 100%;
  height: 270px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (min-width: 768px) {
  .header2__bg {
    height: 500px;
  }
}

.header2__nav {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  margin-bottom: 20px;
}

.header2__nav--link1 {
  width: 15%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

.header2__nav--link2 {
  width: 70%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 400ms;
  transition: -webkit-transform 400ms;
  transition: transform 400ms;
  transition: transform 400ms, -webkit-transform 400ms;
}

.header2__nav .header2__nav--link2:hover {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.header2__nav--arrow {
  height: 30px;
  width: 30px;
  border-radius: 100%;
  margin-left: 10px;
  color: black;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 400ms;
  transition: -webkit-transform 400ms;
  transition: transform 400ms;
  transition: transform 400ms, -webkit-transform 400ms;
}

.header2__nav--arrow:hover {
  color: white;
  background-color: #9356dc;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.footer {
  background-color: #353535;
  height: 200px;
}

@media screen and (min-width: 1290px) {
  .footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.footer .footer__elem {
  margin-left: 25px;
}

@media screen and (min-width: 1290px) {
  .footer .footer__elem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.footer .footer__elem--links {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: white;
  margin-bottom: 10px;
}

@media screen and (min-width: 1290px) {
  .footer .footer__elem--links {
    margin-bottom: 0px;
    margin-inline: 65px;
  }
}

.footer .footer__elem--links:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  color: #f000b4;
}

.footer .footer__elem--links:hover .footer__icons {
  color: #9356dc;
}

.footer .footer__icons {
  width: 25px;
}

.footer .footer__title {
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  font-size: xx-large;
  color: white;
  font-family: "Shrikhand";
  font-style: italic;
  font-weight: bold;
  margin: 0px;
  margin-left: 25px;
  margin-bottom: 25px;
}

@media screen and (min-width: 1290px) {
  .footer .footer__title {
    /* @extend %adjustItem; ne passe pas à cause du @media :/*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: inherit;
    margin-bottom: inherit;
  }
}

.location {
  background-color: #dfddddb3;
}

/* (old code without input...)
.location__descript {
  font-weight: bold;
  margin-right: 30px;
}
.location__icon {
  margin-right: 15px;
}*/
input {
  border: none;
  font-size: large;
  text-align: center;
  -webkit-margin-before: 0.83em;
          margin-block-start: 0.83em;
  -webkit-margin-after: 0.83em;
          margin-block-end: 0.83em;
  background-color: #dfdddd00;
  margin-left: 20px;
  border-radius: 40px;
  padding: 10px;
}

input:focus,
input:hover {
  color: white;
  background-image: linear-gradient(0.99turn, #9356dc, #ff79da);
  -webkit-box-shadow: 1.5px 5px 10px 2px lightgrey;
          box-shadow: 1.5px 5px 10px 2px lightgrey;
}

.fa-map-marker-alt {
  position: absolute;
  content: "";
  top: 38%;
  left: 15%;
}

::-webkit-input-placeholder {
  color: black;
  opacity: 1;
}

:-ms-input-placeholder {
  color: black;
  opacity: 1;
}

::-ms-input-placeholder {
  color: black;
  opacity: 1;
}

::placeholder {
  color: black;
  opacity: 1;
}

.location__position {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.location__position:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.discovery {
  background-color: #f6f6f6;
  height: 290px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .discovery {
    background-color: inherit;
    width: 45%;
    height: inherit;
  }
}

@media screen and (min-width: 1245px) {
  .discovery {
    width: 30%;
  }
}

.discovery h2 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 100px;
  margin: 0px;
}

@media screen and (min-width: 768px) {
  .discovery h2 {
    text-align: center;
    height: inherit;
    margin: initial;
    margin-top: 48px;
  }
}

.discovery__btn {
  margin-top: 15px;
  height: 50px;
  background-image: linear-gradient(0.99turn, #9356dc, #ff79da);
  -webkit-box-shadow: 1.5px 5px 10px 2px lightgrey;
          box-shadow: 1.5px 5px 10px 2px lightgrey;
  color: white;
  font-size: larger;
  padding-inline: 20px;
  border: none;
  border-radius: 40px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

@media screen and (min-width: 768px) {
  .discovery__btn {
    margin-top: 57px;
  }
}

.discovery .discovery__btn:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-box-shadow: 1.5px 5px 10px 2px #979797;
          box-shadow: 1.5px 5px 10px 2px #979797;
  background-image: linear-gradient(0.01turn, #9356dc, #ff79da);
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .discovery .discovery__descript {
    margin-top: 70px;
    font-size: large;
  }
}

.tutorial {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: inherit;
      -ms-flex-align: inherit;
          align-items: inherit;
  padding-inline: 5px;
}

@media screen and (min-width: 768px) {
  .tutorial {
    padding-inline: inherit;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 45%;
  }
}

@media screen and (min-width: 1245px) {
  .tutorial {
    width: 30%;
  }
}

.tutorial h2 {
  margin-top: 105px;
  margin-bottom: 25px;
  width: 100%;
  margin-top: 50px;
  margin-left: 15px;
  width: inherit;
}

@media screen and (min-width: 768px) {
  .tutorial h2 {
    text-align: center;
    margin-left: inherit;
    width: 100%;
  }
}

.tutorial__elem {
  margin-bottom: 15px;
  padding-inline: 5px;
}

.tutorial__elem .tutorial__step {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: #9356dc;
  color: white;
  position: absolute;
}

.tutorial__button {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  background-color: #f6f6f6;
  -webkit-box-pack: inherit;
      -ms-flex-pack: inherit;
          justify-content: inherit;
  height: 65px;
  -webkit-box-shadow: 1.5px 5px 10px 2px lightgrey;
          box-shadow: 1.5px 5px 10px 2px lightgrey;
  color: black;
  font-size: x-large;
  padding-inline: 20px;
  border: none;
  border-radius: 25px;
  margin-left: 15px;
  font-size: larger;
  width: 100%;
}

.tutorial__button .tutorial__icons {
  margin-left: 10px;
  width: 35px;
  color: grey;
}

.tutorial__button:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  background-color: #9356dc;
  background-color: #f2eafb;
  margin-left: 40px;
  cursor: pointer;
}

.tutorial__button:hover .tutorial__icons {
  color: #9356dc;
  margin-left: -5px;
  width: 30px;
}

.restaurant {
  background-color: #f6f6f6;
  padding-inline: 20px;
}

.restaurant h2 {
  padding-top: 20px;
}

@media (min-width: 475px) {
  .restaurant {
    padding-inline: 10px;
  }
}

@media screen and (min-width: 768px) {
  .restaurant {
    padding-inline: inherit;
  }
  .restaurant__title {
    text-align: center;
  }
}

.restaurant__cards {
  border-radius: 15px;
  margin-left: 0px;
  margin-right: 0px;
  height: 250px;
  width: 100%;
  margin-bottom: 30px;
  background-color: white;
  -webkit-box-shadow: 0 0 16px #0000002e;
          box-shadow: 0 0 16px #0000002e;
}

@media screen and (min-width: 768px) {
  .restaurant__cards {
    -webkit-box-shadow: none;
            box-shadow: none;
    height: 295px;
  }
  .restaurant__cards:hover {
    -webkit-box-shadow: 0 0 16px #0000002e;
            box-shadow: 0 0 16px #0000002e;
  }
}

@media screen and (min-width: 1245px) {
  .restaurant__cards {
    height: 400px;
  }
}

.restaurant__cards .restaurant__img1 {
  width: 100%;
  height: 155px;
  border-radius: 15px 15px 0px 0px;
  background-size: cover;
  background-image: url("../images/restaurants/jay-wennington-N_Y88TWmGwA-unsplash.jpg");
}

@media screen and (min-width: 768px) {
  .restaurant__cards .restaurant__img1 {
    height: 200px;
  }
}

@media screen and (min-width: 1245px) {
  .restaurant__cards .restaurant__img1 {
    height: 315px;
  }
}

.restaurant__cards .restaurant__img2 {
  width: 100%;
  height: 155px;
  border-radius: 15px 15px 0px 0px;
  background-size: cover;
  background-image: url("../images/restaurants/stil-u2Lp8tXIcjw-unsplash.jpg");
}

@media screen and (min-width: 768px) {
  .restaurant__cards .restaurant__img2 {
    height: 200px;
  }
}

@media screen and (min-width: 1245px) {
  .restaurant__cards .restaurant__img2 {
    height: 315px;
  }
}

.restaurant__cards .restaurant__img3 {
  width: 100%;
  height: 155px;
  border-radius: 15px 15px 0px 0px;
  background-size: cover;
  background-image: url("../images/restaurants/toa-heftiba-DQKerTsQwi0-unsplash.jpg");
  background-position: bottom;
}

@media screen and (min-width: 768px) {
  .restaurant__cards .restaurant__img3 {
    height: 200px;
  }
}

@media screen and (min-width: 1245px) {
  .restaurant__cards .restaurant__img3 {
    height: 315px;
  }
}

.restaurant__cards .restaurant__img4 {
  width: 100%;
  height: 155px;
  border-radius: 15px 15px 0px 0px;
  background-size: cover;
  background-image: url("../images/restaurants/louis-hansel-shotsoflouis-qNBGVyOCY8Q-unsplash.jpg");
  background-position: bottom;
}

@media screen and (min-width: 768px) {
  .restaurant__cards .restaurant__img4 {
    height: 200px;
  }
}

@media screen and (min-width: 1245px) {
  .restaurant__cards .restaurant__img4 {
    height: 315px;
  }
}

.NEW_CONTENT {
  position: relative;
}

.NEW_CONTENT::before {
  background-color: #99e2d0;
  color: #278870;
  content: "Nouveau";
  position: absolute;
  top: 30px;
  right: 15px;
  width: 100px;
  height: 35px;
  font-weight: bold;
  border-radius: 2px;
  -webkit-animation: NEW_CONTENT 2.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite;
          animation: NEW_CONTENT 2.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite;
}

figcaption {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 15px;
}

figcaption h3 {
  margin-bottom: 10px;
}

.restaurant__heart--1 {
  position: absolute;
  font-size: x-large;
  bottom: 15px;
  right: 20px;
}

.restaurant__heart--1 .restaurant__heart--1:hover {
  opacity: 0;
}

.restaurant__heart--2 {
  position: absolute;
  font-size: x-large;
  bottom: 15px;
  right: 20px;
  opacity: 0;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 400ms;
  transition: -webkit-transform 400ms;
  transition: transform 400ms;
  transition: transform 400ms, -webkit-transform 400ms;
}

.restaurant__heart--2:hover {
  opacity: 1;
  color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9356dc), to(#ff79da));
  background-image: linear-gradient(0.5turn, #9356dc, #ff79da);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.restaurant__cards--links {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (min-width: 768px) {
  .container1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
}

@media (min-width: 475px) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
  .container .restaurant__cards--links {
    width: 50%;
    margin-inline: 5px;
  }
}

@media (min-width: 768px) {
  .container .restaurant__cards--links {
    width: 35%;
  }
}

.menu {
  background-color: #f6f6f6;
  position: relative;
  border-radius: 35px 35px 0px 0px;
  margin-top: -55px;
  padding: 10px;
}

.menu__bloc {
  padding-inline: 5px;
  margin-bottom: 40px;
}

@media screen and (min-width: 1290px) {
  .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin-top: -29px;
    height: 721px;
  }
  .menu__bloc {
    width: 30%;
  }
}

.menu__titleBloc {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (min-width: 768px) {
  .menu__titleBloc {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (min-width: 1290px) {
  .menu__titleBloc {
    width: 100%;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    margin-bottom: 25px;
  }
}

.menu__titleBloc .menu__heart--1 {
  position: absolute;
  top: 29px;
  font-size: x-large;
  right: 15px;
}

@media screen and (max-width: 330px) {
  .menu__titleBloc .menu__heart--1 {
    top: 20px;
    right: 0px;
  }
}

.menu__titleBloc .menu__heart--2 {
  position: absolute;
  top: 29px;
  font-size: x-large;
  right: 15px;
  opacity: 0;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 400ms;
  transition: -webkit-transform 400ms;
  transition: transform 400ms;
  transition: transform 400ms, -webkit-transform 400ms;
}

@media screen and (max-width: 330px) {
  .menu__titleBloc .menu__heart--2 {
    top: 20px;
    right: 0px;
  }
}

.menu__titleBloc .menu__heart--2:hover {
  opacity: 1;
  color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9356dc), to(#ff79da));
  background-image: linear-gradient(0.5turn, #9356dc, #ff79da);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.menu__title {
  font-family: "Shrikhand", sans-serif;
  font-size: 28px;
  -webkit-transition: all 1s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: all 1s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@media screen and (max-width: 330px) {
  .menu__title {
    font-size: 22px;
  }
}

@media screen and (min-width: 768px) {
  .menu__title {
    margin-right: 30px;
  }
}

.menu__underTitle {
  margin-bottom: 3px;
}

.menu__underTitle--border {
  width: 50px;
  height: 3px;
  background-color: #99e2d0;
  margin-bottom: 15px;
  -webkit-animation: BORDER-EVENT 400ms cubic-bezier(0.4, 0, 0.2, 1);
          animation: BORDER-EVENT 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-transform-origin: 0%;
          transform-origin: 0%;
}

@media screen and (min-width: 1290px) {
  .menu__underTitle--border {
    margin-bottom: 40px;
  }
}

.menu__btn:nth-child(1) {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}

.menu__btn:nth-child(2) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.menu__btn:nth-child(3) {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.menu__btn:nth-child(4) {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}

.menu__btn:nth-child(5) {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}

.menu__btn:nth-child(6) {
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}

.menu__btn:nth-child(7) {
  -webkit-animation-delay: 700ms;
          animation-delay: 700ms;
}

.menu__btn:nth-child(8) {
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}

.menu__btn:nth-child(9) {
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
}

.menu__btn:nth-child(10) {
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}

.menu__btn {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 65px;
  border-radius: 15px;
  margin-top: 10px;
  -webkit-box-shadow: 0 0 16px #0000002e;
          box-shadow: 0 0 16px #0000002e;
  -webkit-animation: MENU-EVENT 1s;
          animation: MENU-EVENT 1s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}

@media screen and (min-width: 1290px) {
  .menu__btn {
    margin-bottom: 35px;
  }
}

.menu__btn:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.menu__btn--margin {
  margin-bottom: 40px;
}

.menu__descrip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.menu__descrip p {
  margin: inherit;
}

.menu__descrip h4 {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 5px;
}

.menu__descrip--entitled {
  overflow: hidden;
  width: 100px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 100%;
  padding: 10px;
}

.menu__descrip--entitled p {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.menu__descrip:hover {
  cursor: pointer;
}

.menu__descrip:hover .menu__price--valid {
  opacity: 1;
  width: 120px;
  margin-left: 10px;
  background-color: #99e2d0;
}

.menu__descrip:hover .menu__price--valid .fas {
  -webkit-animation: ROTATE-ICON 0.5s ease;
          animation: ROTATE-ICON 0.5s ease;
}

.menu__price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  font-size: large;
  font-weight: bold;
  margin-top: 0px;
  padding-bottom: 9px;
}

.menu__price--valid {
  background-color: white;
  border-radius: 0px 15px 15px 0px;
  color: white;
  opacity: 0;
  width: 5%;
  -webkit-transition: all 1s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: all 1s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.menu__price--valid .fas {
  font-size: x-large;
}

.order {
  height: 120px;
  width: 100%;
}

.order__btn {
  margin-top: 15px;
  height: 50px;
  background-image: linear-gradient(0.99turn, #9356dc, #ff79da);
  -webkit-box-shadow: 1.5px 5px 10px 2px lightgrey;
          box-shadow: 1.5px 5px 10px 2px lightgrey;
  color: white;
  font-size: larger;
  padding-inline: 20px;
  border: none;
  border-radius: 40px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  width: 210px;
}

.order__btn:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-box-shadow: 1.5px 5px 10px 2px #979797;
          box-shadow: 1.5px 5px 10px 2px #979797;
  background-image: linear-gradient(0.01turn, #9356dc, #ff79da);
  cursor: pointer;
}

/*I'm not ashamed of them but I don't know where to put them*/
/*scroll bar customization*/
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(#ff79da), to(#9356dc));
  background: linear-gradient(transparent, #ff79da, #9356dc);
  border-radius: 6px;
}

::-webkit-scrollbar-track {
  background-color: #9356dc;
}

/*W3C validator css logo*/
.W3C {
  display: none;
}

@media screen and (min-width: 1506px) {
  .W3C {
    display: initial;
  }
}
/*# sourceMappingURL=style.css.map */