style.css

:root{
   --first-them:black;
   --second-them:white;
}
.white-theme{
   --first-them:white;
   --second-them:bl;

}

*{

    margin: 0;
    padding: 0;
    font-family: 'poppins',sans-serif;
    box-sizing:border-box ;
    background-color:black;
    color: var(--second-them);
    letter-spacing: 1.9;
}
body{
   cursor: none;
}


p{
 
   line-height: 40px;
   color:  var(--second-them) ;
   font-size: 27px;
 font-weight: bold;
}
span {
   color: #1CD8D2;

}

.container {
 
   cursor: pointer;
}
nav {
   position: fixed;
   top: 0;
   left: 0;
  /* Adjust as necessary */
   z-index: 1000; /* Ensure it is above other elements */
   display: flex;
   justify-content: space-between;
   align-items: center;

 
    
}
nav ul {
  
   list-style: none;
   display: flex;
   justify-content: center; /* Adjust as necessary */
  
}
nav ul li {
   display: inline;

}
nav ul li a {
   color: #1CD8D2;
   text-decoration: none;
   font-size: 30px;
   position: relative;
}
nav ul li a::after {
   content: '';
   width: 0%;
   height: 3px;
   background: rgb(79, 163, 248);
   position: absolute;
   left: 3px;
   bottom: -6px;
   transition: 0.5s;
}
nav ul li a:hover::after {
   width: 100%;
}
 nav ul li{
    display:inline;
    margin: 20px 60px;
    list-style: none;
    flex: 1;
 }
 nav ul li a {
    color:#1CD8D2;
 
    text-decoration: none;
    font-size: 30px;
    position: relative;
 
 }
 nav ul li a::after{
    content:'';
    width: 100%;
    height: 3px; ;
    position: absolute;
    left:3px;
    bottom:-6px;
 }
 nav ul li a::after{
    content:'';
    width: 0%;
    height: 3px; ;
   background: rgb(98, 176, 254);
    position: absolute;
    left:3px;
    bottom:-6px;
    transition: 0.5s;
 }
 nav ul li a:hover::after{
    width: 100%;
 }
  .header-text{
    color:  var(--second-them);
    margin-top: 20%;
    margin-left: 40px;
    font-size: 50px;
 }
 .header-text h1{
    color:  var(--second-them);
    font-size: 60px;
    margin-top: 20px;
    margin-left: 10px;
 }

.logo {
float: left;
padding:0;
margin-right:80px ;
font-size: 32px;
font-weight: 700;
color:  var(--second-them);
text-decoration: none;

}
#about{
   padding: 80px 0;
}
.row{
   display: flex;
  flex-wrap: wrap;
}
#photo{
   float: left;
  margin-right: 20px;
  padding: 40px;
}
.container2 h1{
   color: var(--second-them);
   margin-left: 220px;
   font-size: 50px;
   font-weight: 600; ;
}

.about-col2 p {
   max-width:590px;
   padding-left: 10px;
   padding-top: 20px;
}

.box {
  color: #1CD8D2 ;
  border-color:  #1CD8D2 ;
font-size: 25px;
  padding: 15px 30px;
transform: translate(10%,10%);
font-weight: bolde;
transition: 0.1s;
cursor: pointer;

}
.box a{
   color: #1CD8D2 ;
   border-color:  #1CD8D2 ;
   text-decoration: none;
}
.box:hover{
background-color: #1CD8D2 ;
color: black;
}
.box a:hover{
   background-color: #1CD8D2 ;
   color: black;
   border-color: #1CD8D2  ;
   }
.Thoughts1 {
   color: var(--second-them);
   font-size: 30px;
   margin-top: 30px;
   margin-left: 30px; 
   text-indent: 23px;
}
.thoughtcore{
   margin-top: 30px;
   max-width: 550px;
   color: var(--second-them);
   font-size: 30px;
   margin-top: 20px;
   margin-left: 30px; 

}
.df{
   font-family: Georgia, 'Times New Roman', Times, serif;
position: relative;
left:590px;
top:-190px;
font-size: 30px;
font-style: italic;
font-weight: normal;
background-color:#07bfb9;
border: 1px,solid,#1CD8D2;
box-sizing: border-box;
border-left-width:10px ;
padding-left: 2.5px;
 }
 #Skills{
   font-size: 30px;
   text-indent: 800px;
   margin-bottom: 30px;
 }

 .lin3{
   width:100%;
   height: 20px;
   position: relative;
   }
   .lin3::after , .lin3::before{
      content: '';
      position: absolute;
      height: 0.4px;
      background-color: #1CD8D2;
      margin: auto;
      width: 100%;
      height: 10%;
   }
   .lin3::after{
      top: -44px;
   right: 0;
      width: 23%;
   } 
   .lin3::before{
      top: -44px;
      left: 0px;
      width: 62%;
   }

.cursor-dot{
   width:5px;
   height: 5px;
   background-color:  #1CD8D2;

}
.cursor-outline{
   width:30px;
   height: 30px;
   border: 2px ,solid,hsla(0, 0%, 100%, 0.5);
   background-color: #1CD8D2 ;
}
.cursor-dot,.cursor-outline{
   position: fixed;
   top:0;
   left: 0;
   transform: translate(-50%,-50%);
   border-radius: 50%;
   z-index: 1;
   pointer-events: none;
}
 
::selection{
 color: black;
 background-color: #1CD8D2;
}
::-moz-selection{
   color: black;
   background-color:  #1CD8D2;

}
.lin{
width:99%;
height: 20px;
position: relative;
}
.lin::after{
   content: '';
   position: absolute;
   height: 0.4px;
   background-color: #1CD8D2;
   width: 70%;
   height: 10%;
   top: -44px;
   left: 366px;
}

#Contact{
   text-indent: 320px;
   font-size:30px;
   margin-top: 200px;
   margin-left: 30px; 
   margin-bottom: 500px;
}
.lin2{
   width:48%;
   height: 20px;
   position: relative;
   }
   .lin2::after , .lin2::before{
      content: '';
      position: absolute;
      height: 0.4px;
      background-color: #1CD8D2;
      margin: auto;
      width: 100%;
      height: 10%;
   }
   .lin2::after{
      top: -44px;
      left: 630px;
   } 
   .lin2::before{
      top: -44px;
      right: 285px;
   }
 
   .em{
      position: relative;
 height: 40px;
 width:40px;
 top:02px;
 left: -3px;
 border-radius: 50%;
   }

 .end{
  position: relative;
 
  top: 44px;
  text-indent: 94px;

 } 
  
  .icons{
position: relative;
cursor: pointer;
 top:-323px;
 left:370px;

 }

 .pg{
justify-content: space-between;
display: flex;
 text-indent: 100px;
margin-right: 100px;

 }
 .outer{
   height:160px;
   width:160px;
   border-radius: 50%;

   padding: 20px;
margin-left: 27px;
margin-top: 16px;

 }
 .inner{

 margin-top: 1px;
   margin-left: 2.7px;
   height:120px;
   width:120px;
   border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;

 }

 #NUmberC{
   font-size: 42px;
font-weight: bold;
   border-radius:50% ;
   color: #1CD8D2;
   position: relative;
   z-index: 12;
   top: -288px;
   left: 31px;
   width: 12px;

 }

 svg{
   top:-146px;
   position: relative;
 }
 .csvg{
   position: relative;
   left:-28px;
 }
 #NUmberjs{
   font-size: 42px;
font-weight: bold;
   border-radius:50% ;
   color: #1CD8D2;
   position: relative;
 
   top: -555.9px;
   left: 290px;
   width: 12px;

 }
.cjs{
 stroke: url(#GradientColor);
fill: black;
border-radius: 50%;
 stroke-width: 20px;
 animation:  anima 2s linear forwards;
 stroke-dashoffset:560px;
 stroke-dasharray:560px;

 }
 
 .jssvg{
   position: relative;
   left:230px;
   top: -415px;
 }


 #NUmberpy{
   font-size: 42px;
font-weight: bold;
   border-radius:50% ;
   color: #1CD8D2;
   position: relative;
 
   top: -825px;
   left: 590px;
   width: 12px;

 }
.cpy{
 stroke: url(#GradientColor);
fill: black;
border-radius: 50%;
 stroke-width: 20px;
 animation:  animat 2s linear forwards;
 stroke-dashoffset:224px;
 stroke-dasharray:560px;

 }
 
 .pysvg{
   position: relative;
   left:530px;
   top: -684px;
 }
 #NUmberht{
   font-size: 42px;
font-weight: bold;
   border-radius:50% ;
   color: #1CD8D2;
   position: relative;
 
   top: -1091px;
   left: 958px;
   width: 12px;

 }
.cht{
 stroke: url(#GradientColor);
fill: black;
border-radius: 50%;
 stroke-width: 20px;
 animation:  animati 2s linear forwards;
 stroke-dashoffset:112px;
 stroke-dasharray:560px;

 }
 
 .htsvg{
   position: relative;
   left:900px;
   top: -951px;
 }
 .cc {
   stroke: url(#GradientColor);
   fill: black;
   border-radius: 50%;
   stroke-width: 20px;
   animation: anim 2s linear forwards;
   stroke-dashoffset: 560px;
   stroke-dasharray: 560px;
   
}



@keyframes anim {
   100% {
       stroke-dashoffset: 112px;
   }
}

@keyframes anima{
   100%{
      stroke-dashoffset:280px ;
   }
}
.Soft{
   margin-top: 100px;
   text-indent: calc(35%);
   font-size: 40px;
}

.lin4{
   width:100%;
   height: 20px;
   position: relative;
   }
   .lin4::after , .lin4::before{
      content: '';
      position: absolute;
      height: 0.4px;
      background-color: #1CD8D2;
      margin: auto;
      width: 100%;
      height: 10%;
   }
   .lin4::after{
      top: -32px;
right: 0;
      width: 47%;
   } 
   .lin4::before{
      top: -32px;
    
      width: 34%;
   }
.abili{
   text-indent: 70px;
   font-size: 24px;
   display: flex;
   align-items: center;
   margin-top: 20px;

}
.abilit1{
   text-indent: 50px;
   font-size: 24px;
   display: flex;
   align-items: center;
   margin-top: 30px;
   margin-right: 10x;

}
 
.dot{
   font-size: 50px;
}

.rotate {
   transition: transform 0.9s;
   transform: rotate(360deg);
}
@media print {
   * {
       display: none;
   }

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 530px) {
   nav ul li{
      display:inline;
      margin: 2px 22px;
      list-style: none;
      flex: 1;
  
   }
   nav ul li a{
      font-size: 42px;
   }
   .logo {
      margin-right:30px ;
      font-size: 40px;
      }
   
   
}

/* Small devices (portrait tablets and large phones, 800px and up) 
@media only screen and (min-width: 600px) {}
/* Medium devices (landscape tablets, 768px and up) 
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) 
@media only screen and (min-width: 992px) {...}
 */

#instagram,#mail,#facebook,#git{
   padding: 10px;
}