body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #882E26;
  overflow-x: hidden;
  background-image: url('images-2/fungi-rework-background-02\ 1.png'); 
  background-size: 100% 100%; 
  background-repeat: no-repeat; 
  background-position: center; 
  color: #882E26;
}

.section {
  position: sticky;
  top: 0; 
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-bottom: 300vh; */
}

/* Section 1: Sentence Animation */
.container {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100vh;
}

.sentence {
  font-family: "Italiana", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 230%;
  font-weight: bold;
  position: absolute;
  transform-style: preserve-3d;
  perspective: 800px;
  display: inline-flex;
}

.sentence span {
  display: inline-block;
  transform-style: preserve-3d;
  opacity: 0;
}

.sentence#sentence1 span {
  opacity: 1;
}

.sentence .space {
  width: 0.6em;
}

/* Section 2: 3D Sphere Rotation */
.sphere-container {
  position:relative;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* margin-top: 300vh; */
  /* margin-bottom: 40vh; */
  /* z-index: 1; */

}

.sphere {
    /* position: relative; */
    width: 20%;
    height: 300px;
    transform-style: preserve-3d;
}

.text {
  position: absolute;
  color: #882E26;
  font-family: "quasimoda", sans-serif;
  font-size: 16px;
  /* font-weight: bold; */
  /* text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); */
  background-color:rgb(202, 184, 171, 0);
  border: solid #882E26 1px;
  width: 70%;
  padding: 20px;
  border-radius: 20px;
}

.sphere .text:nth-child(1) { transform: rotateY(-45deg) translateZ(300px) translateY(150px) translateX(0px); }  /* HTML */
.sphere .text:nth-child(2) { transform: rotateY(-90deg) translateZ(250px) translateY(300px) translateX(0px); } /* CSS */
.sphere .text:nth-child(3) { transform: rotateY(-135deg) translateZ(200px) translateY(450px) translateX(0px); } /* JavaScript */
.sphere .text:nth-child(4) { transform: rotateY(-180deg) translateZ(250px) translateY(600px) translateX(0px); } /* Design */
.sphere .text:nth-child(5) { transform: rotateY(-225deg) translateZ(300px) translateY(750px) translateX(0px); } /* 3D */
.sphere .text:nth-child(6) { transform: rotateY(-270deg) translateZ(350px) translateY(900px) translateX(0px); } /* UI */
.sphere .text:nth-child(7) { transform: rotateY(-360deg) translateZ(350px) translateY(0px) translateX(0px); } /* UX */
/* .sphere .text:nth-child(8) { transform: rotateY(-315deg) translateZ(0px) translateY(1300px) translateX(0px); }  */
/* Animation */


/* Section 3: Video Scroll Control */
.video-section {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:rgb(244, 244, 244, 0);
  margin-top: 50vh;
}

video {
  max-width: 80%;
}

/* Additional space for scrolling */
.spacer {
  height: 100vh;
}





























































button {
  width: fit-content;
  height:min-content;
  padding: 20%;
  background-color: #f4f4f4;
  border: solid 1px black;
  border-radius: 8%;
  font-size: 16px;
}

h1 { 
  /* font-family: "elevon", sans-serif; */
  font-family: "Italiana", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 500%;
  margin-bottom: 5%;
  color: #882E26;
}

h3 {
  font-family: "quasimoda", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 36px;
}

p {
  font-family: "quasimoda", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: larger;
}








.left-align {
  display: flex;
  align-items: end;
  justify-content: end;
  align-content: end;
  align-self: flex-end;
  justify-items: end;
  justify-self: end;
}








.home {
  display: grid;
  grid-template-columns: repeat(2,45%);
  align-content: center;
  gap: 200px;
  /* grid-template-rows:repeat(3, 50% 20% 20%); */
  margin: 60px;
  margin-top: 0%;
}

.sub-title {
  font-family: "quasimoda", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 219%;
  /* margin-bottom: 5%; */
}

#scroll-down {
  margin: 100px 0px 30px 0px;
}

#three-mushrooms {
  /* position:absolute; */
  height: 500px;
  width: 100%;
  padding: 20px;
  padding-top: 0px;
  padding-bottom: 0%;
  object-fit: contain;
  margin-right: 100px;
  border: solid 1px #882E26;
  border-radius: 20px;
}







.st {
  /* margin-top: 370px; */
  margin: 320px 100px 200px 100px;
  display: grid;
  grid-template-columns: repeat(1, 100%);
}

#long-row {
  margin: 0;
  border: solid 1px #882E26;
  border-radius: 20px;
  padding: 10px;
  /* background-repeat: repeat; */
  width: 100%;
  height: 100%;
}






.nd {
  margin-top: 300vh;
  margin: 300vh 5vh 5vh 5vh;
  /* padding: 5%; */
  display: grid;
  grid-template-columns: repeat(2, 70% 30%);
  grid-template-rows: min-content; 
}

.nd-text {
  margin: 100px;
  margin-top: 320vh;
  
}

.nd-body {
  display: grid;
  grid-template-columns: repeat(2, 47%);
  gap: 32px;
  grid-template-rows: min-content;
  /* margin: 100px; */
  
}

#short-row {
  height: 120px;
  width: 100%;
  /* object-fit: contain; */
  margin: 0%;
  border: 1px solid #882E26;
  border-radius: 20px;
  /* border: solid 1px black; */
}

.mushrooms-close-up {
  height: 120px;
  width: 100%;
  object-fit: cover;
  margin: 0%;
  border: 1px solid #882E26;
  border-radius: 20px;
  /* border: solid 1px black; */
}

#two-mushrooms {
  width: 90%;
  height: 100%;
  object-fit: cover;
  margin: 0%;
  border: 1px solid #882E26;
  border-radius: 20px;
  /* border: solid 1px black; */
}






.rd {
  display: grid;
  grid-template-columns: repeat(2, 70% 30%);
  column-gap: 32px;
  margin: 80px 140px 80px 70px;
}


.rd-text {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.rd-textt {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
}

#small-mushroom {
  height: 40%;
  width: 40%;
  object-fit: contain;
  border: 1px solid #882E26;
  border-radius: 20px;
  /* border: solid 1px black; */
  padding: 2%;
}

#another-small-mushroom {
  height: 40%;
  width: 40%;
  object-fit: contain;
  border: 1px solid #882E26;
  border-radius: 20px;
  /* border: solid 1px black; */
  padding: 2%;
}

#five-mushrooms-with-some-shrubs {
  height: 90%;
  width: 90%;
  object-fit: contain;
  padding: 10px;
  border: 1px solid #882E26;
  border-radius: 20px;
  /* border: solid 1px black; */
}




.ended {
  /* display: flex;
  flex-direction: row; */
  display: grid;
  grid-template-columns: repeat(2, 50%);
  gap: 16px;
  margin: 300px 80px 60px 60px;
}

#ended {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  border: 1px solid #882E26;
  border-radius: 20px;
  height: 200px;
  width: 100%;
  object-fit: contain;
}

.end {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: min-content;
  gap: 32px;
  margin: 100px;
  margin-right: 120px;
  margin-top: 60px;
  
}

#end {
  margin: 60px 60px 100px 60px;
}








footer {
  /* display: grid;
  grid-template-columns: repeat(2, 50%); */
  margin: 60px;
  margin-bottom: 100px;
  margin-top: 0px;
}

.contact {
  display: flex;
  flex-direction: column;
}

a {
  color: #000;
  font-size: 24px;
}