*{
   
  padding:0px;
  margin:0px;
  box-sizing:border-box;
}


.body_id{ 
  
height:100%;
width:100%;
}


.containergrid{
 
 width:100%;
 height:100%;
 display:grid;
 grid-template-areas: 
   "header header header header"
   "mainsection mainsection mainsection skillscontainer"
   "project1 project1  project1  referencecontainer"  
   "footer footer footer footer";
 grid-template-columns: repeat(4 1fr);
 grid-template-rows: 0.15fr 1.5fr 1.3fr 0.1fr; 
 grid-gap:10px;
 background-image:url(images/coverbackground.jpg);
 background-size: cover;
 /*overflow: hidden; */
}
 
.header{

      grid-area: header;
      background-color:#1c3b7a;
      position:sticky;
      top:0px;
      left:0px;
      z-index:1; 

  } 

.mainsection{
        grid-area: mainsection;
     /*   background-color: #7adbec; */
        padding: 10px;
        margin: 10px;
        
        box-shadow: 7px 7px 10px 10px rgb(189, 189, 189);
        /* overflow: hidden; */
} 
 

.skillscontainer{
 
  background: rgba(255, 253, 253,0.7);
  grid-area: skillscontainer;
  padding: 10px;
  margin: 19px 10px 10px 10px;     
  box-shadow: 7px 7px 10px 10px rgb(189, 189, 189);
}

 


.referencecontainer{

/*   background-color: rgb(231, 233, 149);*/
  grid-area:referencecontainer;
  padding: 10px; 
  margin: 10px; 
  box-shadow: 7px 7px 10px 10px rgb(189, 189, 189);
  background-image: linear-gradient(to bottom right,rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.5));
}


.project1{

      /*  background-color:rgb(93, 129, 93); */
        background-image: linear-gradient(to bottom right,  rgba(221, 223, 221,0.7), white, rgb(223, 223, 223), rgba(22, 22, 141, 0.9));
        grid-area: project1;
        margin: 11px;
        grid-gap:10px;
        text-align: center;
        position: relative;   /* to arrange the images */
        box-shadow: 7px 7px 10px 10px rgb(189, 189, 189);
}
 


.footer{

        text-align: center;
        background-color: #111a3c;
        grid-area: footer;

}

.nav-side svg{
  position:absolute;
  top:22px;
  left:11px;
  /*margin:23px 0 0 5px;  */
}   

.navbar h1{

  position: absolute;
  right:2%; 
  top:23%;
  font-size: 2em;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';
  text-shadow: 3px 3px rgba(7, 7, 7, 0.7); 
  color: rgb(255, 218, 7);
 /* transform: translate(-5%, -5%);
  background-clip: text;
  color:transparent;   */ 
  /* text-shadow: rgba(245, 245, 2);  rgba(12, 12, 12, 0.3);  */
     
}


.navbar{

  background-color: #1c3b7a;
  width: 100%;

   /* text-align: center;  height: 100%;  width:100%;*/
  
  }

.main-men{

    text-align: center;
    
    }
      
  .main-men li{
      
      list-style:none;
      display: inline-block;
      margin: 3px 5% 3px 3px;
      line-height: 100%; 
      /*padding: 1.5rem 2.5rem 0rem 1.5rem; */  
   }

 
.main-men li a{

  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman';
  display:block; 
  color: #f2f2f2;
  text-align: center;
  padding:25px;
  text-decoration: none;
  font-size: 27px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 1.5px;
  text-shadow:0 0 5px #3f3e3e, 0 0 25px #3f3e3e, 0 0 50px #3f3e3e, 0 0 200px #3f3e3e; /*0 0 5px #e9879c, 0 0 25px #e9879c, 0 0 50px #e9879c, 0 0 200px #e9879c; */

} 

.main-men li a:hover{

      background-color: #6e788d57;
      color:rgba(255, 255, 255, 0.973);
      font-weight: bold;
      font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman';
      border-radius:11%;

}

.side-nav{

  height:100%;
  width:0px; 
  position:fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  background-color: #111;
  opacity: 0.9;
  padding-top: 23px;
  overflow-x: hidden;     /* Hides the links*/  
  transition: 0.5ms;
  
 } 

 .sociallist{
  list-style: none;
  /*background-color:none; */
  text-align: center;
  margin-top: 30px;
  margin-left: -21px;
   
  
  }
  

  .sociallist li{

    padding-top:3px;
    display:inline-block;
    color: #7adbec;
}

  .sociallist li a{

      margin:5px;
      text-decoration: none;
      font-size: 31px;
      
      
  }
  
 .fa-brands{
       
        color: #7adbec;
         
    }

.line{

     height:20px;
     
   } 
     
.sociallist2{

  list-style:none;
  text-align:center;
  margin-top:5em;
 
}


.sociallist2 li{
  
  padding-right: 10px;
  display:inline-block;
  background-size: cover; 
 /* outline: double 2px whitesmoke; */
  padding-top:3px;

}

.sociallist2 li a{

  text-decoration: none;
  font-size:2em;
  cursor:pointer;
  
}


.sociallist2 .fa-brands{

  color: rgb(30, 91, 171);
}


/*--------------------------- ---------------- */

 #css3{
  
    color: blue;
    
    
}

#js{

    color: rgb(78, 74, 7);
}

  

  .skillsbar li i{
 
    font-size: 35px;
    height: 50px;
    width: 50px;
}
 
  .reference{

        text-align: center;
        font-size: 31px;
        margin: 19px 0px;
        font-family:'Times New Roman'; 

    }


  .referencelinks{
        
    width:98%;  
    margin:7px;
    list-style:none;
    display: block;
      
}

.referencelinks li{

    margin-bottom:3px;
    padding:19px;
    letter-spacing: 1.5px;
    text-align: justify;
    background-color: rgb(159, 185, 172);
    border-radius:3%;
      
}
.referencelinks li a{

  font-size: 1em;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';
}


  .side-nav .close-btn{
      text-decoration: none;
      color: #ac4b4b;
      position:absolute;                 /* the position of the close sign inside side menu*/
      top:0px;
      right: 22px;
      font-size:35px;
      margin-left: 51px;
  
      }

  .sidelist{

      list-style: none;
      margin-left: 5px;
      margin-top: 12px;
      margin-bottom:50px;
      }



    .sidelist  li{
      
        display: block;
          
        }



  .sidelist li a {

              text-decoration: none;
              font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
              font-size: 25px;
              display: block;
              padding: 15px 10px 10px 31px;
              color: cornsilk;
              transition:0.5s;

      } 

 .sidelist li a i{
      
       float: left;
       padding-right:35px;
         
      }

/*.mainsection Article */
 
 
.img{

   height: 100px;
   width: 100px;
   border-radius:50%;
   margin-top:31px;
  /* float: left; */
}




/*  Main Article */


.mainarticle{
    
    height:100%;
    width:100%;
    background-image: linear-gradient(to left bottom, rgba(12, 128, 128, 0.3),rgba(223, 223, 223, 0.8),rgba(1, 129, 129,0.7)); 
    padding:10px;
    text-align: center;  
     
   /* border: double 3px black; */
    
}   

 .mainparagrph {

    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    letter-spacing:1.5px;
    padding:31px;
    font-size:1.3em;
 /*text-align: justify; */

 }
 

 .mainparagrph em::before{

  content:"HI";
  background-color:red;
  color:whitesmoke;
  font-size: 1.7rem;
  letter-spacing:3px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  outline: double 2px black;

 }

 .mainparagrph em{

  font-family:libre bodoni'regular';
  font-size: 1.7rem;
  font-style: normal;
  letter-spacing:1.5px;
  color:rgba(32, 48, 134, 0.9);
  font-weight: bold;
  margin-top:15px;
  text-shadow: 1px 1px black;
 
}
    
.mainheader{

      color:linear-gradient (to top left, black, white,black); 
      font-size: 1.5em;
      letter-spacing:1px;
      font-weight: bold;
      text-shadow: 2px 2px white;
      margin-top: 17px;
      margin-bottom:7px;
   
}

.requestbtn{

   width:7em;
   height:1.5em;
   background-color:rgb(54, 52, 52);
   font-weight: bolder;
   font-size:1.5em;
   font-family: 'Times New Roman', Times;
   margin-top: 31px; 
   border-radius:7px;
   margin-left:55%;
 /*  float:right; */  
   
}

 
.requestbtn a {
 
     text-decoration: none;
     color:antiquewhite;
}

.requestbtn:hover{

    background-color: darkcyan;
}

  /* ------ project images   -----*/
 

.projectimages1{ /*, .projectimages2, .projectimages3{ */

height:75%;
width:50%;
margin:10px;

}
.projectimages1{

  position: absolute;
  top:14%;
  left:25%;
  height:55%;
  width:45%;
  transform: translate(15px,15px);
  /* outline: double 1rem  rgb(1 1 1);*/
   
  }



.projectimages2{ 

  position: absolute;
  top:24%;
  left:23%;
  height:47%;
  width:23%;
  transform: translate(15px,15px);
/* outline: double 1rem  rgb(1 1 1);*/
 
} 


.projectimages3{ 
  position: absolute;
  top:37%;
  left:19%;
  height:34%;
  width:13%;
  transform: translate(15px,15px);
  /* outline: double 1rem  rgb(1 1 1);*/
}  





.project1 h3{

   font-family:'Times New Roman';
   font-weight: bold;
   font-size: 1.7em;
   color: rgb(17, 17, 17);
   margin-top:15px;

}



.software-icon{

  height:30px;
  width: 50px;
  margin-top:15px;
 
 
   
}
.project1 p {

  position: absolute;
  top:77%;
  left:11%;
  letter-spacing:1px;
  font-family:'Times New Roman';
  font-size: 1.5rem;
  width:80%;
  outline: solid 3px black;
  
}

.project1link h3{

  position:absolute;
  top:89%;
  right:5%;
  font-size:1em;
  font-family:Arial, Helvetica;
  text-decoration:none;
  font-weight: bolder;
  outline: double 3px black;
  

}

.project1link h3:hover{

  font-family:'Times New Roman';
  background-color: rgb(77, 77, 77);
  color: rgb(255, 247, 247);
  font-family:Arial, Helvetica;
 
}

/*------  porject part-------*/

.footer p{

   margin:1em;
   color:#f2f2f2;
   font-family:Arial;
   font-weight:normal;
   letter-spacing:1px;
   font-size:12px;
   margin-top:22px;

   
}
.footer a{

  text-decoration: none;
  padding-left:1em;
  font-size:1em;
  font-family: Arial;
  color: #f2f2f2;
}


.footer a fa-solid fa-envelope{

  color: #f2f2f2;

}
 

  
/*----------    animated bars --------------- */


.skillscontainer{

  margin:11px;
  
          /* outline: 5px solid #ac4b4b; */
 
}

.skilllist{
  margin-top: 15px;
  text-align: center;
}


.skilllist li{
 
   list-style: none;
   display:inline-block;
    
}

.skillsimage{

  height:57px;
  width:57px;
  margin-bottom:-11px;    
  
}

.skillstitle{

  text-align: center;  
  font-weight: bold;
  /*display: blocks;*/
  font-family:'Philosopher';
  font-size: 2.5em;
  letter-spacing: 3px;
  /*margin: 15px 0px; text-decoration: underline; */
}

.skillsbar{

  list-style:none;

  
}
 

.skillsbar li{

  margin-top:1.3em;
  padding-bottom:1em;
  
  } 



.html{
  height:3.5em;
  width:3.5em;
}   
   
.css3{
  
  height:3.5em;
  width:3.3em;
  padding-left: 0.5em;
 
}  

.js{
  
  height:3.5em;
  width:3.8em;
}  

.jav{
  
  height:3.3em;
  width:3.3em;
  border-radius:50%;
  box-shadow: 1px 1px 11px 1px rgb(153, 138, 138);
  margin-left:7px;
  

}  



.bar{

  background: rgb(17, 17, 43);
  display: block;
  height: 21px;
  border: solid 1px green;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 7px 7px 10px #746767d8;
  

}

.bar span{
 
  height: 19px;
  float: left;
  background-color:white;
 
}

.html5{

  width: 73%;
  animation: html5 3s;
   
}

.css{

  width: 83%;
  animation: css 3s;
}

.javascript{

  width: 73%;
  animation: javascript 3s;
}

.java{

  width: 53%;
  animation: java 3s;
}




/*----- Animation Part ----------  */
@keyframes html5 {
  
  0%{
      width:0px;
  }
  100%{
      width:73%;
  }
  
}

@keyframes css{
  
  0%{
      width:0px;
  }
  100%{
      width:83%;
  }
  
}

@keyframes javascript {
  
  0%{
      width:0px;
  }
  100%{
      width:73%;
  }
  
}

@keyframes java {
  
  0%{
      width:0px;
  }
  100%{
      width:53%;
  }
  
}

  






      /*--------------Media Queries-----------*/
     



@media (max-width:1400px){

  .main-men li{ margin-right: 2%;}
  .main-men { margin-left: -22%;}
  
}


@media (max-width:1200px){

  .main-men {display:none;}
  .project1 p {font-size: 1em; position:absolute; left:7%;}
  .requestbtn{margin:0px;}
  .containergrid{
    grid-template-columns: 1fr;
    grid-template-rows: 0.15fr 1.3fr 1.2fr 1fr 1fr 0.1fr;
    grid-template-areas: 
    "header"
    "mainsection"
    "skillscontainer"
    "referencecontainer"
    "project1"
    "footer";      
    }
    
}

 
@media (max-width:819px){
       
  .main-men {display:none;}
  .project1 p {font-size: 1em; position:absolute; left:7%;}
  .containergrid{
     grid-template-areas: 
     "header"
     "mainsection"
     "skillscontainer"
     "referencecontainer"
     "project1"
     "footer"; 

      grid-template-columns: 1fr;
      grid-template-rows: 0.15fr 1.3fr 1.2fr 1fr 1fr 0.1fr;     
     }

     
     
 }

 
 @media (max-width:550px){
  
  .navbar h1{display:none;}
  .project1 p {font-size: 1em; position:absolute; left:7%;}
  .skillsbar li{margin-top:2em;}
  .containergrid{
    grid-template-areas: 
    "header"
    "mainsection"
   "skillscontainer"
   "referencecontainer"
    "project1"
    "footer"; 
     grid-template-columns: 1fr;
     grid-template-rows: 0.15fr 1.3fr 1.2fr 1fr 1fr 0.1fr;     
    }
    
}