html, body {
  scroll-behavior: smooth;
}

* {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  margin: 0;
  padding: 0;
  color: white; 
}
*::selection{
  background-color: yellow;
  color: black;
}

body {
  background-color: rgb(31, 31, 31);
  background-image: url("./images/Welcome.png");
  background-blend-mode: lighten;
  background-size: 100vh;
  background-repeat: no-repeat;
  background-position: center 10vh;
  background-attachment: fixed;
}
/* Customize scrollbar styles */
body::-webkit-scrollbar {
  width: 6px; /* Adjust the width of the scrollbar */
}

body::-webkit-scrollbar-thumb {
  background-color: #20bed0; /* Color of the thumb */
  border-radius: 2px; /* Rounded corners of the thumb */
}

body::-webkit-scrollbar-track {
  background-color: #4b4b4b; /* Color of the track */
  border-radius: 8px; /* Rounded corners of the track */
}

a{
  text-decoration: none;
}

.hover-ball {
  width: 50px;
  
  height: 50px;
  
  background-color: #95ff00;
  border-radius: 50%;
  
  
  position: fixed;
  mix-blend-mode: difference;
  z-index: +1;
  pointer-events: none; /* Ensure the ball doesn't interfere with other elements */
  transition: transform 0.1s ease-out; /* Optional: Add a smooth transition effect */
}

.hands {
  height: 1em;
  position: relative;
  top: 20px;
}

.first-section {
  font-size: 200px;
  margin: auto;
  display: flex;
  width: fit-content;
  height: 100vh;
  justify-content: center;
  scale: 0.8;
  align-items: center;
}
.fade-first-section{
  position: relative;
  transform: translateY(-5000px) ;
  scale:0.5;
  transition: 0.5s ;
  opacity: 0.2;
  
}

.snapemoji {
  position: absolute;
  z-index: -1;
  height: 400px;
  padding: 200px;
}

.welcome {
  margin-top: 220px;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

nav {
  display: flex;
  padding: 10px 0;
  background-color: rgb(0, 0, 0);
  backdrop-filter: blur(20px);
  position: fixed;
  width: 100vw;
  z-index: 10;
  font-size: 25px;
  box-shadow: 10px 0 black;
  transition: 1s;
}
.nav-scroll{
  background-color: rgba(131, 131, 131, 0.668);
  backdrop-filter: blur(20px);
  transition: 1s;
}
.socials {
  display: flex;
  filter: contrast(100) invert();

  justify-content: space-evenly;
  position: relative;
  margin-left: auto;
  margin-right: 2vw;
}

.socials >a>img {
  margin: 0 10px;
  width: 50px;
  height: 40px;
}
.socials>a{
  align-items: center;
  justify-content: center;
  position: relative;
}

.links {
  display: flex;
  margin: auto 2vw;
}

.links * {
  margin: 0 10px;
}

.second-section {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1228px;
  margin: auto;
  padding-bottom: 200px;
  padding-top: 100px;
  transition: 4s;
}
.onscroll-second-section{
  backdrop-filter:saturate(5) blur(50px) ;
  transition: 4s;
}

.hero1 {
  height: 550px;
  position: relative;
  margin-left: auto;
  filter: drop-shadow(0px 0px 30px rgb(0, 0, 0));
  opacity: 0.1;
}
.hero1-animated{
  animation: fadein ease-in-out 1s forwards;
}

.mern {
  height: 450px;
  top: -30px;
  position: relative;
}

.mern-intro {
  align-items: center;
  width: 40vw;
}

.mern-intro * {
  margin: auto;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

.third-section {
  background:linear-gradient( rgb(0, 0, 0), rgba(0, 0, 0, 0.712));
  width: 100%;
  padding-bottom: 200px;
  padding-top: 100px;

}
.fourth-section {
  background:linear-gradient(  rgba(0, 0, 0, 0.712),rgb(0, 0, 0));
  width: 100%;
  padding-bottom: 200px;
}

.see {
  display: flex;
  margin: 0 10vw 5vh auto;
  height: 200px;
  mix-blend-mode: lighten;
}
.see2 {
  display: flex;
  margin: 0 10vw 5vh auto;
  height: 200px;
  
}
.img-grid {
  display: grid;
  grid-template-columns: repeat(2, 2fr); /* 2 columns with equal width */
  padding: 0;
  margin: 0;
  justify-content: center;
  align-items: center;
  margin: auto;
}
#jobscrapper
{position: relative;
   top: -20px
  }
  
  #paperTrade{
    position: relative; top: 110px
  }
.web-grid {
  width: 550px;
  height: auto;
  backdrop-filter: blur(20px);
  border-radius: 5px;
}
.img-grid >*{
  transition: 1s;
  box-shadow: 0 0 5px 1px white;
  padding: 20px;
  
}
.img-grid *:hover {
  transform: scale(1.1);
  transition: 1s;
  z-index: 4;
  position: relative;
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(50px);
}
.left-square {
  margin: 10px;
  margin-left: auto;
}
.right-square {
  margin: 10px;
  margin-right: auto;
}
.right-square,
.left-square {
  

  width: fit-content;
  background-color: rgba(255, 255, 255, 0.316);
  border-radius: 10px;
}

.fourth-section .left-square {
  position: relative;
  top: 150px;
}
.third-section .left-square {
  position: relative;
  top: 150px;
}
.fifth-section{
  background-color: white;
  width: 100%;
  padding-top: 100px;
}
.colour-grid{
  display: flex;
  margin: auto;
  padding: 50px 0 0 0;
}
.waves{
  mix-blend-mode: lighten;
  filter: invert() contrast(200);
  position:relative;
  top: -150px;
  padding:0 299px 0 663px;
  transform: translateX(-50%);
  left: 50%;
  height: 150px;
}
.sixth-section{
  background-color: black;
  width: 100%;
  background-image: url('./images/sixbg.png');
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-self: center;
 
}
.sixth-section > .left {
  left: 100px;
  width: 550px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  align-items: center;
  justify-content: center;
  display: flex;
  
}
.quotebg{
  mix-blend-mode: lighten;
  width: 600px;
  animation: slowBlink infinite 5s ease-in-out;
}
.sixth-section > .right {
  width: 550px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.quote {
  font-size: 60px;
  position: relative;
  left: -450px;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
video{
  height: 550px;
  margin: auto;

}
footer{
  display: flex;
  background-color:#303031d1 ;
  
  max-width: 100%;
  padding:0px 0 ;
  overflow-x: hidden;
  justify-content: center;
  align-items: center;
}
footer>img{
  height: 250px;
  filter: brightness(2);
  mix-blend-mode: lighten;
  
  
}
.footer-left {
  position: relative;
  left: -200px;
}
.footer-right {
  position: relative;
  margin-left: 0;
  left: 200px;
}
.footer-links{
  margin: 20px;
  font-size: 1.3em;
  text-align: left;
  
  line-height: 1.2;
  justify-content: space-evenly;
  align-items: baseline;
  text-align: left;
}
.footer-links>*{
  color:#C6A1FF ;
  
  width: 200px;
}
.parent-footer{
  margin: auto;
  display: grid;
  grid-template-columns: 2fr 2fr;
  position:relative;
}
.footer-links>h2{
  padding-bottom: 10px;
  text-decoration: underline;
  
}
.floater-contact{
  position: fixed;
  rotate: -90deg;
  top:200px;
  z-index: 8;
  right: -50px;
  padding: 15px 15px 30px 15px ;
  color: green;
  border-radius: 20px 20px 0 0;
  font-weight: 500;
  cursor: pointer;
  background-color: white;
  animation: pop-left 0.5s ease-in-out 5s forwards;
  box-shadow: 0px 0px 10px 0px black;
  opacity: 0;
}
.upscroll{
  position: fixed;
  bottom: 0;
  right: 0;

}
.upscroll >img{
  height: 30px;
  fill: white;
  border: 3px rgb(102, 102, 102) solid;
  padding: 10px;
  border-radius: 50px;
  margin: 15px;
  transition: 0.5s;
}
.upscroll >img:hover{
  padding-bottom: 20px;
  transition: 0.5s;
}
.resume-button{
  display: flex;
  align-items: center;
  justify-content: center;
}
.resume-download{
margin:30px  auto ;
padding: 20px;
font-size: 30px;
border: none;
cursor: pointer;
border-radius: 0px;
z-index: 8;
border-radius: 10px;
background:linear-gradient(to right ,rgb(59, 255, 59),rgb(58, 166, 255));
}
.resume-download:hover{
  padding: 20px 30px;
  transition: 0.5s;
  box-shadow: 5px 10px 10px 0px rgba(0, 0, 0, 0.205);
}
@keyframes pop-left{
  0%{
    transform: translateY(30px);
    opacity: 100%;
  }
  90%{
    transform: translateY(-10px);
    opacity: 100%;
  }
  100%{
    transform: translateY(0px);
    opacity: 100%;
  }
}

@keyframes slowBlink {
  0%{
    opacity: 1;
  }
  50%{
    opacity: 0.7;
  }
  100%{
    opacity: 1;
  }
}

@keyframes fadein {
  0%{
    position: relative;
    transform: translateX(-10000px);
    scale: 0.4;
    opacity: 0;
}
100%{
  position: relative;
  transform: translateX(0);
  scale:1;
  opacity: 1;
}
}

@media only screen and (max-width: 767px) {
 * *{
  max-width: 1080px;
  overflow-x: hidden;
 }
 body {
  background-color: rgb(31, 31, 31);
  background-image: url("./images/Welcome.png");
  background-blend-mode: lighten;
  background-size: 100vw;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
nav {
  display: flex;
  padding: 10px 0;
  background-color: rgb(0, 0, 0);
  backdrop-filter: blur(20px);
  position: fixed;
  width: 100vw;
  z-index: 10;
  font-size: 25px;
  box-shadow: 10px 0 black;
  transition: 1s;
}
.nav-scroll{
  background-color: rgba(131, 131, 131, 0.668);
  backdrop-filter: blur(20px);
  transition: 1s;
}
.socials {
  display: flex;
  filter: contrast(100) invert();

  justify-content: center;
  position: relative;
  margin: auto;
  
}

.socials >a>img {
  margin: auto;
  width: 40px;
  height: 35px;
}
.socials>a{
  align-items: center;
  justify-content: center;
  position: relative;
}

.links {
  display: flex;
  margin: auto ;
}

.links * {
  margin:auto 5px;
  font-size: 20px;
}

 .hands {
  height: 80px;
  position: relative;
  top: -0px;
}

.first-section {
  font-size: 80px;
    margin: auto;
  display: flex;
  width: fit-content;
  height: 100vh;
  justify-content: center;
  scale: 0.8;
  align-items: center;
}
.fade-first-section{
  position: relative;
  transform: translateY(-5000px) ;
  scale:0.5;
  transition: 0.5s ;
  opacity: 0.2;
  
}

.snapemoji {
  position: absolute;
  z-index: -1;
  height: 400px;
  padding: 200px;
}

.welcome {
  display: flex;
  margin-top: 220px;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

.second-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  padding-bottom: 200px;
  padding-top: 100px;
  transition: 1s;
}
.onscroll-second-section{
  backdrop-filter:saturate(5) blur(50px) ;
  transition: 4s;
}

.hero1 {
  width:  100%;
  height: min-content;
  
  position: relative;
  margin-left: auto;
  filter: drop-shadow(0px 0px 0px rgb(0, 0, 0));
  opacity: 1;
}
.hero1-animated{
  animation: fadein ease-in-out 1s forwards;
}

.mern {
  height:50%;
  
  position: relative;
}

.mern-intro {
  margin: auto;
  width: 100%;
  padding: 0;
  margin: 0;
}
#text-sec2{
  overflow-x: visible;
  scale: 0.8;
  width: 100%;
  padding: 0;
  margin: 0;
  
  position: relative;
}

.mern-intro * {
  
  margin: auto;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

.third-section {
  background:linear-gradient(  rgb(0, 0, 0),rgb(0, 0, 0));
  width: 100%;
  padding-bottom: 200px;
  padding-top: 100px;

}
.fourth-section {
  background:linear-gradient(  rgb(0, 0, 0),rgb(0, 0, 0));
  width: 100%;
  padding-bottom: 200px;
}

.see {
  display: flex;
  margin: 0 10vw 5vh auto;
  height: 150px;
 mix-blend-mode: lighten;
 
}
.see2 {
  display: flex;
  margin: 0 10vw 5vh auto;
  height: 150px;
  
}
.img-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.web-grid {
  width: 100%;
  height: auto;
  backdrop-filter: blur(20px);
  border-radius: 5px;
}
#jobscrapper{
  position: relative;
  top: 0px;
}
#paperTrade{
  position: relative;
  top: 00px;
}
.img-grid >*{
  transition: 1s;
  box-shadow: 0 0 5px 1px white;
  padding: 20px;
  margin: 20px;
  
}
.img-grid *:hover {
  transform: scale(1);
  transition: none;
  z-index: 4;
  
  border-radius: 20px;
  padding: 10px;
  backdrop-filter: none;
}
.left-square {
  margin: 10px;
 
}
.right-square {
  margin: 10px;

}
.right-square,
.left-square {
  

  width: fit-content;
  background-color: rgba(255, 255, 255, 0.316);
  border-radius: 10px;
}

.fourth-section .left-square {
  position: relative;
  top: 0px;
}
.third-section .left-square {
  position: relative;
  top: 0px;
}
.fifth-section{
  background-color: white;
  width: 100%;
  padding-top: 100px;
}
.colour-grid{
  display: flex;
  margin: auto;
  padding: 50px 0 50px 0 ;
  width: 90%;
  
}
.waves{
  display: none;
}
.sixth-section{
  background-color: black;
  width: 100%;
  background-image: url('./images/sixbg.png');
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
 
}
.sixth-section > .left {
 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  align-items: left;
  justify-content: baseline;
  
  
  transform: translateX(-50%);
  transform: translateY(-50%);
  top: 15%;
  left: 15%;
  mix-blend-mode: lighten;
}
.quotebg{
  mix-blend-mode: lighten;
  width: 600px;
  animation: slowBlink infinite 5s ease-in-out;
}
.sixth-section > .right {
  width: auto;
  height:auto;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.quote {
  font-size: 2.5em;
  position: relative;
  left: -250px;
  overflow: visible;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
video{
  height: 550px;
  margin: auto;
  mix-blend-mode: lighten;

}
footer{
  display: flex;
  background-color:#303031d1 ;
  flex-direction: column;
  width: auto;;
  padding:0px 0 ;
  overflow-x: hidden;
  justify-content: center;
  align-items: center;
  margin: auto;
  height: 100%;
}
footer>img{
  display: none;
  
  
}
.footer-left {display: none;
}
.footer-right {display: none;
}
.footer-links{
  padding: 20px 50px;
  font-size: 1.3em;
  text-align: left;
  
  line-height: 1.2;
  justify-content: space-evenly;
  align-items: baseline;
  text-align: left;
}
.footer-links>*{
  color:#C6A1FF ;
  
  width: 200px;
}
.parent-footer{
  margin: auto;
  display: flex;
  flex-direction: column;
  position:relative;
}
.footer-links>h2{
  padding-bottom: 10px;
  text-decoration: underline;
  
}
.floater-contact{
  scale: 0.6;
  position: fixed;
  rotate: -90deg;
  top:200px;
  z-index: 8;
  right: -60px;
  padding: 15px 15px 30px 15px ;
  color: green;
  border-radius: 20px 20px 0 0;
  font-weight: 500;
  cursor: pointer;
  background-color: white;
  animation: pop-left 0.5s ease-in-out 10s forwards;
  box-shadow: 0px 0px 10px 0px black;
  opacity: 0;
}
.upscroll{
  position: fixed;
  bottom: 0;
  right: 0;

}
.upscroll >img{
  height: 20px;
  fill: white;
  border: 3px rgb(102, 102, 102) solid;
  padding: 10px;
  border-radius: 50px;
  margin: 15px;
  transition: 0.5s;
}
.upscroll >img:hover{
  padding-bottom: 20px;
  transition: 0.5s;
}
.hover-ball {
 display: none;
}
}