@charset "UTF-8";
@font-face {
  font-family: "thin";
  src: url("../fonts/Bon.voyage.thin.otf");
}

::-webkit-scrollbar {
  display: none;
}

@font-face {
  font-family: "regular";
  src: url("../fonts/Bonvoyage.otf");
}

body {
  overflow-x: hidden;
}

head {
  margin: 50vh;
  padding: 2vh;
  display: flex-start;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000000;
  font-family: Arial, Helvetica, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin-top: 3vh;
  padding: 0vh;
  display: flex-start;
  justify-content: center;
  align-items: center;
  background: black;
  height: 170vh;
  width: 98vw;
  /* overflow: hidden; */
  font-family: "regular", sans-serif;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

/* ************************** Amaretto Sour titre cadre******************************* */
.bloctitre {
  /* background-color: #000000; */
  min-height: 90vh;
  position: relative;
  display: inline-block;
  justify-content: center;
  width: 96vw;
  color: rgb(196, 229, 240);
  /* border: 2vh dotted rgb(232, 166, 223); */
  text-decoration: none;
  font-family: "regular", sans-serif;
  overflow: hidden;
  transition: 0.3s;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  /* ANIMATION CLIGNOTE */
}

.border-bulb {
  border-radius: 40px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  min-height: 90vh;
  width: 96vw;
  border: 8px dotted rgb(196, 229, 240);
  z-index: 1;
  animation-name: bulb;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes bulb {
  0% {
    border: 10px dotted rgb(196, 229, 240);
  }
  100% {
    border: 10px dotted rgb(196, 229, 240);
  }
}

@keyframes pannel {
  100% {
    box-shadow: inset 0 0 3em rgb(0, 0, 0), 0 0 3em black;
  }
  0% {
    box-shadow: inset 0 0 3em rgb(252, 231, 5), 0 0 3em rgb(255, 0, 238);
  }
}

.pannel {
  min-height: 90vh;
  width: 96vw;
  position: absolute;
  z-index: 0;
  box-shadow: inset 0 0 3em rgb(252 231 5), 0 0 3em rgb(212 107 203);
  animation-name: pannel;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  border-radius: 40px;
}

.bloctitre::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* border-radius:100px; */
}

/* ***************************** Amaretto Sour stretched **************************** */

span.Amaretto {
  text-shadow: 1px 2px 10px rgb(255 255 255);
  display: inline-flex;
  margin-top: 37vh;
  margin-left: 3.5vw;
  font-size: 13vw;
  -webkit-transform: scale(1, 3.4);
}

/* .LasVegas{
  min-height: 5vh;
  position: absolute;
  display: flex;
  justify-content: center;
  width: 96vw;
  color: white;
  margin-left: 3vw;
  
 
  text-decoration: none;
  font-family: 'regular', sans-serif;
  
  overflow: hidden;
  transition: 0.3s;
} */

/* #etoile{
position: absolute;
top: 72vh;
margin-left: 58.5vw;
width: 12vw
} */

span.FromLasVegas {
  display: flex;
  margin-top: 16vh;
  margin-left: 64.5vw;
  font-size: 4em;
  text-shadow: 1px 2px 10px rgb(255 255 255);
  -webkit-transform: scale(1.1, 1.1);
}

/* *************************************** cartes ****************************** */

.bloccartes {
  height: 90vh;
}
.cartes {
  margin-top: 6%;
  /* margin-right: 20vh;
    margin-left:12vw ; */
  justify-content: space-around;
  position: sticky;
  top: 0px;
  display: flex;
  padding: 5vh 5vh;
  height: fit-content;
  /* max-width: 70vw; */
  border: 8px dotted rgb(196, 229, 240);
  border-radius: 2vw 2vw;
  overflow: hidden;
  width: 91%;
}

/* .aller:hover {
  
    background: black;
   
    /* transition-delay: 1s; 
} */

.cards {
  margin: 0;
  padding: 0;
  max-width: 90vw;
  min-height: 20vh;
  /* background-color: rgb(0, 0, 0); */
}

.card-flexbox {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  top: 0%;
  left: 0%;
  /* transform: translateX(-50%); */
  /* width: 90%; */
  /* height: 40%; */
}

.card-wrapper {
  position: relative;
  z-index: 0;
  width: 20vw;
  height: 50vh;
  perspective: 400px;
}

.card-wrapper:hover .card {
  transform-origin: center;
  transform: rotateY(180deg) translate(5%, 0%);
}

.imgcarte {
  pointer-events: fill;
  height: 100%;
  width: 100%;
}

.card-wrapper:hover {
  z-index: 0;
}

.card {
  position: relative;
  display: inline-block;
  height: fit-content;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.86, 0, 0.07, 1);
  color: white;
  animation-duration: 2.5s;
}

.card-front,
.card-back {
  position: absolute;
  border-radius: 3%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  height: fit-content;
  width: fit-content;
  color: white;
  background-color: white;
  flex-direction: row;
  justify-content: center;
}

.card-back {
  height: fit-content;
  width: fit-content;
  margin: auto;
  color: white;
  transition: 12s;
  text-align: center justify;
}

.card-front {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  width: 90%;

  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation-duration: 2.5s;
  /* animation-name: exemple10;
    animation-iteration-count: infinite;
    animation-direction: alternate; */

  box-shadow: white, 0 0 3em white;
}

.card-front p {
  background-color: white;
  position: relative;
  font-size: 2.5em;
  line-height: 0.8;
  transform: translateY(-30%);
  text-align: center;
  font-family: Briar;
  top: 50%;
}

.card-back {
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  background-color: rgb(212, 107, 203);
  align-items: center;
  transition: background 0.5s ease;

  box-shadow: inset 0 0 1em rgb(9, 255, 0), 0 0 5em rgb(42, 16, 240);
}

.card-back .b {
  position: absolute;
  margin-top: -2vh;

  font-family: "regular", Helvetica, sans-serif;

  color: white;

  background-color: rgb(212, 107, 203);
  text-align: center;
  transform: translateY(-30%);
  font-size: 2.5em;
  top: 50%;
  line-height: 0.8;
}

.cards2 {
  height: 400px;
  width: 270px;
  margin: 0;
  padding: 0;

  /* background-color: rgb(0, 0, 0); */
}

.card-flexbox2 {
  display: flex;
  top: 5vh;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  top: 0%;
  right: 0%;
  /* transform: translateX(-50%); */
  /* width: 90%; */
  /* height: 40%; */
}

.card-wrapper2 {
  position: relative;
  z-index: 0;
  width: 20vw;
  height: 50vh;
  perspective: 400px;
}

.cardbox {
  background-color: transparent;
  margin-left: 2.5vw;
  margin-right: 2.5vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.card-wrapper2:hover .card2 {
  transform-origin: center;
  transform: rotateY(180deg) translate(5%, 0%);
}

.card-wrapper2:hover {
  z-index: 0;
}

.card2 {
  position: relative;
  height: 400px;
  width: 270px;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.86, 0, 0.07, 1);
  animation-duration: 2.5s;
}

.card-front2,
.card-back2 {
  position: absolute;
  border-radius: 3%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.card-back2 {
  width: 90%;
  height: 100%;
  margin: auto;
  background: white;
  color: #f321d7;
  transition: 12s;
  text-align: center justify;
}

.card-front2 {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  width: 90%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation-duration: 2.5s;
  /* animation-name: exemple10;
    animation-iteration-count: infinite;
    animation-direction: alternate; */
  box-shadow: inset 0 0 3em rgb(252, 231, 5), 0 0 6em rgb(212, 107, 203);
}

.card-front2 p {
  position: relative;
  font-size: 2.5em;
  line-height: 0.8;
  transform: translateY(-30%);
  text-align: center;
  font-family: Briar;
  top: 50%;
}

.card-back2 {
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.5s ease;
  background-color: rgb(255, 0, 238);
  box-shadow: inset 0 0 6em rgb(252, 231, 5), 0 0 3em rgb(252, 231, 5);
}

.card-back2 .d {
  position: absolute;
  margin-top: -2vh;
  font-family: "regular", Helvetica, sans-serif;
  color: white;
  text-align: center;
  transform: translateY(-30%);
  font-size: 3.5em;
  top: 50%;
  line-height: 0.8;
}

.cards3 {
  margin: 0;
  padding: 0;
  max-width: 90vw;
  /* background-color: rgb(0, 0, 0); */
}

.card-flexbox3 {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  top: 0%;
  right: 0%;
  /* transform: translateX(-50%); */
  /* width: 90%; */
  /* height: 40%; */
}

.card-wrapper3 {
  position: relative;
  z-index: 0;
  width: 350px;
  height: 550px;
  perspective: 400px;
}

.card-wrapper3:hover .card3 {
  transform-origin: center;
  transform: rotateY(180deg) translate(5%, 0%);
}

.card-wrapper3:hover {
  z-index: 0;
}

.card3 {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  animation-duration: 2.5s;
}

.card-front3,
.card-back3 {
  position: absolute;
  border-radius: 3%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.card-back3 {
  width: 90%;
  height: 100%;
  margin: auto;
  transition: 12s;
  color: #f321d7;
  text-align: center justify;
}

.card-front3 {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  width: 90%;
  color: rgb(247, 0, 251);
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation-duration: 2.5s;
  /* animation-name: exemple10;
    animation-iteration-count: infinite;
    animation-direction: alternate; */

  box-shadow: rgb(247, 0, 251), 0 0 3em rgb(247, 0, 251);
}

.card-front3 p {
  position: relative;
  font-size: 2.5em;
  line-height: 0.8;
  transform: translateY(-30%);
  text-align: center;
  font-family: Briar;
  top: 50%;
}

.card-back3 {
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.5s ease;
  background: white;
  box-shadow: inset 0 0 1em rgb(9, 255, 0), 0 0 5em rgb(42, 16, 240);
}

.card-back3 .e {
  position: absolute;
  margin-top: -2vh;
  font-family: Arial, Helvetica, sans-serif;

  color: yellow;
  text-align: center;
  transform: translateY(-30%);
  font-size: 2.5em;
  top: 50%;
  line-height: 0.8;
}

.texte {
  position: relative;
  color: rgb(196, 229, 240);
  top: -8vh;
  left: 3vw;
  font-size: 8em;
  height: 10vh;
  width: 70vw;
  z-index: 2;
  text-shadow: 1px 1px 15px rgb(255, 255, 255);
  line-height: 80%;
  margin-top: -5vh;
}

/* #etoilesbas{
    position: absolute;
    top:-10vh;
    width: 90%;
    height: auto;
  }
  
  #etoilesbas2{
    position: absolute;
    top:3vh;
    left: 60vw;
    width: 40%;
    height: auto;
    z-index: 2;
  } */

/* ---------------------------------SMALLLLLLL----------------------------------- */

@media screen and (max-width: 900px) {
  .texte {
    position: relative;
    color: rgb(196, 229, 240);
    top: 0%;
    font-size: 3.5em;
    height: 10vh;
    width: 80vw;
    z-index: 2;
    text-shadow: 1px 1px 15px rgb(255, 255, 255);
    line-height: 80%;
    margin-top: -5vh;
    margin-bottom: -8%;
  }
}

@media screen and (max-width: 600px) {
  .texte {
    position: relative;
    color: rgb(196, 229, 240);
    top: 9vh;
    font-size: 3em;
    height: 10vh;
    width: 80vw;
    z-index: 2;
    text-shadow: 1px 1px 15px rgb(255, 255, 255);
    line-height: 80%;
    margin-top: -5vh;
    margin-bottom: -8%;
  }

  .cartes {
    width: 70vw;
    position: absolute;
    /* height: 100vh; */
    top: 122vh;
    max-width: 76vw;
    border: 5px dotted rgb(196, 229, 240);
    border-radius: 6vw 6vh;
    display: flex;
    flex-direction: column;
  }

  .card-back2 .d {
    position: absolute;
    margin-top: -2vh;
    font-family: "regular", Helvetica, sans-serif;
    color: white;
    text-align: center;
    transform: translateY(-30%);
    font-size: 4em;
    top: 50%;
    line-height: 0.8;
  }

  .cards2 {
    height: 45vh;
    width: 72.5vw;
    transform: translate(-37vw, 0vh);
    margin: 0;
    padding: 5em;

    /* background-color: rgb(0, 0, 0); */
  }

  .card-back2 {
    height: 100%;
    width: 100%;
    left: 3vw;
    top: -8vh;
    margin: 0%;
    color: white;
    transition: 12s;
    text-align: center justify;
  }

  .card-front2 {
    font-family: Arial, Helvetica, sans-serif;

    color: white;
    display: flex;

    height: 100%;
    width: 100%;
    transform: translate(-7vw, -8vh);

    animation-duration: 2.5s;
    /* animation-name: exemple10;
      animation-iteration-count: infinite;
      animation-direction: alternate; */
    box-shadow: white, 0 0 3em white;
  }

  .imgcarte {
    pointer-events: fill;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  span.FromLasVegas {
    display: flex;
    margin-top: 10%;
    margin-left: 52%;
    font-size: 2em;
    text-shadow: 1px 2px 10px rgb(255 255 255);
    -webkit-transform: scale(1.1, 1.1);
  }

  .border-bulb {
    border-radius: 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    min-height: 35vh;
    width: 96vw;
    border: 5px dotted rgb(196, 229, 240);
    z-index: 1;
    animation-name: pannel;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
  }

  @keyframes bulb {
    0% {
      border: 5px dotted rgb(196, 229, 240);
    }
    100% {
      border: 5px dotted rgb(196, 229, 240);
    }
  }

  @keyframes pannel {
    100% {
      box-shadow: inset 0 0 3em rgb(0, 0, 0), 0 0 3em black;
    }
    0% {
      box-shadow: inset 0 0 3em rgb(252, 231, 5), 0 0 3em rgb(255, 0, 238);
    }
  }

  .pannel {
    max-height: 35vh;
    width: 96vw;
    position: absolute;
    z-index: 0;
    box-shadow: inset 0 0 3em rgb(0, 0, 0), 0 0 3em rgb(0, 0, 0);

    animation-name: none;
    /* animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite; */
    border-radius: 40px;
  }
}