:root {
  --width: 300px;
  --x-speeda: 5s;
  --y-speeda: 11s;
  --x-speedb: 15s;
  --y-speedb: 10s;
  --x-speedc: 14s;
  --y-speedc: 12s;
  --transition-speed: 2.2s;
  --bg-color: white;
  --txt-color: coral;
  --blend-mode: darken;
}

@font-face {
  font-family: "Inter-Reg";
  src: url(../medias/fonts/Inter-Regular.ttf);
}

@font-face {
  font-family: "Inter-Bold";
  src: url(../medias/fonts/Inter-Bold.ttf);
}

@font-face {
  font-family: "Inter-Light";
  src: url(../medias/fonts/Inter-Light.ttf);
}

@font-face {
  font-family: "Saint";
  src: url(../medias/fonts/Saint.ttf);
}

body,
html {
  height: 100%;
  margin: 0;
}
html::-webkit-scrollbar{display:none;}

body {
  font: 20px/1.1em arial, sans-serif;
  /* background-color: lightblue; */
  background: linear-gradient(blueviolet, coral, blueviolet);
}

#bgImg {
  height: 100%;
  z-index: -9;
  position: fixed;
  top: 0;
  width: 100vw;
  background-image: url("../medias/rolands-varsbergs-miKmVyq3qhE-unsplash.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* filter: saturate(7); */
  mix-blend-mode: var(--blend-mode);
}

/*************************
Les boutons
*************************/
.lesBoutons {
  display: flex;
  z-index: 1;
  bottom: 0.1vw;
  position: fixed;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 93vw;
  align-content: center;
  align-items: center;
  margin-left: 3vw;
  margin-right: 3vw;
}

button {
  background-color: white;
  /*border: 3pt solid black;*/
  font-size: 2vw;
  padding: 0.4vw;
  border-radius: 20px;
  font-family: "Inter-Bold";

}

/*************************
TITRE
*************************/
.title {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: space-around;
  align-items: flex-end;
  justify-content: space-between;
  /* background-color: white; */
  /* border: 3pt solid black; */
  position: fixed;
  z-index: 1;
  top: 0.5vw;
  margin-left: 3vw;
  border-radius: 20px;
  min-width: -moz-available;
min-width: -webkit-fill-available;
min-width: fill-available;
}
.title > div{
  display: inline-flex;
}

h1 {
  font-size: 3vw;
  line-height: 5vw;
  margin:0;
  background-color: white;
border: 1pt solid white;
border-radius: 20px;
}
h1 > span{
  font-family: Saint;
  font-size: 2.5vw;
}
button > span{
  font-family: Saint;
  font-size: 2vw;
}

/*************************
 BOUTTONS
*************************/


.luggage-GRG-img,
.todolist-img {
  width: 30%;
  float: right;
}

.bandeau>figcaption {
  font-size: 1rem;
  font-weight: 900;
  float: right;
  font-family:"Inter-Bold";
  background-color: white;
  text-align: left;
  border-radius: 20px;
  padding:0.3vw;

}
#valiseBtn:hover, #todoBtn:hover{
  cursor: pointer;
  color: blueviolet;
}
.download {
  font-size: 1rem;
  font-weight: 900;
  float: right;
  color: black;
  text-decoration: none;
  font-family:"Inter-Bold";
  background-color: white;
  border-radius: 20px;
}
.download:hover{
  cursor: pointer;
}

p {
  /* text-align: center; */
  font-size: 1.5rem;
  font-family: "Inter-Light";
}
#todoPop > p{
  font-size: 1rem;
  font-weight: 900;
  font-family: "Inter-Black";
}

/****** POPUP DIV ********/

#valisePop {
  background-color: blueviolet;
  color: chartreuse;
  font-family: "Inter-Black";
}

#freeImgPop {
  background-color: blueviolet;
  color: chartreuse;
}
#ressourcesPop {
  background-color: blueviolet;
  color: chartreuse;
}
#todoPop::-webkit-scrollbar, #freeImgPop::-webkit-scrollbar, #valisePop::-webkit-scrollbar, #freeTypePop::-webkit-scrollbar, #freeToolPop::-webkit-scrollbar, #ressourcesPop::-webkit-scrollbar{
  display: none;
}
li {
  list-style: decimal-leading-zero;
  line-height: 2vw;
  color: chartreuse;
}

span {
  font-size: 0.7vw;
}

#freeTypePop {
  background-color: blueviolet;
  color: chartreuse;
  font-family: "Inter-Reg";
}

#freeToolPop {
  background-color: blueviolet;
  color: chartreuse;
  font-family: "Inter-Reg";
}

#freeImgBtn,
#freeTypeBtn,
#freeToolBtn {
  cursor: pointer;
}

#todoPop {
  background-color: blueviolet;
  color: chartreuse;
  font-family: "Inter-Black";
}
#todoPop > ul > li{
  list-style: square;
  font-family: Inter-Bold;
}

/****** JQUERY UI STYLE  ********/
.ui-widget.ui-widget-content {
  border: none;
}

.ui-widget .ui-widget {
  background: blueviolet;
  border: none;
  outline: none;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 10px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 10px;
}

.ui-widget-content {
  background: transparent;
}

.ui-widget-header {
  border: 2pt solid fuchsia;
  background: chartreuse;
  color: blueviolet;
  font-weight: bold;
}

.ui-widget-content a {
  color: chartreuse
}
ui-dialog-content ui-widget-content::-webkit-scrollbar{
  display: none;
}

/*************************
 PARTIES 
*************************/
.seance {
  background-color: var(--bg-color);
  border: 3pt solid fuchsia;
  width: 90vw;
  border-radius: 20px;
  margin-left: 3vw;
  margin-right: 5vw;
  margin-top: 15vh;
  cursor: url(../medias/cursorpalm.png), auto;
  /* mix-blend-mode: hard-light; */
  display: none;
  padding: 1vw;
  max-height: 35vw;
  overflow-y: scroll;
  position: absolute;
}
.seance::-webkit-scrollbar {
  display: none;
}
.seance1 {
  cursor: url("../medias/cursorsun.png"), auto;
}

.seance2 {
  cursor: url("../medias/avion.png"), auto;
}

.seance3 {
  cursor: url("../medias/desert.png"), auto;
}

.seance4 {
  cursor: url("../medias/dolphin.png"), auto;
}

.titre-seance {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.discover {
  display: block;
}

.active {
  background-color: blueviolet;
  color: chartreuse;
  border: 2pt solid fuchsia;
}


.scenario:hover {
  mix-blend-mode: normal;
}

.content-wrapper{
  display: flex;
}
.attentes > li{
  list-style-type: kannada;
  color: black;
}

.txt-scena {
  text-align: left;
  font-size: 2rem;
  line-height: normal;
  margin-left: 3vw;
  margin-right: 3vw;
  width: 55vw;
}


.img-icons {
  width: 5%;
  margin-right: 3vw;
}

h2 {
  font-size: 4rem;
  margin-left: 3vw;
  line-height: 4rem;
  font-family: "Inter-Reg";
  color: blueviolet;
}

h3 {
  font-size: 2.5rem;
  margin-left: 3vw;
  line-height: 2.5rem;
  color: blueviolet;
  font-family: "Inter-Reg";
}

.txtDiv {
  width: 90vw;
  height: 20vh;
  background-color: lightblue;
}

.grid-seance2 {
  margin-left: 3vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(7, auto);
  gap: 5px;
}

img {
  width: 96%;
}

/*************************
ANIMATION IMG MOVING
*************************/
.xa {
  /* background: linear-gradient(blueviolet, coral, blueviolet);
  border-radius: 50px; */
  mix-blend-mode:difference;
  position: absolute;
  top: 0;
  width: 20%;
  height: 5vh;
  animation: x var(--x-speeda) linear infinite alternate;

}

.ya {
  filter: saturate(7);
  width: 100%;
  animation: y var(--y-speeda) linear infinite alternate;
  mix-blend-mode: color-burn;
}

.xb {
  position: absolute;
  top: 0;
  width: 20%;
  height: 5vh;
  animation: x var(--x-speedb) linear infinite alternate;
  /* background: linear-gradient(blueviolet, coral, blueviolet);
  border-radius: 50px; */
  mix-blend-mode: hard-light;
}

.yb {
  mix-blend-mode: difference;
  width: 100%;
  animation: y var(--y-speedb) linear infinite alternate;
}

.xc {
  /* background: linear-gradient(blueviolet, coral, blueviolet);
  border-radius: 50px; */
  mix-blend-mode:color-burn;
  position: absolute;
  top: 0;
  width: 20%;
  height: 5vh;
  animation: x var(--x-speedc) linear infinite alternate;
}

.yc {
  mix-blend-mode: difference;
  width: 100%;
  animation: y var(--y-speedc) linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX(calc(100vw - var(--width)));
  }
}

@keyframes y {
  100% {
    transform: translateY(calc(500vh - var(--width)));
  }
}