#diagonal-line path,
#name path {
  stroke: var(--text-color)
}

body {
  background-color: var(--bg-color);
  margin: 0;
  display: flex;
  flex-direction: row;
  height: 100svh;
  overflow: hidden;
}

body>.container {
  display: flex;
  flex-direction: column;
  min-width: none;
  box-sizing: border-box;
  flex: 1 0 50%
}

.right-container {
  padding-right: 5rem;
  padding-bottom: 5rem;
  justify-content: end;
  align-items: end;
  overflow: hidden;
  z-index: 1;
}

#projects-about-me-container {
  display: flex;
  align-items: center;
  -webkit-text-stroke: 1px var(--text-color);
  color: transparent;
  font-size: 4rem;
  flex-direction: column;
  gap: 2.5rem;
  width: fit-content;
  user-select: none;
}


.text-name {
  display: flex;
  flex-direction: column;
  width: fit-content;
  user-select: none;
}

.text-name * {
  -webkit-text-stroke: 1px var(--text-color);
  color: transparent;
  font-size: 4rem;
}

.left-container {
  padding-top: 1rem;
  padding-left: 1rem;
}

#diagonal-line {
  position: absolute;
  height: 100%;
  top: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  z-index: 1;
}

#horizontal-line-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  z-index: 1;
  overflow: hidden;
}

#horizontal-line {
  margin-bottom: 0px;
  height: 40%;
  width: 110%;
}

@keyframes fadeInAnim {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }

}

#hackerModeBtn {
  position: absolute;
  animation: fadeInAnim 1000s 0s 1 forwards;
  top: 4px;
  right: 0px;
  left: 0px;
  margin: auto;
  width: fit-content;
  z-index: 4;
  user-select: none;
}

#horizontal-line * {
  width: 100%;
  height: 110%;
  fill: var(--bg-color);
  stroke: var(--text-color);
  stroke-dasharray: 1000vh;
  stroke-dashoffset: 1000vh;
  animation: draw 2.5s linear forwards;
}


#right-hand {
  z-index: 2;
  position: absolute;
  height: 30%;
  transform: rotate(-35deg);
  top: 25vh;
  right: 35vh;
  visibility: hidden;
}

#left-hand {
  z-index: 2;
  position: absolute;
  height: 30%;
  transform: rotate(-35deg) scaleX(-1);
  top: 70vh;
  right: 105vh;
  visibility: hidden;
}



.lifted-finger {
  visibility: visible;
}

.finger {
  visibility: hidden;
}

@keyframes raise-right-hand-anim {
  0% {
    top: 30vh;
    right: 20vh;
  }

  50% {
    top: 5vh;
    right: 50vh;
  }

  100% {
    top: 10vh;
    right: 45vh;
  }
}

@keyframes hand-horizontal-anim {
  0% {
    top: 60vh;
  }

  50% {
    top: 38vh;
  }

  100% {
    top: 42vh;
  }
}

@keyframes raise-left-hand-anim {

  0% {
    top: 90vh;
    right: 70vh;
  }

  50% {
    top: 50vh;
    right: 110vh;
  }

  100% {
    top: 55vh;
    right: 105vh;
  }
}

@keyframes raise-face-anim {

  50% {
    top: 10vh;
    right: 75vh;
  }

  100% {
    top: 20vh;
    right: 65vh;
  }
}

@keyframes raise-face-horizontal {

  0% {
    top: 60svh
  }

  50% {
    top: 35svh;
  }

  100% {
    top: 40svh;
  }
}

#right-hand-open-palm {
  position: absolute;
  height: 50%;
  transform: rotate(-35deg);
  top: 10vh;
  right: 45vh;
  animation: raise-right-hand-anim 0.5s ease 0s 1 forwards;
}


#left-hand-open-palm {
  position: absolute;
  height: 50%;
  transform: rotate(-35deg) scaleX(-1);
  top: 90vh;
  right: 70vh;
  animation: raise-left-hand-anim 0.5s ease 1s 1 forwards;
  visibility: visible;
}

#face {
  position: absolute;
  top: 50vh;
  right: 35vh;
  height: 70%;
  animation: raise-face-anim 1s ease 2s 1 forwards;
}


#diagonal-line-path {
  stroke-dasharray: 1000vh;
  stroke-dashoffset: 1000vh;
  animation: draw 4s linear forwards;

}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

#letter-path {
  animation: draw 4s linear forwards;
  fill: red;
}


#name {
  z-index: 3;
  width: 40vh;
}

@media only screen and (max-width: 1093px) {

  #diagonal-line {
    visibility: hidden;
    display: none;
  }

  #horizontal-line-container {
    display: flex;
  }

  #left-hand,
  #right-hand {
    height: 15%;
  }

  #right-hand-open-palm,
  #left-hand-open-palm {
    height: 25%;
    transform: rotate(0deg);
  }

  #right-hand-open-palm {
    animation-name: hand-horizontal-anim;
    height: 20vh;
    right: 0px;
    top: 60vh;
    left: 24vh;
    margin: auto;
    transform: none;
  }

  #left-hand-open-palm {
    animation-name: hand-horizontal-anim;
    height: 20vh;
    left: 0px;
    top: 60vh;
    right: 24vh;
    margin: auto;
    transform: scaleX(-1);
  }

  #name {
    width: 30vh;
  }

  body {
    flex-direction: column;
  }

  .right-container {
    padding: 0px;
    align-items: center;
    justify-content: center;
  }

  #projects-about-me-container {
    font-size: 2rem;
    margin-top: 8vh;
  }

  #right-hand {
    height: 12vh;
    right: 0px;
    top: 55svh;
    left: 30vh;
    margin: auto;
    transform: none;
  }

  #left-hand {
    height: 12vh;
    left: 0px;
    top: 55svh;
    right: 30vh;
    margin: auto;
    transform: scaleX(-1) rotate(0deg);
  }

  #face {
    transform: rotate(35deg);
    height: 30svh;
    left: 0px;
    right: 0px;
    margin: auto;
    top: 60vh;
    animation-name: raise-face-horizontal;
  }
}



/***************************************************
 * Generated by SVG Artista on 1/22/2024, 6:37:58 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

#name .svg-elem-1 {
  stroke-dashoffset: 538.7791137695312px;
  stroke-dasharray: 538.7791137695312px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

#name.active .svg-elem-1 {
  stroke-dashoffset: 0;

}

#name .svg-elem-2 {
  stroke-dashoffset: 168.38916015625px;
  stroke-dasharray: 168.38916015625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

#name.active .svg-elem-2 {
  stroke-dashoffset: 0;

}

#name .svg-elem-3 {
  stroke-dashoffset: 159.65663146972656px;
  stroke-dasharray: 159.65663146972656px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

#name.active .svg-elem-3 {
  stroke-dashoffset: 0;

}

#name .svg-elem-4 {
  stroke-dashoffset: 164.0364990234375px;
  stroke-dasharray: 164.0364990234375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

#name.active .svg-elem-4 {
  stroke-dashoffset: 0;

}

#name .svg-elem-5 {
  stroke-dashoffset: 188.04605102539062px;
  stroke-dasharray: 188.04605102539062px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

#name.active .svg-elem-5 {
  stroke-dashoffset: 0;

}

#name .svg-elem-6 {
  stroke-dashoffset: 206.92172241210938px;
  stroke-dasharray: 206.92172241210938px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

#name.active .svg-elem-6 {
  stroke-dashoffset: 0;

}

#name .svg-elem-7 {
  stroke-dashoffset: 194.32106018066406px;
  stroke-dasharray: 194.32106018066406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

#name.active .svg-elem-7 {
  stroke-dashoffset: 0;

}

#name .svg-elem-8 {
  stroke-dashoffset: 188.71365356445312px;
  stroke-dasharray: 188.71365356445312px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

#name.active .svg-elem-8 {
  stroke-dashoffset: 0;

}

#name .svg-elem-9 {
  stroke-dashoffset: 362.8333740234375px;
  stroke-dasharray: 362.8333740234375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

#name.active .svg-elem-9 {
  stroke-dashoffset: 0;

}

#name .svg-elem-10 {
  stroke-dashoffset: 170.5757598876953px;
  stroke-dasharray: 170.5757598876953px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

#name.active .svg-elem-10 {
  stroke-dashoffset: 0;

}

#name .svg-elem-11 {
  stroke-dashoffset: 169.0286407470703px;
  stroke-dasharray: 169.0286407470703px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

#name.active .svg-elem-11 {
  stroke-dashoffset: 0;

}

#name .svg-elem-12 {
  stroke-dashoffset: 164.9005584716797px;
  stroke-dasharray: 164.9005584716797px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

#name.active .svg-elem-12 {
  stroke-dashoffset: 0;

}

#name .svg-elem-13 {
  stroke-dashoffset: 188.69046020507812px;
  stroke-dasharray: 188.69046020507812px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

#name.active .svg-elem-13 {
  stroke-dashoffset: 0;

}

#name .svg-elem-14 {
  stroke-dashoffset: 195.04031372070312px;
  stroke-dasharray: 195.04031372070312px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

#name.active .svg-elem-14 {
  stroke-dashoffset: 0;
}

#name .svg-elem-15 {
  stroke-dashoffset: 1012px;
  stroke-dasharray: 1012px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

#name.active .svg-elem-15 {
  stroke-dashoffset: 0;

}