*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');

@font-face {
  font-family: "bold";
  src: url("/asset/font/AdvercaseFont-Demo-Bold.otf") format("opentype");
}
@font-face {
  font-family: "body";
  src: url("/asset/font/AdvercaseFont-Demo-Regular.otf") format("opentype");
}
p.customfont { 
  font-family: "My Custom Font", Verdana, Tahoma;
}

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

html{
  scroll-behavior: smooth;
}

body{
  /* font-family: "body", Verdana, Tahoma; */
  color: white;
  font-size: 1rem;
  scroll-behavior: smooth;
  background-color: black;
  font-family: "PT Mono", monospace;
  cursor: crosshair;
}
p{
  font-weight: 300;
  /* text-shadow: 2px 2px 5px white; */
  font-family: "PT Mono", monospace;
  font-size: 1.2vw;
}
p.roboto{
  font-family: "PT Mono", monospace;
}
.p_mini{
  font-weight: 300;
  font-size: 0.875vw;
  /* text-shadow: 2px 2px 5px white; */
  text-transform: uppercase;
}
.p_upper{
  text-transform: uppercase;
  font-weight: 300;
  font-size: 0.875vw;
  /* text-shadow: 2px 2px 5px white; */
}
h1{
  font-size: 6rem;
  font-weight: 300;
  /* text-shadow: 2px 2px 10px white; */
}
h2{
  font-size: 4rem;
  font-weight: 300;
  /* text-shadow: 2px 2px 8px white; */
}
h3{
  font-size: 3rem;
  font-weight: 300;
  /* text-shadow: 2px 2px 6px white; */
}
H4{
  font-size: 4rem;
  font-weight: 300;
  /* text-shadow: 2px 2px 5px white; */
}
h5{
  font-size: 1rem;
  font-weight: 300;
  /* text-shadow: 2px 2px 5px white; */
}
h6{
  font-size: 0.875rem;
  font-weight: 300;
  /* text-shadow: 1px 1px 5px white; */
}

  a{
    all: unset;
    cursor: pointer;
    white-space: nowrap;
  }

  #icon_state1{
    display: none;
  }
  #icon_state2{
    display: none;
  }

.none{
  display: none;
}
.none_inverse{
  display: none !important;
}

.underline{
  text-decoration: underline;
}
.menu_respon{
  display: none;
}
.menu{
  display: none;
}
.nav_left{
  position: fixed;
  top: 0;
  left: 0;
  padding: 2vh 2vw 2vh 2vw;
  width: 100vw;
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  align-items: center;
  /* background-color: black; */
  backdrop-filter: blur(10px);
  /* border-radius: 16px; */
  z-index: 50;
  /* transform: rotate(-90deg) translateX(-100vh) translateY(0vh); */
  /* transform-origin: top left; */
  border-bottom: 0.5px rgba(255, 255, 255, 0.5) solid;
}
.contain_nav_title{
  width: 100%;
  padding: 0 32px 0 0;
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  gap: 24px;
  align-items: center;
  font-family: "PT Mono", monospace;
  color: white;
}
.nav_left img{
  width: 5vw;
  margin-right: auto;
  /* transform: rotate(90deg); */
}
.nav_left a{
  margin-right: auto;
  /* transform: rotate(90deg); */
}
.nav_left p{
  /* transform: rotate(-90deg); */
  height: fit-content;
  font-size: 1vw;
  /* text-transform: uppercase; */
  mix-blend-mode: difference;
  text-shadow: none !important;
  transition: ease-in-out 0.5s;
}
.nav_left p:hover{
  text-decoration: underline;
  
}
.nav_bar{
    display: flex;
    position: fixed;
    top: 0;
    justify-content: center;
    align-items: center;
    padding-top: 2vh;
    padding-left: 5vw;
    padding-right: 2vw;
    width: 100%;
    z-index: 50;
    /* background-color: rgb(236, 236, 236); */
    color: black;
    backdrop-filter: blur(10px);
    border-bottom: 1px white solid;
    padding-bottom: 2vh;
}
.nav_bar img{
    width: 10vw;
}


/*cursor*/

#cursor {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform;
    mix-blend-mode: difference;
  }
  
  @media (hover: hover) and (pointer: fine) {
    .cursor__circle {
      width: 64px;
      height: 64px;
      margin-top: -50%;
      margin-left: -50%;
      border-radius: 50%;
      border: solid 1px rgba(72, 71, 61, 0.64);
      transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }
    
    #cursor.arrow .cursor__circle{
      width: 128px;
      height: 128px;
      /* background-color: #073099;
      border-color: #073099; */
      background-color: gray;
      border-color: gray;
    }
    
    #cursor.arrow::after{
      content: '';
      position: absolute;
      left: -50%;
      top: -50%;
      width: 100%;
      height: 100%;
      background-image: url('https://svgshare.com/i/MzQ.svg');
      background-repeat: no-repeat;
      background-position: center;
    }
    
    #cursor.subtle .cursor__circle{
      opacity: 0.16;
    }
    
    #cursor.overlay .cursor__circle{
      width: 48px;
      height: 48px;
      background-color: rgba(227, 222, 193, 0.08);
      border-color: transparent;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .image-container:hover img{
      transform: scale(1.1);
    }
    
    .underline:hover::after{
      opacity: 1;
    }
    
    section::after{
      display: none;
    }
  }


/**************Overlay***********/

.dialog{
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  visibility:hidden;
  transition: all .6s ease-in-out;
  z-index: 100;
}
.contain_dialog{
  background-color: black;
  height: 50vh;
  width: 55vw;
  max-width: 870px;
  color: white;
  z-index: 100;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;    
  opacity: 0;
  margin-top: 10vh;
  transition: all .6s  ease-in-out;
  padding: 2.5vw;
}
.contain_dialog img{
  width: 80%;
}
.main_line_card{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.main_line_card img{
  width: 12vw;
}
.info_main_line_card{
  display: flex;
  flex-direction: column;
}
.second_line_info_card{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
}
.show{
  transition: all .6s  ease-in-out;
  display:flex;
  opacity:1;
  visibility: visible;
}
.show .contain_dialog{
  opacity: 1;
  margin-top: 0;
  transition: all .6s  ease-in-out;
}
.contain_dialog h3{
  padding-bottom: 2vh;
}
.contain_contact_head{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 2vh;
}
.contain_contact_head2{
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 6px;
  padding-bottom: 2vh;
}
.close{
  /* background-color: rgba(0, 0, 0, 0.5);  */
  backdrop-filter: blur(2px);
  width: 100vw; 
  height: 100vh; 
  position: absolute; 
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0; left: 0;
}

  /**footer**/
  footer{
    padding: 5vw 2.5vw 4vw 2.5vw;
    gap: 8px;
    color: white;
    background-color: black;
    font-family: "PT Mono", monospace;
  }
  .contain_head_footer{
    display: flex;
  }
  .head_footer_respon{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .contain_head_footer div{
    display: flex;
    flex-direction: column;
    width: 20vw;
  }
  .head_footer{
    gap: 8px;
  }
  .head_footer h6{
    opacity: 0.6;
  }



  .img_footer{
    width: 7vw;
  }
  span{
    display: flex;
    gap: 16px;
  }
  .mail{
    width: 100%;
    font-size: 9.5vw;
    text-transform: uppercase;
  }
  .footer_arrow{
    width: 16px;
    height: 16px;
  }
  .contain_underline{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .last_link{
    width: 7vw;
  }
.button_footer{
  padding: 2vh 2vw 2vh 2vw;
  border: 1px white solid;
  color: white;
  border-radius: 12px;
  width: 20vw;
  margin-top: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.button_footer:hover{
  border: 1px white solid;
  color: black;
  background-color: white;
  transition: ease-in-out 0.5s;
}


  /**Animation**/
  .cursor{
    position: relative;
    width: 24em;
    /* margin: 0 auto; */
    border-right: 2px solid rgba(255,255,255,.75);
    /* font-size: 30px; */
    /* text-align: center; */
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);  
}
/* Animation */
.typewriter-animation {
  animation: 
    typewriter 2s steps(50) 1s 1 normal both, 
    blinkingCursor 20ms steps(50) infinite normal;
}
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blinkingCursor{
  from { border-right-color: rgba(255,255,255,.75); }
  to { border-right-color: transparent; }
}
  
  .fade_in_appear{
    -webkit-animation: fade_in_appear 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1s;
            animation: fade_in_appear 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1s;
  }
  @-webkit-keyframes fade_in_appear {
    0% {
              opacity: 0;
    }
    100% {
              opacity: 2;
    }
  }
  @keyframes fade_in_appear {
      0% {
        margin-left: 5vw;
              opacity: 0;
    }
    100% {
        margin-left: 0vw;
              opacity: 2;
    }
  }

  .slide-left2 {
    -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1s;
            animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1s;
  }
  .slide-left {
    -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s;
            animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.6s;
  }

@-webkit-keyframes slide-left {
  0% {
      margin-left: 5vw;
            opacity: 0;
  }
  100% {
      margin-left: 0vw;
            opacity: 2;
  }
}
@keyframes slide-left {
    0% {
      margin-left: 5vw;
            opacity: 0;
  }
  100% {
      margin-left: 0vw;
            opacity: 2;
  }
}
.remove_pop_up {
  -webkit-animation: remove_pop_up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.9;
          animation: remove_pop_up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.9;
}
@-webkit-keyframes remove_pop_up {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
            scale: 1;
            opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100vh);
            transform: translateX(100vh);
            scale: 0;
            opacity: 0;
  }
  }
  @keyframes remove_pop_up {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
            scale: 1;
            opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100vh);
            transform: translateX(100vh);
            scale: 0;
            opacity: 0;
  }
  }

.slide-right {
  -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.9;
          animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.9;
}
.slide-right2 {
  -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7;
          animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.7;
}
.slide-right3 {
  -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2s;
          animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2s;
}
@-webkit-keyframes slide-right {
0% {
  -webkit-transform: translateX(-5vw);
          transform: translateX(-5vw);
          opacity: 0;
}
100% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
          opacity: 2;
}
}
@keyframes slide-right {
0% {
  -webkit-transform: translateX(-5vw);
          transform: translateX(-5vw);
          opacity: 0;
}
100% {
  -webkit-transform: translateX(0);
          transform: translateX(0);
          opacity: 2;
}
}

.slide-top{
  -webkit-animation: slide-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 1;
          animation: slide-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 1;
}
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
            opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
            opacity: 2;
  }
  }
  @keyframes slide-top {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
            opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
            opacity: 2;
  }
  }


  .scale-up-ver-top {
    -webkit-animation: scale-up-ver-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: scale-up-ver-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }
  .scale-up-ver-top2 {
    -webkit-animation: scale-up-ver-top 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: scale-up-ver-top 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }
  .scale-up-ver-top3 {
    -webkit-animation: scale-up-ver-top 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: scale-up-ver-top 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }
@-webkit-keyframes scale-up-ver-top {
  0% {
    height: 0vh;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    height: 100vh;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}
@keyframes scale-up-ver-top {
  0% {
    height: 0vh;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    height: 100vh;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}

.scale-up-ver-bottom {
  -webkit-animation: scale-up-ver-bottom 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
          animation: scale-up-ver-bottom 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-ver-bottom {
  0% {
    height: 100vh;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  100% {
    height: 0vh;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
}
@keyframes scale-up-ver-bottom {
  0% {
    height: 100vh;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  100% {
    height: 0vh;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
}

.anim_un{
  width: 100vw;
  background-color: rgb(37, 37, 37);
  position: fixed;
  z-index: 90;
}
.anim_deux{
  width: 100vw;
  background-color: rgb(75, 75, 75);
  position: fixed;
  z-index: 100;
}
.anim_trois{
  width: 100vw;
  background-color: rgb(112, 112, 112);
  position: fixed;
  backdrop-filter: blur(10px);
  z-index: 100;
}
.anim_quatre{
  width: 100vw;
  background-color: black;
  position: fixed;
  z-index: 100;
}


#my-text{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 8rem;
}
#my-text2{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 3rem;
}
.char {
  transform: translateY(115px);
  transition: transform 1s;
}


.fade-in{
  animation : fade-in ease-in-out forwards;
  animation-timeline : view();
  animation-range: entry 0% cover 30%;
}

@-webkit-keyframes fade-in {
  0% {
    -webkit-scale: 0.9;
            scale: 0.9;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
            opacity: 0;
  }
  50%{
            opacity: 1;
  }
  100% {
    -webkit-scale: 1;
            scale: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    -webkit-scale: 0.9;
            scale: 0.9;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 0;
  }
  50%{
            opacity: 1;
  }
  100% {
    -webkit-scale: 1;
            scale: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}

.fade-in2{
  animation : fade-in2 ease-in-out forwards;
  animation-timeline : view();
  animation-range: entry 0% cover 30%;
}

@-webkit-keyframes fade-in2 {
  0% {
    -webkit-scale: 0.9;
            scale: 0.9;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            opacity: 0;
  }
  50%{
            opacity: 1;
  }
  100% {
    -webkit-scale: 1;
            scale: 1;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes fade-in2 {
  0% {
    -webkit-scale: 0.9;
            scale: 0.9;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 0;
  }
  50%{
            opacity: 1;
  }
  100% {
    -webkit-scale: 1;
            scale: 1;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
}





/*************************Grain*********************/
body .grain {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: 45;
  transform: translateZ(0);
}
body .grain:before {
  content: "";
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  z-index: 50;
  position: fixed;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png);
  opacity: 0.1;
  pointer-events: none;
  -webkit-animation: noise 1s steps(2) infinite;
  animation: noise 1s steps(2) infinite;
}
@-webkit-keyframes noise {
  to {
    transform: translate3d(-7rem, 0, 0);
 }
}
@keyframes noise {
  0% {
    transform: translate3d(0, 9rem, 0);
 }
  10% {
    transform: translate3d(-1rem, -4rem, 0);
 }
  20% {
    transform: translate3d(-8rem, 2rem, 0);
 }
  30% {
    transform: translate3d(9rem, -9rem, 0);
 }
  40% {
    transform: translate3d(-2rem, 7rem, 0);
 }
  50% {
    transform: translate3d(-9rem, -4rem, 0);
 }
  60% {
    transform: translate3d(2rem, 6rem, 0);
 }
  70% {
    transform: translate3d(7rem, -8rem, 0);
 }
  80% {
    transform: translate3d(-9rem, 1rem, 0);
 }
  90% {
    transform: translate3d(6rem, -5rem, 0);
 }
  to {
    transform: translate3d(-7rem, 0, 0);
 }
}



@media (max-width: 600px) {
  p{
    font-size: 3vw;
  }
  .nav_bar{
    position: fixed;
    justify-content: start;
    align-items: center;
    gap: 16px;
}
  .nav_bar img{
      width: 25vw;
  }
  .nav_left{
    display: none;
  }
  .menu{
    width: 10vw;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border-radius: 20px;
  }
  .menu img{
    width: 60%;
  }
  .translate{
    transform: translateY(25vh);
  }
  .move_nav{
    top: 24vh;
  }
  .rotate{
    transform: rotate(-45deg);
  }
  .menu_respon{
    position: fixed;
    z-index: 100;
    display: none;
    flex-direction: column;
    padding: 2.5vh 5vw 5vh 5vw;
    top: 0;
    left: 0;
    color: white;
    width: 100vw;
    height: 25vh;
    gap: 12px;
    background-color: black;
  }
  .menu_respon h6{
    opacity: 0.6;
  }
  .menu_respon_appear{
    display: flex;
    flex-direction: row;
    gap: 64px;
  }
  .displaynone{
    display: none !important;
  }
  #icon_state1{
    display: block;
    width: 8vw;
  }
  #icon_state2{
    display: block;
    width: 8vw;
  }
  .p_mini{
    font-size: 3vw;
  }
  h3{
    font-size: 1.5rem;
    font-weight: 300;
  }
  footer{
    padding: 5vh 5vw 5vh 5vw;
  }
  .contain_head_footer{
    flex-direction: column-reverse;
  }
  .button_footer{
    width: 70vw;
  }
  .img_footer{
    width: 30vw;
    margin-top: 32px;
  }
  .none_inverse{
    display: flex !important;
  }
  .none{
    display: none !important;
  }
  /**************Overlay***********/

.contain_dialog{
  background-color: black;
  height: 25vh;
  width: 80vw;
}
.main_line_card{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.main_line_card img{
  width: 20vw;
}
.info_main_line_card{
  display: flex;
  flex-direction: column;
}
.second_line_info_card{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
}
.show{
  transition: all .6s  ease-in-out;
  display:flex;
  opacity:1;
  visibility: visible;
}
.show .contain_dialog{
  opacity: 1;
  margin-top: 0;
  transition: all .6s  ease-in-out;
}
.contain_dialog h3{
  padding-bottom: 2vh;
}
.contain_contact_head{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 2vh;
}
.contain_contact_head2{
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 6px;
  padding-bottom: 2vh;
}
.close{
  /* background-color: rgba(0, 0, 0, 0.5);  */
  backdrop-filter: blur(2px);
  width: 100vw; 
  height: 100vh; 
  position: absolute; 
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0; left: 0;
}
}