/* body styling*/
body {
    font-family: Arial, sans-serif; 
    margin: 0;
    padding: 0;
    color: #fff;
    background: linear-gradient(to top right,#020080 0%,#00031d 13%,#020080 57%,#020080 77%,#00031d 100%); /*linear glarient clolor to thr body*/
    animation: bgcolor 6s infinite;
    transition: bgcolor ease;
  } 
  /* Header Styling */
  header {
    color: #fff;
    padding: 20px;
    border-radius: 20px;
    border-bottom: 5px solid #00031d;
  }
  header h1 {
    text-align: center;
    margin: 0;
  }
  h1:hover{ /*on hover change the color*/
    color:  rgb(197, 197, 0);
    transition: color 0.3s ease;
  }
  nav ul {                    /* aligning nav to center*/
    list-style-type: none;
    padding: 0;
    text-align: center;
  }
   nav ul li {
    display: inline;
    margin-right: 10px;
  }
  
  a {                           /* link styling*/
   color: #fff;
    text-decoration: none;
  }
  nav a:hover ,footer a:hover{   /* links on mouse hover*/
    color: red;
    text-decoration: wavy;
  }
  #name{  /*changing the the text text size and color*/
    font-size: 25px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-style: oblique;
    animation: nme 3s infinite;
  }
  @keyframes nme{       /* animation for the name to blink every second */
    0%{color: #fff;}
    50%{color:aqua}
    100%{color: #fff;}
  }
  /* Content Styling */
  #content {
    margin-left: 20px;
  }
  p:hover{ /* to change the color of the paragraph on hover*/ 
    color: aqua;
    transition: color 0.3s ease;
  }
  .highlight a{ /*styling a sentance*/
    color: #fff;
    animation: ht 16s infinite;
  }
  @keyframes ht{  /*animating to change color and move left to right*/
    26%{color: aqua;}
    50%{padding-left: 40%; color: #fff;}
    76%{color: red;}
    100%{left: 0; color: #FFFFFF;}
  }
  
  .profile-picture {  /* profile image stylning*/
    border-radius: 50%;
    box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.3);
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 30px 0  5px 10px;
    padding: 0;
    margin-right: 8px;
    float: right;
  }
  .profile-picture:hover{ /* changing image size and adding shadow effect*/
    height: 203px;
    width: 203px;
    box-shadow: -5px 5px 20px 3px aqua;
    transition: height  0.3s ease;
    transition: width  0.3s ease;
  }
  /* Text Formatting */
  h2 {
    color: rgb(197, 197, 0);
    font-size: 25px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-weight: bolder;
  }
  p {                          /*paragraph styling */
    line-height: 1.5;
    margin-left: 10px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  /* Footer Styling */
  footer {
    color: #fff;
    padding: 10px;
    text-align: center;
    background-color: #0404053a;
    border-top: 5px solid black;
    border-left: 7px solid black; 
    border-right: 7px  solid black;
    border-radius: 20px;
  }
  ::selection { /* changing the selection style*/
    color: #000;
    background-color: #00e5ec;
    font-style: italic;
    }  
    /* styling the list-items*/
    .skills li { 
      list-style-type: circle;    
      padding: 5px 10px;
      margin-left: 40px;
      border-radius: 3px;
      width: 210px;
      transition: background-color 0.3s ease;
      font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      font-weight: bold;
    }
    .education li{
      list-style-type: square; /* changing the list style to square*/
      margin-left: 20px;
      padding: 10px 10px;
      border-radius: 10px;
      width: 590px;
      transition: background-color 0.3s ease;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-weight: bold;
    }
    .projects li{
      list-style-type:none;
      padding: 10px 10px;
      padding-left: none;
      margin-left: -18px;
      border-radius: 10px;
      width: 320px;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      transition: background-color 0.3s ease;
      font-weight: bold;
    }
    .projects li::before{
      content: "~>";          /* adding a coustom list style*/
      padding-right: 20px
    }
     /*on hover changing color and adding a background color*/
    .skills li:hover, .education li:hover,.projects li:hover { 
      background-color: #4e4e4e;
      transition: background-color 0.3s ease;
      color:  rgba(0, 236, 253, 0.747);
      border-width: 20px;
    }
   footer img:hover{ /*changing the size  and background color of the image*/
    height:52px ;
    width: 52px;
    background-color: #4e4e4e;
    border-radius:15px ;
    transition: hover 2s ease;
   }
   
   /* @keyframes bgcolor {
    0%{}
    20%{background: linear-gradient(to top right, #00031d 0%,#020080 13%,#00031d 57%,#020080 77%,#020080 100%);}
    45%{background: linear-gradient(to top right,#020080  0%,#00031d 13%,#020080 57%,#00031d 77%,#020080 100%);}
    65%{background: linear-gradient(to top right,#020080 0%,#020080 13%,#00031d 57%,#020080 77%,#00031d 100%);}
    80%{background: linear-gradient(to top right,#00031d 0%,#020080 13%,#020080 57%,#00031d 77%,#020080 100%);}
    100%{background: linear-gradient(to top right,#020080 0%,#00031d 13%,#020080 57%,#020080 77%,#00031d 100%);}
  } */