body{
   background-color: #0d1117;
   height: 800px;
  
}
h1,h2,h3,h4,h5,h6 {
  color: white;
  font-family: 'Arial',Georgia;
  
}
p{
  color: white;
}
h5{
  position: relative;
  top: 5px;
  left: 5px;
}
h2{
  position: relative;
  top: 20px;
  
}
h6{
  position: absolute;
  top:180px;
  font-family: 'Arial',Georgia;
  font-size: 12px;
}



img{
    width: 200px; /* Adjust the width as needed */
    height: 200px; /* Adjust the height as needed */
    overflow: hidden;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
}
 img {
    width: 10%; 
    height: auto; 
}
img{
  position: absolute;
  top: 15px;
  right: 115px;
}
b{
  color: white;
  font-size: 17px;
  position: absolute;
  top: 25px;
  right: 290px;
}
p{
  color: white;
  font-size: 15px;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono',Georgia;
  position: absolute;
  top: 980px;
  right: 5px;
}
strong{
  color: white;
  font-family: 'IBM Plex Mono',Georgia;
  font-size: 20px;
  position: absolute;
  top: 480px;
  right: 70px;
}
#download{
  color: white;
  text-decoration: none;
}
#one{
   color: white;
   font-family: 'IBM Plex Mono',Georgia;
   font-size: 15px;
   position: absolute;
   top: 520px;
   left: 10px;
}
li{
  color: white;
  font-family: 'IBM Plex Mono',Georgia;
  font-size: 12px;
  position: relative;
  top: 545px;
  left: 12px;
}
h4{
    color: lightblue;
    font-size: 25px;
    position: absolute;
    top: 164px;
    left: 92px;
    overflow: hidden; /* Ensures the text is hidden initially */
    border-right: .15em solid black; /* Creates the cursor effect */
    white-space: nowrap; /* Prevents the text from wrapping */
    margin: 0 auto; /* Centers the text */
    letter-spacing: .05em; /* Adds some spacing between the letters */
    animation:
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: black; }
}
audio {
    width: 100%;
    max-width: 300px;
    margin: 20px 0;
    position: absolute;
    top: 660px;
    left: 45px;
}
 .image-2{
        position: absolute;
        top: 70px;
        right: 70px;
        width: 350px; /* Set the width */
        height: 200px;
        overflow: hidden;
        border-radius: 5%;/* Set the height * /* Optional border */
        position: absolute;
        bottom: 20px; /* Adjust the vertical position */
        right: 20px; /* Adjust the horizontal position */
    }
    .para1{
       color: white;
       font-size: 17px;
       text-transform: uppercase;
       font-family: 'IBM Plex Mono',Georgia;
       position: absolute;
       top: 280px;
       right: 5px;
    }
  .custom-highlight {
        background-color: lightblue;
 }

    #home2{
      color: white;
      text-decoration: none;
      position: absolute;
      top: 27px;
      right: 31%;
    }
    #contact2{
      color:white;
      text-decoration: none;
      position: absolute;
      top: 27px;
      right: 15.5%;
    }
    #project2{
      color:white;
      text-decoration: none;
      position: absolute;
      top: 27px;
      right: 2%;
      
    }
    #music{
      color: white;
      position: absolute;
      top: 640px;
      right: 95px;
    }
   #home3{
       color: white;
      text-decoration: none;
      position: absolute;
      top: 27px;
      right: 28%;
       }
    #about3{
      color: white;
      text-decoration: none;
      position: absolute;
      top: 27px;
      right: 16%;
    }
    #project3{
      color:white;
      text-decoration: none;
      position: absolute;
      top: 27px;
      right: 2%;
    }
    #h1{
      color: white;
      position: absolute;
      top: 15px;
      right: 275px;
    }
    #p1{
      color: white;
      position: absolute;
      top: 68px;
    }
    #gmail{
      color: white;
      font-size: 17px;
      position: absolute;
      top: 140px;
      left: 65px;
    }
    .image-3{
      position: absolute;
      top: 170px;
      left: 7px;
      height: 60px;
      width: 60px;
      
    }
    #insta{
       color: white;
       text-decoration: none;
       position: absolute;
       top: 190px;
       left: 64px;
    }
    .gmailPng{
       position: absolute;
       top: 130px;
       left: 18px;
    }
    
  #count{
    color: white;
    height: 3%;
    position: absolute;
    top: 3.2%;
    right: 7%;
  }
   .box{
       color: white;
       height: 190px;
       width: 170px;
       border: 2px solid;
       border-radius: 20px;
       position: absolute;
       top: 16%;
       left: 4%;
       background-color: white;
     }
     .box1{
       color: white;
       height: 190px;
       width: 170px;
       border: 2px solid;
       border-radius: 20px;
       position: absolute;
       top: 16%;
       right: 4%;
       background-color: white;
     }
     #file_download{
       color: white;
       text-decoration: none;
       position: absolute;
       top: 43%;
       right: 12.3%;
     }
     #key_download{
       color: white;
       text-decoration: none;
       position: absolute;
       top: 87%;
       left: 16%;
     }
     #load_download{
       color: white;
       text-decoration: none;
       position: absolute;
       top: 87%;
       right: 16%;
     }
     .keylogger_image{
       position: absolute;
       top: 59.5%;
       left: 3%;
       height: 200px;
       width: 180px;
       overflow: hidden;
       border-radius: 50px;
     }
     #home1{
      text-decoration: none;
      color: white;
      position: absolute;
      top: 27px;
      right: 31%;
     }
     #about1{
       color: white;
       text-decoration: none;
       position: absolute;
       top: 27px;
       right: 18%;
     }
     #contact1{
       color: white;
       text-decoration: none;
       position: absolute;
       top: 27px;
       right: 2%;
     }

.container {
    position: relative;
    right: 32%;
}

.float-animation {
    width: 120px; /* Adjust as needed */
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(580px);
    }
    50% {
        transform: translateY(560px);
    }
    100% {
        transform: translateY(580px);
    }
}
.container_1{
    position: relative;
    left: 20%;
}

.float-animation_1{
    width: 120px; /* Adjust as needed */
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(550px);
    }
    50% {
        transform: translateY(530px);
    }
    100% {
        transform: translateY(550px);
    }
}