body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: rgb(248, 237, 231);
  scrollbar-width: none;
  -webkit-scrollbar-display: none;
}



.top, .bottom{
    height: 100vh;
    margin-bottom: 10vh;
}


.container{
    height: 400vh;
    margin-bottom: 10vh;
}

.container2 {
    height: 90vh;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: 60vh;
    z-index: 5;
    /* background-color: aqua; */
}

.bg{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.moving_bg{
  position: absolute;
  top: 100vh;   /* endroit où l'étoile commence */
  left: 10vw;
  z-index: 1;
  will-change: transform;
}

.moving_bg *{
  position: absolute;
}

.moving_bg img:nth-child(1){
  
  height: 50vh;
  /* width: clamp(100vw,100vw,100px); */
  left: -60%;
  transform: translateX(-40%);
}

.moving_bg img:nth-child(2){
  height: 80vh;
  left: 70vw;
  top: 50vh;
}


.homepage_text {
  position: absolute;
  z-index: 99;
  left: 50%;
  transform: translateX(-50%);
}

h1 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  margin: 0;
  margin-top: 10vh;
  color: #801616;
  font-size: 15vw;
  text-transform: uppercase;
  text-align: center;
}

h2 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  margin: 0;
  color: #801616;
  font-size: 2vw;
  text-align: center;
}

h3 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  margin: 0;
  color: #801616;
  font-size: clamp(5rem, 8vw, 8vw);
  text-align: left;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  z-index: 100;
  background-color: rgb(248, 237, 231);
}

nav a {
  text-decoration: none;
  color: #801616;
  font-weight: bold;
  font-size: 1.5rem;
}

.home_page {
  position: relative;
  width: 100%;
  height: 100vh;
}

#ballpit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}


.bottom_gachapon {
  position: absolute;
  bottom: -50vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: clamp( 400px, 60vh, 60vh);
  
  background-image: url("/img/bg_stickers.jpg");
  background-size: cover;
  background-color: rgba(247, 185, 104, 50);
  z-index: 3;
  overflow: hidden;
}

.gacha_box_hidden {
  position: relative;
  height: 43vh;
  z-index: 20;
  bottom: -90vh;
  width: clamp(200px, 20vw, 20vw);
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}




.handle {
  position: relative;
  width: clamp(200px, 18vw, 18vw);
  height: auto;
  background-image: url("img/handle_bg.png");
  background-size: contain;
  margin-left: 5vw;
  margin-top: 5vh;
  z-index: 22;
}

@media (max-width: 690px) {
  .handle {
    margin-left: auto;
    margin-right: auto;
  }
}

.handle img {
  width: 100%;
  display: block;
  transform-origin: center center;
  transition: transform 0.1s linear;
}

.stickers {
  width: clamp(200px, 20vw, 20vw);
  display: flex;
  position: relative;
  left: 50%;
  top: -25vw;
  z-index: 50;
  align-items: center;
}

.stickers img {
  width: 100%;
  display: block;
  transform-origin: center center;
  transition: transform 0.1s linear;
}

.gacha_wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -70%;
  /* background-color: aliceblue; */
}




.gacha_box_hidden img {
  width: 100vw;
}

.gacha_box {
  position: relative;
  bottom: 0vh;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(200px, 20vw, 20vw);
  height: 20vh;
  overflow: hidden;
  background-color: black;
  z-index: 2;
}

.gacha svg {
  position: absolute;
  width: clamp(150px, 20vw, 250px);
  height: clamp(150px, 20vw, 250px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}




.gacha_wrap {
  margin-left:1vw;
  margin-right: 5vw;
  height: 90vh;
  /* width: 80vw; */
  justify-content: center;
}

.sliding_text1, .sliding_text6 {
  overflow: hidden;
  padding: 2vw;
}

.sliding_text1 span, .sliding_text6 span {
  display: inline-block;
  transform: translateY(120%);
  opacity: 0;
}


.text_group {
  text-align: left;
  line-height: 1.5; 
  top: 0vh;
  padding: 2vw;
  right: 10%;
  position: absolute;
  font-size: clamp(1rem, 3vw, 2rem);
  font-weight: bold;

}

.sliding_text2, .sliding_text3, .sliding_text4, .sliding_text5 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
    font-family: 'Nohemi', sans-serif;

  color: #801616;

}


.sliding_text4, .sliding_text5 {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 30vw;
  text-align: left;
  z-index: 10;
  display: block;
  line-height: 0.9;
  margin-left: 2vw;
}


.sliding_text5 {
  right: 10%;
}

.sliding_text7 {
  width: 40vw;
  height: 30vh;
  position: absolute;
  top: 60%;
  display:flex;
  /* flex-wrap: wrap; */
}

.sliding_text7 div{
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 100px;
}

.sliding_text7 div img {
  width: 100%;
  /* height: auto; */
  object-fit: contain;
  display: block;
  transform: scale(0);
  transform-origin: center;

}

/* LA CORRECTION : Chaque ligne doit être un "table" pour coller au texte */
.line {
  display: table !important; /* C'est CA qui empêche le gros bloc */
  position: relative !important;
  margin-bottom: 6px;
  overflow: hidden;
  width: auto;
}

.line-text {
  display: block;
  opacity: 0;
  position: relative;
  z-index: 1;
}

.line-highlight {
  position: absolute;
  inset: 0;
  background: #801616;
  z-index: 2;
  clip-path: inset(0 100% 0 0);
}
.sliding_text2 .text, .sliding_text3 .text {
  opacity: 0;
  position: relative;
  z-index: 1;
}

.highlight {
  position: absolute;
  inset: 0;
  background: #801616;
  z-index: 2;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

/* 
.sliding_text2, .sliding_text3 {
  font-family: 'nohemi', sans-serif;
  color: #801616;
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
  display: inline-flex;

}

.sliding_text2 {
  top: 44%;
  left: 20%;
}

.sliding_text3 {
  left: 20%;
  top: 50%;
transform: translateY(-50%);
}

.sliding_text2 .text, .sliding_text3 .text{
  opacity: 0;
  position: relative;
  z-index: 1;
}

.highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #801616;
  z-index: 2;
  clip-path: inset(0 100% 0 0); 
} */



/* .abt_me1 {
  display: flex;
  flex-direction: row;
}

.abt_me2 {
  display: flex;
  justify-content: center;
} */



/* .sliding_text1 {
  transform: translateY(100px);
  opacity: 0;
}

.sliding_text2,
.sliding_text4,
.sliding_text6 {
  transform: translateX(-100px);
  opacity: 0;
}

.sliding_text3,
.sliding_text5 {
  transform: translateX(100px);
  opacity: 0;
} */









/* .sliding_text3,
.sliding_text4 {
  flex: 1;
} */

/* .gacha {
  margin: 2vw;
  transform: translateY(-10vh);
} */





/* .text_container {
  display: grid;
  z-index: 0;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  gap: 1vw;
  grid-template-columns: 1fr 0.5fr 1fr 1fr 1fr;
  grid-template-rows: 0.25fr 0.25fr 1fr 1fr;
  grid-template-areas:
    "header header a a btn1"
    "header header gacha p2 p2"
    "p1 p1 gacha p2 p2"
    "adj1 adj1 gacha . .";
  font-size: clamp(1rem, 1vw, 1vw);
  font-family: "Nohemi", sans-serif;
  color: #801616;
}

/* .sliding_text1, .sliding_text2, .sliding_text3, .sliding_text4, .sliding_text5, .sliding_text6 {
  opacity: 0;
  overflow: hidden;
  padding-left: 3vw;
}

.gacha {
  grid-area: gacha;
}

.sliding_text2, .sliding_text4, .sliding_text6 {
  transform: translateX(100%);
}

.sliding_text3, .sliding_text5 {
  transform: translateX(-100%);
}

.sliding_text1 {
  grid-area: header;
  margin: auto;
  padding: 0;
  transform: translateY(-100%);
  padding-left: 2vw;
  white-space: nowrap;
}

.sliding_text2 {
  grid-area: a;
  font-size: clamp(1.5rem, 2vw, 2vw);
  font-weight: 700;
  overflow: visible;
}

.sliding_text3 {
  grid-area: p1;
}

.sliding_text4 {
  grid-area: p2;
}

.sliding_text5 {
  grid-area: adj1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.sliding_text5 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sliding_text5 div {
  height: 100%;
}

.sliding_text6 {
  grid-area: btn1;
  display: flex;
  justify-content: center;
  align-items: center;
} */



/* @media (max-width: 800px) {
  .text_container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 0.5fr 1fr 2fr 1fr 0.5fr;
    grid-template-areas:
      "header header"
      "a btn1"
      "p1 p1"
      "gacha gacha"
      "p2 p2"
      "adj1 adj1";
    gap: -10px;
  }
}  */
  

.bottom{
  height: 100vh;
  position: relative;
}



#cd_chain_container {
  width: 100vw;
  height: 90vh;
  position: absolute;
  overflow: hidden;
  /* border: solid 2px #801616; */
  /* bottom: 0; */
  top: 22vh;
  left: 50%;
  transform: translate(-50%);
  pointer-events: all;
  align-self: top;
  z-index: 2;
}

#cd_chain_container canvas{
  transform: scale(1);
  background: transparent;
}


.cd_nav{
  /* background-color: blue; */
  position: relative;
  display: flex;
  justify-content: center;
  justify-self: center;
  bottom: -75vh;
  gap: 10px;
  z-index: 100;
}
/* 
.cd_nav span {
  font-size: 1rem;
} */

@media (max-width: 800px) {
  #cd_chain_container {
    width: 110%;
    height: 60vh;
  }

  .projects_text_container {
    top: 45vh;
  }

  .cd_nav{
    bottom: -65vh;
    justify-self: left;
    margin-left: 10vw;
  }
}

.cd-link {
  cursor: pointer;
  overflow: hidden;
}

.bottom h3 {
  position: absolute;
  z-index: 10;
  padding-left: 2vw;
  top: 10vh;
}

.projects_text_container {
  position: absolute;
  z-index: 20;
  left: 60vw;
  bottom: 15vh;
  font-family: "Nohemi", sans-serif;
  color: #801616;
  width: 25vw;
  /* background-color: aqua; */
}




.cd_title {
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2vw, 1.2vw);
  margin-bottom: 1vw;
}

.cd_tags {
  font-size: clamp(0.2rem, 1.9vw, 0.8rem);
  margin: 0;
}

.cd_description {
  margin-right: 1.5vw;
}


.cd_btn_wrapper {
  position: relative;
  overflow: hidden;
  width: fit-content;
  height: auto;
  /* padding-top: 21px;
  padding-bottom: 21px; */
  border-radius: 10px;
}




.fancy-btn{
  position: relative;
  padding: 14px;
  border-radius: 10px;
  background:rgb(248, 237, 231);
  color: #801616;
  border: 2px solid #801616;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;

  width: max-content;
  white-space: normal;

  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.5vw);
}

.text {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.fill {
  position: absolute;
  width: 200%;
  height: 200%;
  background: #801616;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: var(--x, 50%) var(--y, 50%);
  transition: transform .5s ease;
  top: -50%;
  left: -50%;
  z-index: 1;
}



/* .fill {
  position: absolute;
  inset: 0;
  background: #801616;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: var(--x, 50%) var(--y, 50%);
  transition: transform .45s ease;
  z-index: 1;
  pointer-events: none;
} */


.fancy-btn:hover .fill {
  transform: scale(1);
}

.fancy-btn:hover {
  color: aliceblue;
}


@font-face {
  font-family: "Nohemi";
  src: url(fonts/Nohemi-Medium.woff2);
  font-weight: 500;
}

@font-face {
  font-family: "Nohemi";
  src: url(fonts/Nohemi-Bold.woff2);
  font-weight: 700;
}