*{
    padding: 0;
    border:0;
}
body{
    background-color: black;
    
   
}
.profilepic{
  width: 200px;
  height: 200px;
  margin-top: 10px;
  border: 2px solid white;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
   transition: transform 1s ease-in-out; 
  border-radius: 50%;
  background-color: rgba(0, 251, 255, 0.528);
}
.part2 .name{
     /* margin-top: 5px;  */
  /* margin-left: 90px; */
   text-transform: uppercase;
 font-size: 8vw;
 /* line-height: 1em; */
 animation: animate 10s ease-in-out infinite;
 background: -webkit-repeating-linear-gradient(
     -70deg,
     #AF1490,
     #e63615, #F0E420, #b8db1b, #23ae22, #13169b,  #FF9900, #599F00,  #3E43E5,red,green,skyblue
     
 );
 background-size: 500%;
  -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent;
 /* text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25); */
 position: relative;
 font-weight: bolder;
}
@keyframes animate {
 0% {
     background-position: 0 0;
 }
 25% {
     background-position: 100% 0;
 }
 50% {
     background-position: 100% 100%;
 }
 75% {
     background-position: 0% 100%;
 }
 100% {
     background-position: 0% 0%;
 }
}
.part2{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content:space-between;
}
.part2 .job{
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 32px;
    color:red;
    letter-spacing: 4px;
    margin-top: 40px;
}
.part2 .web,
.part2 .app,
.part2 .cyber {
  font-size: 22px;
  text-transform: uppercase;
  font-weight: bold;
  color: azure;
  letter-spacing: 4px;
  margin-top: 20px;
  margin-right: 20px; /* Add margin-right to create a gap */
}
  .main{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content:space-between;
   

 
  }
  /* .part2{
    margin-top: 10px;
  } */
  .part2 .job:hover{
   color-scheme: red 2s;
    font-size: 35px;
  }
 
     .part2 .job{
        animation: blinking 4s infinite;
     }
     @keyframes blinking {
        0% {
          color: #ff3d50;
          border: 5px solid #871924;
        }
        
        50% {
          color: #55d66b;
          border: 5px solid #126620;
        } 
        100% {
          color: #222291;
          border: 5px solid #6565f2;
        }
      }
      #head{
        color:yellowgreen;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 5px;
      }
       .others{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 20px;
      } 

      #song{
         display: none;
      }
      .btn{
         margin-top: 30px;
        
      
      }
      .btn button {
        margin-right: 40px;
        border-radius: 40px;
        background-color: #2f95de;
        color: #c8dcda;
        font-weight: bold;
        text-transform: uppercase;
     
    }
       .btn button:hover{
        background-color: white;
        color: #3b8ff3;
        width: 200px;
        transition: 1s;
        cursor: pointer;
       }
       .mainskill{
        margin-top: 10px;
       }
       .part2 .name1{
        margin-top: 10px;
       }
       /* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #106288;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.modal-content p{
   font-weight: bolder;
   font-size: 22px;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
li:hover{
  cursor: pointer;

}
li{
  list-style: none;
  padding: 2px 0;
  color:rgb(13, 20, 22);
  font-weight: bolder;
  font-size: 18px;
}

        @media (max-width:600px) {
            #head{
             font-size: 15px;
             letter-spacing: 3px;
             margin-top: 50px;
             color:rgb(58, 163, 228)
          
            }
            .part1 .profilepic{
                width:300px;
                height:300px;
                margin-top: 60px;
                border:2px solid rgb(56, 182, 232)
            }
              .part2 .name1{
                 margin-top:40px
              }
               .part2 .name{
                 font-size: 11vw;
               }
               .mainskill {
                margin-top: 30px;
            }
            .part2 .job{
              font-weight: bold;
              text-transform: uppercase;
              font-size: 25px;
            
             
              letter-spacing: 4px;
            
          }
           .part2 .mainskill{
              margin-top: 20px;
           }
              
           .btn button {
            margin-right: 12px;
            font-size: 8px;
            border-radius: 40px;
            background-color: #2f95de;
            color: #c8dcda;
            font-weight: bold;
            text-transform: uppercase;
             
        }
          
        }