/* Intro Section */
.section-intro {
  margin: 0rem 3.2rem;
  height: 100vh;
}

.intro-text {
  position: absolute;
  text-align: center;
  opacity: 1;
  top: 45%;
  right: 50%;
  transform: translate(50%, -50%);
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  font-size: 2rem;
}

.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.remove {
  display: none;
}

.intro-animation-1 {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 25%;
  background-repeat: none;
  -webkit-mask-image: url("../img/intro/mask3.png");
  mask-image: url("../img/intro/mask3.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  background-color: #ffe8cc;
  opacity: 0;
}

.intro-animation-3 {
  position: absolute;
  top: 40%;
  right: 50%;
  width: 30%;
  background-repeat: none;
  -webkit-mask-image: url("../img/intro/mask2.png");
  mask-image: url("../img/intro/mask2.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  background-color: #ffe8cc;
  opacity: 0;
}

.intro-animation-2 {
  position: absolute;
  top: 0%;
  right: 10%;
  width: 50%;
  background-repeat: none;
  -webkit-mask-image: url("../img/intro/mask1.png");
  mask-image: url("../img/intro/mask1.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  /*-webkit-mask-position: 10rem 16rem;*/
  /*mask-position: 10rem 16rem;*/
  background-color: #ffe8cc;
  opacity: 0;
}

/*Sticky Note*/

.stickyNoteContainer {
  position: absolute;
  opacity: 0;
  text-align: center;
}

.stickyNote {
  width: 9.6rem;
}

.stickyNoteText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(-3deg) translate(-45%, -60%);
  font-family: "Just Another Hand", cursive;
  font-size: 3.2rem;
}

.stickyNote1 {
  top: 30%;
  right: 25%;
  transform: rotate(-10deg);
}

.stickyNote2 {
  top: 65%;
  right: 67.5%;
  transform: rotate(10deg);
}

.stickyNote3 {
  top: 25%;
  right: 82.5%;
}

.splatter {
  animation: reveal 0.25s cubic-bezier(0.11, 0, 0.5, 0) forwards;
}

@keyframes reveal {
  0% {
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    opacity: 1;
    clip-path: circle(100% at 50% 50%);
  }
}

/* About Me Section */
.section-aboutMe {
  height: auto;
  max-height: auto;
  position: absolute;
  background-color: #f8f9fa;
  width: 52rem;
  padding: 1.6rem;
  transform: translate(50%, -50%);
  font-size: 1.8rem;
  border-radius: 0.8rem;
  top: 50%;
  right: 50%;
  opacity: 0;
}

.title-aboutMe {
  font-family: "Just Another Hand", cursive;
  font-size: 3.6rem;
  font-weight: 200;
}

/* Socials Section */
.section-socials {
  height: auto;
  max-height: auto;
  position: absolute;
  background-color: #f8f9fa;
  width: 16rem;
  padding: 1.6rem;
  transform: translate(50%, -50%);
  font-size: 1.8rem;
  border-radius: 0.8rem;
  top: 65%;
  right: 40%;
  opacity: 0;
}

.title-socials {
  font-family: "Just Another Hand", cursive;
  font-size: 3.6rem;
  font-weight: 200;
}

/* Experience Section */
.section-experience {
  position: relative;
  height: var(--sectionExperience-height);
  margin: 1.6rem 3.2rem;
  text-align: center;
}

.title-experience {
  font-family: "Just Another Hand", cursive;
  font-size: 3.6rem;
  font-weight: 200;
}

.timelineBox {
  height: auto;
  max-height: auto;
  position: absolute;
  background-color: #e6fcf576;
  border: 0.4rem solid #087f5b;
  width: 55rem;
  padding: 1.6rem 2.4rem;
  font-size: 1.8rem;
  border-radius: 0.8rem;
  text-align: start;
}

.timelineStem {
  content: "";
  position: absolute;
  right: 50%;
  height: var(--sectionExperience-height);
  width: 1rem;
  background-color: #087f5b;
  border-radius: 1rem;
}

.timelineBranch {
  content: "";
  position: relative;
  top: 50%;
  height: 1rem;
  background-color: #087f5b;
  border-radius: 1rem;
}

.timelineBranch1 {
  right: 95%;
  width: calc(
    var(--sectionExperience-position1) + var(--sectionExperience-branchWidth)
  );
  transform: translate(-5%, -50%);
}

.experience1 {
  top: 10rem;
  left: var(--sectionExperience-position1);
}

.timelineBranch2 {
  left: 95%;
  width: calc(
    var(--sectionExperience-position2) + var(--sectionExperience-branchWidth)
  );
  transform: translate(0%, -50%);
}

.experience2 {
  top: 20rem;
  right: var(--sectionExperience-position2);
}

.timelineBranch3 {
  right: 95%;
  width: calc(
    var(--sectionExperience-position3) + var(--sectionExperience-branchWidth)
  );
}

.experience3 {
  top: 70rem;
  left: var(--sectionExperience-position3);
}

.timelineBranch4 {
  /* left: 95%; */
  width: calc(
    var(--sectionExperience-position4) + var(--sectionExperience-branchWidth)
  );
}

.experience4 {
  top: 70rem;
  right: var(--sectionExperience-position4);
}

/* Contact Me Section */
.section-contactMe {
  margin: 1.6rem 3.2rem;
  text-align: center;
}

/* Projects Section */
.section-projects {
  position: relative;
  height: 70rem;
  margin: 6.4rem 3.2rem;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.2fr 1fr 1fr;
  row-gap: 1rem;
}

.projects-row1 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 1rem;
}

.projects-row2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 1rem;
}

.title-projects {
  grid-column: 1/-1;
  align-self: center;
  font-family: "Just Another Hand", cursive;
  font-size: 3.6rem;
  font-weight: 200;
}

.projectBox {
  height: auto;
  max-height: auto;
  background-color: #e6fcf576;
  border: 0.4rem solid #087f5b;
  padding: 1.6rem;
  font-size: 1.8rem;
  border-radius: 0.8rem;
  text-align: start;
}

.project1 {
  width: 100%;
}

.project2 {
  width: 100%;
}

.project3 {
  width: 100%;
}

.project4 {
  width: 100%;
}

/* Education Section */
.section-education {
  margin: 1.6rem 3.2rem;
  text-align: center;
}