@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@font-face {
  font-family: f1;

  font-display: swap;

  src: url(/fonts/f1.woff2) format("woff2"), url(/fonts/f1.woff) format("woff");
}

@font-face {
  font-family: f2;

  font-display: swap;

  src: url(/fonts/f1.woff2) format("woff2"), url(/fonts/f2.woff) format("woff");
}

h1 {
  font-family: "Fraunces", serif !important;

  font-weight: 600;
}

h2 {
  font-family: "Fraunces", serif;
}

p {
  line-height: normal;
}

.h_tar h1,
.tsection h2 {
  font-family: "Roboto", sans-serif !important;
}

.menu-bas,
.partie_bas {
  font-family: "Roboto", sans-serif;
}

.txt_sous {
  font-family: f2, sans-serif;

  font-size: 15px !important;
}

.container h3 {
  font-family: "Roboto", sans-serif !important;
}
.invisible {
  display: none;
}
.hp_text {
  margin-top: 18%;

  font-size: 1.5rem;

  margin-left: 5%;

  position: fixed;
}

.span_titlet {
  background-image: linear-gradient(45deg, #a8c5de 0%, #c79dde 100%);

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;
}

.span_titlet2 {
  background-image: linear-gradient(45deg, #b08676 0%, #f5d8a4 100%);

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;
}

/* html,

body {

  scroll-behavior: smooth;

  overflow: hidden;

} */

/* overflow-y: hidden; */

body {
  font-family: "Roboto", sans-serif;

  overflow-x: hidden;
}

.main_box {
  position: fixed;

  z-index: -1;

  left: 50%;

  top: 70%;

  transform: translate(-50%, -50%);
}

div {
  color: white;
}

.ext_box {
  width: 250px;

  height: 100px;

  position: relative;

  transform: perspective(2000px) rotateX(0deg);

  transform-style: preserve-3d;
}

body {
  background-color: #151515;
}

a {
  width: 200px;

  text-decoration: none;
}

nav a {
  text-decoration: none;

  font-weight: 600;

  /* font-size: 50px; */
}

.int_box {
  width: 100%;

  height: 100%;

  position: absolute;

  /* background-color: rgb(39, 39, 192); */

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  padding: 10px;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;
}

.int_box a {
  font-weight: 600;

  font-size: 50px;

  margin: 0;

  color: rgb(255, 255, 255);

  text-align: left;

  margin-bottom: 0px;
}

.int_box a:nth-child(2) {
  font-weight: 200;

  font-size: 12px;

  color: rgb(255, 255, 255);

  text-align: left;
}

.int_box:nth-child(1) {
  transform: rotateX(0deg) translateZ(30px);
}

.int_box:nth-child(2) {
  transform: rotateX(120deg) translateZ(30px);
}

.int_box:nth-child(3) {
  transform: rotateX(240deg) translateZ(30px);
}

nav > a {
  text-decoration: none;
}

header img {
  width: 100px;
}

.burger {
  width: 50px;

  display: block;

  margin-left: 25px;

  cursor: pointer;

  position: fixed;

  top: 5%;

  right: 5%;

  z-index: 60;
}

.burger > div {
  height: 2px;

  border-radius: 25px;

  margin-bottom: 10px;

  background: rgb(255, 255, 255);

  /* pour la transition burger */

  transition: 0.5s ease-in all;

  z-index: 30;

  position: relative;
}

.burger > div:nth-child(2) {
  width: 40px;

  float: right;
}

.cross > :nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

/* .burger:hover > :nth-child(2), */

/* .burger:hover > :nth-child(3), */

.cross > :nth-child(2) {
  transform: translateY(-5px) rotate(-45deg);
}

.cross div:nth-child(2) {
  width: 50px;
}

.hidden {
  display: none;
}

/* circular txt debut */

.circular-text {
  position: fixed;

  top: 23%;

  left: 50%;

  /* transform: translate(-50%, -50%); */

  color: rgb(96, 50, 233);

  transition: 0.5s ease-out;

  /* transform: rotate(0deg); */

  /* -webkit-text-stroke: 1px white; */
}

/* bubble */

.bubble {
  position: absolute;

  top: 24%;

  left: 15%;

  width: 75px;

  height: 75px;

  content: "";

  border-radius: 36% 64% 68% 32% / 48% 39% 61% 52%;

  background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%);

  z-index: 3;
}

.rotation {
  position: fixed;

  z-index: -2;
}

.numeros {
  position: absolute;

  top: 26%;

  left: 25%;

  z-index: 5;
}

.numeros div {
  position: absolute;

  font-size: 45px;
}

.deux,
.trois,
.quatre {
  display: none;
}

/* inf scroll */

.slider-wrap {
  position: fixed;

  top: 30%;

  left: 10%;

  width: 80%;

  height: 300px;

  overflow: hidden;

  z-index: -3;

  /* border: 1px solid white; */
}

.slider {
  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 4000px;

  display: flex;

  will-change: transform;

  /* background-color: #262626; */

  /* background-color: #1c1c1c; */
}

.slider-item {
  width: 50px;

  position: relative;

  flex: 1;

  overflow: hidden;

  /* filter: grayscale(100%); */

  /* transform: translateX(-450%); */

  transform: translateX(-405%);
}

.img-div {
  position: relative;

  left: 1%;

  top: 2.5%;

  width: 98%;

  height: 95%;

  background-size: cover;

  background-position: center;
}

.bubble,
.rotation,
.ext_box,
.slider-item {
  transition: all 1s ease-out;
}

.hero2 {
  opacity: 0;
}

.hero {
  width: 30px;

  height: 80px;

  background-color: none;

  display: flex;

  position: fixed;

  bottom: 2rem;

  left: 5%;

  transform: translateX(-50%);

  align-items: center;

  flex-direction: column;

  transition: opacity 0.5s ease-out;
}

.mouse {
  width: 0.12rem;

  height: 2.5rem;

  background-color: rgb(85, 84, 84);

  border-radius: 25px;

  display: flex;
}

/* .mouse span {

  width: 1rem;

  height: 1rem;

  background-color: red;

  border-radius: 50%;

  margin: auto;

  display: block;

} */

.point {
  width: 7.5px;

  height: 7.5px;

  border-radius: 50%;

  background-color: white;

  transform: translateY(-550%);

  animation: move-point 1.5s cubic-bezier(0.42, 0.04, 0.14, 0.99) infinite;
}

@keyframes move-point {
  0% {
    opacity: 0;

    transform: translateY(-550%);
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform: translateY(-50%);
  }
}

nav {
  position: relative;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  max-width: 1600px;

  /* centrer elements en block avec margin auto */

  padding: 20px 15px 0 0px;
}

.nav_two {
  left: 5%;

  position: fixed;
}

.menu a {
  padding-bottom: 20px;

  font-weight: 500;

  color: #949494;

  font-size: 60px;
}

.menu a:hover {
  color: white;
}

.menu {
  padding-left: 10%;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  background-color: #262626;

  border-radius: 35% 0% 0 35%;

  position: fixed;

  z-index: 10;

  width: 100%;

  height: 100%;

  top: 0%;

  transform: translateX(100%);

  /* position: absolute; */

  transition: cubic-bezier(0.42, 0.04, 0.14, 0.99) 1s;
}

.appear {
  transform: translateX(0%);

  border-radius: 0;
}

.menu > div,
.menu > div a {
  display: flex;

  flex-direction: row;

  font-weight: 400;

  color: #949494;

  font-size: 15px;

  white-space: nowrap;

  padding-bottom: 10px;
}

.menu > div > img {
  width: 10%;

  padding-right: 10px;
}

.menu-bas {
  padding-top: 40%;
}

.partie_bas {
  width: 100%;
}

.copyright > p {
  font-weight: 400;

  font-size: 10px;

  /* transform: translateY(1000px); */
}

.copyright {
  position: fixed;

  /* transform: translateY(1000px); */

  bottom: 5%;

  right: 30%;

  transform: translateY(70px);

  transition: cubic-bezier(0.42, 0.04, 0.14, 0.99) 1s;

  z-index: -1;
}

/* .sidebar-wave {

  fill: #262626;

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  right: 0;

  z-index: -1;

  transition: cubic-bezier(0.42, 0.04, 0.14, 0.99) 1s;

}



.pathhh {

  transition: cubic-bezier(0.42, 0.04, 0.14, 0.99) 1s;

  d: path(

    "M375,667H0l-0.9-174.4C0,391.8,0,292.6,0,183.4V0h375V667z"

  ) !important;

}

.pathhh2 {

  d: path(

    "M375,667H79.8L23.2,485.6c-31-99.3-31-204.9,0-304.2L79.8,0H375V667z"

  ) !important;

} */

.under-construction {
  display: flex;

  justify-content: center;

  align-items: center;

  margin: 20% 20%;

  padding: 10px;

  flex-direction: column;

  font-weight: 500;

  border-radius: 25px;

  color: white;

  transition: cubic-bezier(0.42, 0.04, 0.14, 0.99) 0.3s;

  background: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%);
}

.under-construction:hover {
  transform: scale(150%);
}

/* disparaitre  la barre on click */

.menu a:active {
  transition: translateX(100%);
}

/* pas sur que c'est bon, a verifier */

/* page about debut code txt */

h1 {
  font-size: 50px;

  font-weight: 600;

  margin-top: 50px;
}

.alignement {
  margin-left: 10%;

  position: relative;
}

.about_img {
  /* margin-left: auto; */

  /* position: relative; */

  padding-top: 50px;

  /* display: flex; */

  /* align-content: center; */

  /* align-items: center; */

  /* width: auto; */
}

.about_img img {
  /* height: 450px; */

  /* filter: grayscale(1); */

  width: 80%;

  margin-left: 10%;
}

.ap_img {
  margin-top: 35px;
}

.bubble_about {
  top: -10%;

  left: 67%;

  width: 60px;

  height: 60px;
}

header {
  position: fixed;

  z-index: 10;

  top: 0;

  height: 8.5%;

  width: 120%;

  background-color: #151515;

  box-shadow: -20px 20px 25px #151515;

  -moz-box-shadow: -20px 20px 25px #151515;

  -webkit-box-shadow: -20px 20px 25px #151515;
}

main {
  /* transform: translateY(6%); */

  transition: all 1s ease-out;

  /* position: relative;

  z-index: -10; */

  padding-top: 7.5%;
}

.texte_about {
  width: 80%;

  font-size: 12px;

  line-height: 1.45;

  font-family: monospace;
}

.texte_about h2 {
  margin: 35px 0 15px 0;

  font-weight: 500;

  font-size: 35px;
}

.copyright2 {
  margin-top: 50px;

  text-align: center;

  font-weight: 400;

  font-size: 10px;

  padding-bottom: 30px;
}

button {
  /* font-size: 20px; */

  /* font-weight: 700; */

  color: white;

  padding: 100%;

  /* margin-top: 35px; */

  /* position: relative; */

  /* top: -10%;

  left: 50%;

  content: ""; */

  border-radius: 0;

  background-color: #151515;

  /* border-radius: 93px 77px 88px 80px / 75px 67px 89px 77px; */

  /* background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%); */

  border: none;
}

#contact a,
#contact p {
  font-size: 12px;
}

.contact_projet {
  padding: 25px 0 25px 10%;

  clear: both;
}

.contact_projet p:nth-child(2) {
  font-size: 15px;
}

.ctfull a {
  width: 100%;

  display: flex;

  justify-content: space-between;
}

.ctfull {
  font-size: 40px;

  font-weight: 500px;

  margin: 30px 0 0 0;

  width: 100%;

  background-color: #262626;

  /* animation: leaves2 2s ease-in-out infinite;

  -webkit-animation: leaves2 2s ease-in-out infinite; */
}

.carre {
  float: right;

  width: 30%;

  background-color: #949494;
}

.container {
  margin-top: 7rem;

  width: 80%;

  margin-left: 10%;
}

#contact > h3 {
  font-size: 32px;

  font-weight: 600;

  padding: 0 0 24px 0;
}

#contact > a {
  display: block;

  padding: 0.35rem 0 0 0;

  color: white;
}

#contact > a:first-of-type {
  margin-top: 1rem;
}

fieldset {
  border-bottom: solid white 1px;

  width: 100%;

  padding: 0;

  max-width: 100%;

  background-color: none;

  /* display: flex; */

  align-items: baseline;

  /* margin-inline-start: 2px;

  margin-inline-end: 24px;

  padding-block-start: 0.35em;

  padding-inline-start: 2.75em;

  padding-inline-end: 2.75em;

  padding-block-end: 2.625em; */
}

fieldset:first-of-type {
  margin-top: 2rem;
}

fieldset:last-of-type {
  border: none;
}

::selection {
  background-color: #9b23ea;
}

#contact input {
  width: 100%;

  background-color: #151515;

  border: none;

  margin-bottom: 4px;

  color: white;

  font-weight: 500;

  padding: 16px 0 0 0;
}

input#contact-submit:hover {
  background-color: white;

  color: #151515;

  cursor: none;
}

/*  */

/* #contact input[type="text"]:hover,

#contact input[type="email"]:hover,

#contact input[type="tel"]:hover,

#contact input[type="url"]:hover,

#contact textarea:hover {

  -webkit-transition: border-color 0.3s ease-in-out;

  -moz-transition: border-color 0.3s ease-in-out;

  transition: border-color 0.3s ease-in-out;

  border: 1px solid rgb(207, 47, 212);

} */

textarea {
  padding: 10px 0 50px 0;

  width: 100%;

  background-color: #151515;

  border: none;

  /* border-bottom: solid white 1px; */

  color: white;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;

  border: none;
}

.error {
  color: #ed4337;

  font-size: 14px;

  font-weight: 200;

  float: right;
}

.success {
  color: #9b23ea;
}

.envoyer {
  margin-top: 25px;

  float: right !important;

  border: solid white 2px !important;

  width: 50% !important;

  padding: 10px 0 10px 0 !important;

  -webkit-appearance: button;

  -moz-appearance: button;

  border-radius: 0;

  font-weight: 500;
}

.envoyer2 {
  margin-top: 20px;

  border: solid white 2px;

  /* width: 50%; */

  /* padding: 10px 0 10px 0; */

  float: right;

  text-align: center;

  color: #151515;

  margin-bottom: 30px;

  /* -webkit-appearance: button; */

  /* -moz-appearance: button; */

  /* background-color: #151515; */

  border-radius: 0;

  font-weight: 500;
}

.envoyer2 a {
  /* text-decoration: none; */

  background-color: #151515 !important;
}

.mail_envoye {
  display: block;

  margin: 10% 10%;

  justify-content: center;

  align-items: center;
}

.h1_env {
  /* margin-top: 40%; */

  font-size: 18px;

  font-weight: 500;

  text-align: center;

  color: white;

  margin-top: 0px;
}

.logoblock {
  padding-top: 5%;
}

.fix_ios {
  padding: 10px 0 10px 0;
}

/* .container > a:link {

  background-color: white;

} */

.h_tar {
  padding-top: 50px;

  padding-left: 10%;

  padding-bottom: 10px;

  background-color: #1c1c1c;

  transform: translateY(1%);

  z-index: -1;

  position: relative;
}

.h_tar > h3 {
  width: 80%;
}

section {
  background-color: #1c1c1c;

  padding-top: 10%;

  display: flex;

  align-items: center;

  flex-direction: column;
}

section > div {
  width: 50%;
}

section h4 {
  color: black;
}

.tsection {
  margin-bottom: 30px;
}

.tsection > div {
  padding: 8px 32px;

  background-color: white;
}

.p_blk {
  margin-top: 5%;

  background-color: #151515 !important;

  color: white !important;

  display: flex;

  flex-direction: column;

  justify-content: center;

  text-align: center;

  padding-top: 5px;

  padding: 30px 0 30px 0 !important;

  line-height: 1.5;
}

.p_blk > h2 {
  font-size: 24px;

  font-weight: 600;
}

.p_blk > h3 {
  font-size: 13px;

  font-weight: 400;
}

.header2 {
  /* position: fixed; */

  /* top: 0; */

  /* height: 8.5%; */

  /* width: 120%; */

  background-color: #1c1c1c;

  box-shadow: -20px 40px 25px #1c1c1c;

  -moz-box-shadow: -20px 40px 25px #1c1c1c;

  -webkit-box-shadow: -20px 40px 25px #1c1c1c;
}

.list_t > div > div {
  display: flex;

  flex-direction: row;

  margin-top: 20px;
}

.checkmark {
  width: 20px;

  margin-right: 5px;
}

.txt_tbas {
  color: black;

  display: flex;

  justify-content: center;
}

.txt_tbas > span:first-of-type {
  padding-right: 4px;

  font-size: 11px;

  line-height: 4;

  color: #1c1c1c;

  font-weight: 400;
}

.bas_t p {
  color: black;

  display: flex;

  justify-content: center;
}

.txt_tbas > span:last-of-type {
  font-size: 32px;

  font-weight: 600;

  text-align: center;
}

.tar_contact {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;
}

.tar_contact a {
  text-align: center;

  text-decoration: none;

  /* color: #1c1c1c; */

  color: white;

  background-color: #1c1c1c;

  font-size: 20px;

  margin-top: 25px;

  float: right !important;

  border: solid #1c1c1c 2px !important;

  width: 50% !important;

  padding: 10px 0 10px 0 !important;

  border-radius: 0;

  margin-bottom: 15px;

  animation: leaves2 2s ease-in-out infinite;

  -webkit-animation: leaves2 2s ease-in-out infinite;
}

.tar_contact > p {
  margin-bottom: 15%;

  font-size: 11px;

  font-weight: 400;

  line-height: 16px;

  color: #262626;
}

.h3h {
  color: #151515;

  font-size: 20px;

  font-weight: 600;
}

.carre:hover {
  background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%);

  transform: scale(1.5);

  transition: transform 0.2s ease-in-out;
}

.fix_index {
  position: relative;

  z-index: -10;
}

@keyframes leaves {
  0% {
    transform: scale(1);

    -webkit-transform: scale(1);
  }

  50% {
    transform: scale(1.06);

    -webkit-transform: scale(1.06);
  }

  100% {
    transform: scale(1);

    -webkit-transform: scale(1);
  }
}

@keyframes leaves2 {
  0% {
    transform: scale(1);

    -webkit-transform: scale(1);
  }

  50% {
    transform: scale(1.1);

    -webkit-transform: scale(1.05);
  }

  100% {
    transform: scale(1);

    -webkit-transform: scale(1);
  }
}

.contact_projet {
  animation: leaves 2s ease-in-out infinite;

  -webkit-animation: leaves 2s ease-in-out infinite;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 -10px #949494;
  }

  40% {
    box-shadow: 0 0 15px #949494;
  }

  60% {
    box-shadow: 0 0 15px #949494;
  }

  100% {
    box-shadow: 0 0 -10px #949494;
  }
}

/* .envoyer,

.envoyer2 {

  animation: glow 2s ease-in-out infinite;

  -webkit-animation: glow 2s ease-in-out infinite;

} */
.works {
  margin-top: 140px;
}

.nav-selector {
  width: 90%;
  margin: auto;
  margin-top: 30%;
  display: flex;
  flex-wrap: wrap;

  align-content: space-between;
}
.nav-selector a {
  padding: 8px 12px;
  color: white;
  width: fit-content;
}

.nav-selector a {
  padding: 8px 20px;
}
.nav-selector a:hover {
  background-color: #1c1c1c;
}
.btn-filter-on {
  /* border: 0.3px white solid; */
  background-image: linear-gradient(45deg, #a8c5de 0%, #c79dde 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* border-bottom: 0.5px solid white;
  border-left: 0.5px solid white; */

  /* color: transparent; */
}
.nav-selector a::before {
  content: "➡";
  color: transparent;
}
.btn-filter-on::before {
  color: white;
}
.row {
  position: relative;

  width: 80%;

  margin: 0 auto;

  margin-top: 20%;
}

.heading {
  position: absolute;

  top: -33px;

  margin-left: 12%;
}

.heading > h2 {
  font-size: 50px;

  font-weight: 600;
}

.heading > h3 {
  font-size: 12px;

  font-weight: 200;
}

/* fonts */

.int_box,
.menu,
main h1,
main h2,
#contact h3,
.heading h2 {
  font-family: "Fraunces", serif;

  font-weight: 600;
}

.ligne {
  line-height: 2;
}

/* .ap_img div:first-of-type {

  z-index: 9;

} */

.wrapper_contact {
  display: flex;

  position: fixed;
}

.image_contact {
  display: none;

  width: 100%;

  /* background-color: #9b23ea; */

  justify-content: center;
}

.image_contact > img {
  width: 100%;

  height: 100%;

  object-fit: contain;

  transform: scale(0.5);
}

.vidback {
  position: absolute;

  z-index: -1;

  width: 40%;

  filter: saturate(0.7);
}

.first_txt {
  font-size: 20px;

  font-weight: 500;

  font-size: 17px;

  font-family: monospace;
}

.second_txt {
  color: #949494;

  font-size: 13px;

  font-family: monospace;
}

/* code colors */

.violet {
  color: #9b23ea;
}

.gris {
  color: #949494;
}

.blanc {
  color: white;
}

.green {
  color: #24e394;
}

.vertflash {
  color: #24e33a;
}

.orange {
  color: #e39d24;
}

.red {
  color: #e3244c;
}

.jaune {
  color: #eeff31;
}

/* code colors */

.cursor {
  position: fixed;

  width: 20px;

  height: 20px;

  background: white;

  transition: transform 0.1s;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  pointer-events: none;

  mix-blend-mode: difference;

  z-index: 99999;

  display: none;
}

@keyframes pulse_tst {
  0% {
    box-shadow: 0 0 0 0 linear-gradient(45deg, #a8c5de 0%, #c79dde 100%);
  }
  70% {
    box-shadow: 0 0 0 13px linear-gradient(45deg, #a8c5de 0%, #c79dde 100%);
  }
  100% {
    box-shadow: 0 0 0 0 linear-gradient(45deg, #a8c5de 0%, #c79dde 100%);
  }
}
.main-btn {
  position: relative;
  z-index: 2;
  display: block;
  width: 210px;
  text-decoration: none;
  margin-top: 25px;
  margin-right: auto;
  margin-left: auto;
  padding: 15px 20px;
  border-radius: 12px;
  font-family: Archivo;
  font-style: normal;
  font-weight: 600;
  background-color: #fff;
  background-image: linear-gradient(45deg, #a8c5de 0%, #c79dde 80%),
    radial-gradient(
      circle farthest-corner at 0% -100%,
      #619bff 20%,
      rgba(205, 219, 248, 0) 51%
    ),
    linear-gradient(180deg, #6c52ee, #6c52ee);
  box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 19%), 0 0 15px 0 rgb(238 1 255 / 57%),
    0 5px 53px 0 rgb(0 29 255 / 73%);
  -webkit-transition: all 250ms ease, box-shadow 200ms ease,
    -webkit-filter 2000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 250ms ease, box-shadow 200ms ease,
    -webkit-filter 2000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 250ms ease, filter 2000ms cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 200ms ease;
  transition: all 250ms ease, filter 2000ms cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 200ms ease,
    -webkit-filter 2000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  font-family: Stratoslcweb, sans-serif;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.5px;
  cursor: pointer;
  animation: pulse_tst 2s infinite;
  color: white;
  text-decoration: underline;
}
.main-btn:hover {
  background-image: linear-gradient(90deg, #a8c5de 20%, #c79dde 100%),
    radial-gradient(
      circle farthest-corner at 0% -100%,
      #619bff 20%,
      rgba(205, 219, 248, 0) 51%
    ),
    linear-gradient(120deg, #6c52ee, #6c52ee);
  box-shadow: 2px 2px 6px 2px rgb(0 0 0 / 40%), 0 0 15px 0 rgb(238 1 255 / 57%),
    0 5px 53px 0 rgb(0 29 255 / 73%);
  text-decoration: none;
  transform: scale(1.02);
}
/* body>a:hover ~ .cursor{

  

} */

.hover-effect {
  transform: scale(3);
}

/*  */

.back_works {
  position: fixed;

  left: 5%;

  top: 20%;

  z-index: 9;

  transform: rotate(90deg);

  text-decoration: none;
}

.back_works a {
  color: white;

  text-decoration: none;
}

.infos_projets {
  font-family: "Fraunces", serif;

  font-weight: 600 !important;

  font-size: 32px !important;
}

.infos_projets2 {
  font-family: "Fraunces", serif;

  font-weight: 600 !important;

  font-size: 25px !important;
}

h4 {
  font-size: 12px;

  font-weight: 200;
}

.p_info {
  line-height: 22px;
}

.banner1 {
  margin: 0 14%;
}

@media (min-width: 550px) {
  .nav-selector {
    margin: 20% 10% 0 10%;
    width: 80%;
  }
  .nav-selector a {
    padding: 8px 20px;
  }

  .vidback {
    width: 60%;

    margin-top: 13vh;
  }

  .works {
    margin: 20% 10% 0 10%;
  }

  #contact {
    width: 90%;
  }

  .image_contact {
    display: flex;
  }

  .image_contact > img {
    margin-top: 25%;
  }

  .hp_text {
    margin-top: 20%;
  }
}

@media (min-width: 1600px) {
  .menu {
    transform: translateX(150%);
  }

  .hp_text {
    margin-top: 9%;
  }
}

@media (min-width: 800px) {
  .hp_text {
    margin-top: 11%;
  }

  html {
    cursor: none;

    /* pointer-events: none; */
  }

  a {
    cursor: none;
  }

  .about_img img {
    width: 50%;
  }

  .cursor {
    display: flex;
  }

  .vidback {
    margin-top: 0;

    width: 40%;
  }

  .first_txt {
    font-size: 20px;
  }

  .second_txt {
    font-size: 15px;
  }

  .partie_bas > a:nth-child(1) {
    margin-right: 0%;
  }

  .partie_bas {
    width: auto;
  }
  .nav-selector {
    margin: 150px 10% 0 10%;
  }

  .works {
    margin: 20px 10% 0 10%;

    display: flex;

    flex-wrap: wrap;
  }

  .row {
    display: inline-flex;

    width: 40%;
  }

  .image_contact > img {
    margin-top: -10%;

    transform: scale(0.4);
  }

  section {
    padding-top: 0;
  }

  .bubble_about {
    left: 40%;
  }

  header {
    height: 13.5%;
  }

  .appear {
    transform: translateX(60%);
  }

  .menu-bas {
    padding-top: 10%;
  }

  .menu a {
    font-size: 40px;
  }

  .menu a {
    font-size: 40px;
  }

  .row a {
    width: 100%;
  }

  .main_box {
    top: 75%;
  }
}

.r1 {
  width: 100%;

  margin-top: 10%;
}

@media (min-width: 1000px) {
  .hp_text {
    margin-top: 9%;
  }
}

@media (max-width: 395px) {
  .hp_text {
    margin-top: 25%;
  }
  .heading {
    top: -38px;
  }
  .container {
    position: fixed;
  }

  section > div {
    width: 80%;
  }

  .back_works {
    left: 0%;
  }

  .texte_about h2 {
    font-size: 30px;
  }

  .texte_about {
    font-size: 12px;
  }

  .r1 {
    width: 100%;

    margin-top: 20%;
  }

  main {
    padding-top: 11.5%;
  }
}