html{
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-color: hsl(204, 100%, 9%);
  height: 200vh;
}


:root {
  --dot-radius: 1px;
  --path-radius: 150px;
  --vp-width: 10vw;
  --vp-height: 10vw;

  --static-dot-color: hsl(114, 100%, 33%);
  --moving-dot-color: rgb(135, 255, 71);
}

.intro {
  position: absolute;
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
  z-index: 5;
  font-family: Neon;
  display: inline-block;
  font-size: 3vw;
  left: 38vw;
  width: 20vw;
  top: 32%;
  text-align: center;
  color: rgb(220, 255, 219);
  text-shadow: 0 0 20px #fff, 0 0 30px #4dff56, 0 0 40px #4dff65, 0 0 50px #53ff4d, 0 0 60px #4dff56, 0 0 70px #5cff4d, 0 0 80px #4dff4d;
}

.bak,
.secret{
  transition: all 5s;
}

.bak:hover,
.active{
  color: #0f0;
  transition: 0s;
  text-shadow: 0 0 120px #0f0;
}

.secret:hover{
  color: rgb(0, 255, 200);
  transition: 0s;
  text-shadow: 0 0 120px rgb(0, 255, 200);
}

section .row div{
  white-space: nowrap;
  animation: backgroundl1 80s linear infinite;
  animation-delay: -80s;
}

section .row div:nth-child(2){
  animation: backgroundl2 80s linear infinite;
  animation-delay: -40s;
}

section .row:nth-child(even) div{
  white-space: nowrap;
  animation: backgroundr1 80s linear infinite;
  animation-delay: -80s;
}

section .row:nth-child(even) div:nth-child(2){
  animation: backgroundr2 80s linear infinite;
  animation-delay: -40s;
}

.secTitle {
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 5px;
    z-index: 5;
    left: 34%;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    position: absolute;
    top: 5vh;
    display: block;
    font-size: 3vw;
    color: rgb(220, 255, 219);
    text-shadow: 0 0 20px #fff, 0 0 30px #4dff56, 0 0 40px #4dff65, 0 0 50px #53ff4d, 0 0 60px #4dff56, 0 0 70px #5cff4d, 0 0 80px #4dff4d;
}
  
  #txt1 {
    position: absolute;
    left: 3%;
    top: 50vh;
    z-index: 2;
  }

.blockP{
  z-index: 5;
  position: relative;
  border-radius: 10px;
  top: 0%;
  transition: all 1s;
  height: 30%;
  width: auto;
  left: 0%;
}

.blockP:hover{
  transition: all 1s;
  top: -69%;
  left: -3.5%;
  height: 105%;
  border-radius: 0px;

}

.bolt{
  position: relative;
  top: 0%;
  transition: all 1s;
  height: 30%;
  width: auto;
  right: 0%;
}

.bolt:hover{
  transition: all 1s;
  top: -55%;
  right: 0%;
  height: 100%;

}
  
#txt2 {
  position: absolute;
  right: 3%;
  top: 70vh;
  z-index: 2;
}

#txt3 {
  position: absolute;
  left: 3%;
  top: 100vh;
  z-index: 2;
}

.ibm{
  z-index: 5;
  position: relative;
  border-radius: 10px;
  top: 0%;
  transition: all 1s;
  height: 40%;
  width: auto;
  left: 0%;
}

.ibm:hover{
  transition: all 1s;
  top: -52%;
  left: -3.5%;
  height: 105%;
  border-radius: 0px;
}

#txt4 {
  position: absolute;
  right: 3%;
  top: 120vh;
  z-index: 2;
}
.cs50{
  z-index: 5;
  position: relative;
  border-radius: 10px;
  top: 0%;
  transition: all 1s;
  height: 30%;
  width: auto;
  left: 0%;
}

.cs50:hover{
  transition: all 1s;
  top: -69%;
  left: 0%;
  height: 105%;
  border-radius: 0px;
}

.projectsTitle {
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-radius: 5px;
  z-index: 5;
  left: 40vw;
  width: 20vw;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  position: absolute;
  top: 160vh;
  display: block;
  font-size: 3vw;
  color: rgb(220, 255, 219);
  text-shadow: 0 0 20px #fff, 0 0 30px #4dff56, 0 0 40px #4dff65, 0 0 50px #53ff4d, 0 0 60px #4dff56, 0 0 70px #5cff4d, 0 0 80px #4dff4d;
}

.fa-square-caret-down{
  position: absolute;
  z-index: 5;
  top: 187vh;
  font-size: 4vw;
  left: 48vw;
  color: rgb(255, 255, 255);
  text-shadow:0 0 5px #fff, 0 0 7px #4dfff0, 0 0 10px #4dd3ff, 0 0 15px #4dbbff, 0 0 17px #4d62ff;
}

.fa-caret-right,
.fa-caret-left{
  transition: 0.5s;
  position: absolute;
  top:242.5vh ;
  border-radius: 10px;
  font-size: 5vh;
  background-color: #0f1660;
  border-width: 0px;
  display: block;
  z-index: 5;
}

.fa-caret-right{
  right: 1.5vw;
}

.fa-caret-left{
  left: 1.5vw;
}

.fa-caret-right:hover,
.fa-caret-left:hover{
  transition: 0.5s;
  color: rgb(0, 255, 166);
  box-shadow:0 0 5px #fff, 0 0 7px #4dfff0, 0 0 10px #4dd3ff, 0 0 15px #4dbbff, 0 0 17px #4d62ff;
  scale: 1.2;
}

.pjcenter{
  transition: all 2s;
  position: absolute;
  border-radius: 10px;
  z-index: 3;
  top: 200vh;
  height: 86vh;
  padding-top: 4vh;
  padding-left: 2vw;
  padding-right: 2vw;
  width: 90vw;
  left: 3vw;
  color: #4eff21;
  background-color: #0b0d23;
  box-shadow: 0 0 10px #fff, 0 0 15px #4dff8b, 0 0 20px #62ff4d, 0 0 30px #6eff4d, 0 0 35px #16ff12;
  font-size: 2vw;
  text-align: justify;
}

.pjleft{
  position: absolute;
  border-radius: 10px;
  left: 1vw;
  transition: all 2s;
  z-index: 2;
  top: 275vh;
  padding-top: 2vh;
  padding-left: 1vw;
  padding-right: 1vw;
  height: 18vh;
  width: 18vw;
  color: #4eff21;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  font-size: 0.1vw;
  text-align: justify;
}

.pjright{
  position: absolute;
  border-radius: 10px;
  transition: all 2s;
  right: 1vw;
  z-index: 2;
  top: 275vh;
  padding-top: 2vh;
  padding-left: 1vw;
  padding-right: 1vw;
  height: 18vh;
  width: 18vw;
  color: #4eff21;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  font-size: 0.1vw;
  text-align: justify;
}

.pjcenter p{
  font-size: 1.5vw;
  left: 30%;
}

.fa-up-right-from-square{
  transition: all 0.5s;
  position: relative;
  top: -2%;
  left: 99%;
  color: rgba(50, 50, 50, 0.9);
}

.fa-up-right-from-square:hover{
  transition: all 0.5s;
  color: #0f0;
  text-shadow: 0 0 20px #0f0;
}

.pyramid{
  transition: all 0.5s;
  position: relative;
  height: 50%;
  left: 10%;
  width: auto;
}

.cube{
  transition: all 0.5s;
  position: relative;
  top: 0%;
  height: 50%;
  left: 40%;
  width: auto;
}

.game{
  position: relative;
  height: 44%;
  left: 0%;
  top: 0%;
  width: auto;
}

.sudoku{
  position: relative;
  height: 50%;
  left: 0%;
  top: 0%;
  width: auto;
}

.txt{
  transition: all 6s;
}
.txt:hover{
  transition: all 0.6s;
  color: #4eff21;
  background-color: #0b0d23;
  box-shadow: 0 0 10px #fff, 0 0 15px #4dff8b, 0 0 20px #62ff4d, 0 0 30px #6eff4d, 0 0 35px #16ff12;
}

@keyframes backgroundl1{
  0%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(-100%);
  }
}

@keyframes backgroundl2{
  0%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(-200%);
  }
}

@keyframes backgroundr1{
  0%{
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(100%);
  }
}

@keyframes backgroundr2{
  0%{
    transform: translateX(-200%);
  }
  100%{
    transform: translateX(0%);
  }
}

.copyright{
  top: 300vh;
  text-shadow: 0 0 20px #fff, 0 0 30px #4dff56, 0 0 40px #4dff65, 0 0 50px #53ff4d, 0 0 60px #4dff56, 0 0 70px #5cff4d, 0 0 80px #4dff4d;
}