@charset "UTF-8";


@font-face {
  font-family: 'opti';
  src: url("../fonts/OPTIsupAuvantGothicBold.otf") format("opentype");
}

body {
  height: 200vh;
  background-color: rgb(226, 1, 1);

}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}



.white {
  position: fixed;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
  width: 100vw;
  background-color: white;
  border-radius: 30px 30px 30px/30px 30px 30px;
}

.white {
  position: fixed;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
  width: 100vw;
  border: solid rgb(226, 1, 1) 6px;
  border-radius: 30px 30px 30px/30px 30px 30px;
}

.shape {
  fill: none;

}

/* rgb(13, 13, 144) */
#tutorial {
  position: fixed;
  overflow: visible;
  width: 40vw;
  left: 40%;
  font-family: 'opti';
  top: 100px;
  transform: rotate(-150deg);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}



.vid {
  position: fixed;
  top: 0%;
  left: 0%;
  height: 100vh;

}

.gato {
  position: fixed;
  width: 40vw;
  left: 50%;
  top: 50%;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%)
}

.fleche {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.étape2 {
  position: absolute;
  align-items: center;
  height: 53vh;
  /* border: 5px solid rgb(13, 13, 144) ; */
  mix-blend-mode: hard-light;
  bottom: 0%;
  position: absolute;
  top: 50%;
  opacity: 80%;
  left: 50%;
  transform: translate(-50%, 35%) scale(1);
  pointer-events: none;

}