*{

   text-decoration: none;
   margin: 0px;
   padding: 0px;

}


body{

   background-color: 

}

header{

   width: 100%; 
   height: 100px;

}

header .leftmenu{

   font-family: 'montserrat', sans-serif;
   font-weight: bold;
   color: cyan;
   letter-spacing: -1px;
   text-shadow: 3px 2px #f04;
   background-color: black;
   position: fixed;
   
}

#logo{

   display: inline-block;
   float: left;
   margin: 28px 10px;

}



#one{

   font-size: 26px;
   display: inline-block;
   margin-top: 15px;

}

#two{

   font-size: 15.5px;
   display: inline-block;

}

.rightmenu{
  
   position: fixed;
   background-color: #111;
   width: 100%;
   height: 100px;

}

.rightmenu ul{

   padding: 10px 0px;
   text-align: center;

}

.rightmenu ul li{

   font-family: "Playfair Display", serif;
   display: inline-block;
   font-size: 23px;
   list-style: none;
   color: cyan; 
   font-weight: bold;
   padding: 5px 10px;

}

.rightmenu ul li a{

   color: cyan;
   display: block;

}

.rightmenu ul li a:hover{

   color: cyan;
   border-bottom: 4px solid #f04;
   text-shadow: 3px 2px #f04;

}

.bgimage{

   width: 100%;
   height: 450px;
   background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(coorg2.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   margin-top: 100px;
   
}

.bgimage h4{

   font-size: 16px;
   text-align: center;
   color: cyan;
   font-family: "Playfair Display", serif;
   text-shadow: 3px 2px #f04;
   padding-top: 130px;
   
}

.bgimage h1{

   font-size: 20px;
   text-align: center;
   color: cyan;
   font-family: "Playfair Display", serif;
   text-shadow: 3px 2px #f04;
   
}

.bgimage h6{
   
   font-size: 14px;
   text-align: center;
   color: cyan;
   font-family: "Playfair Display", serif;
   text-shadow: 3px 2px #f04;
   text-transform: uppercase;
   animation: typing-text 2s infinite;
   overflow: hidden;
   white-space: nowrap;

}

@keyframes typing-text {

   0%{
      color: black;
   }
   30%{
      letter-spacing: 6px;
   }
   85%{
      letter-spacing: 3px;
   }
}

#btnone{

   background-color: transparent;
   border-radius: 20px;
   border-color: cyan;
   color: cyan;
   font-family: "Istok Web", sans-serif;
   font-size: 12px;
   letter-spacing: 8px;
   margin-top: 20px;
   padding: 9px;
   text-transform: uppercase;
   transition: box-shadow 0.3s linear 0.1s; 
   text-shadow: 3px 2px #f04;

}

#btnone:hover {

   background-color: cyan;
   transition: all 0.2s ease-in;
   color: black; 
   cursor: pointer;
   box-shadow: 0 20px 20px 0 #000000; 
   text-shadow: none;

}

.footer{
      
   width: 100%;
   height: 200px;
   margin-top: 30px;
   background-color: black; 

}

.text1{

   color: #f04;
   font-size: 30px;
   text-transform: uppercase;
   font-family: "Georgia", Serif;
   letter-spacing: 1px;
   text-shadow: 0px 3px 3px cyan;
   text-align: center; 
   text-decoration: underline;

}

.text2{

   color: cyan;
   font-size: 15px;
   text-transform: uppercase;
   margin: 0px 15px;
   font-family:"Playfair Display", serif;

}

.text3{

   color: #f04;
   font-size: 12px;
   margin: 15px;
   letter-spacing: 1px;
   font-family: "Georgia", serif; 

}

.technologies{

   width: 80%;
   margin-top: 30px;
   margin-left: auto;
   margin-right: auto; 

}

#heading{

   color: #f04;
   font-size: 30px;
   font-family:Georgia, Serif;
   text-shadow: 0px 3px 3px #494949;
   margin-left: 20px;
   margin-top: 30px; 
   letter-spacing: 1px;
   text-align: center;
   text-decoration: underline;

}

.title{

   color: #ff0047;
   font-size: 14px;
   font-family:"Georgia", serif; 
   text-align: center;

}

.icon{

   box-shadow: 5px 5px 10px grey;
   margin: 30px 0px;

}

.virat{

   height: 250px;
   width: 250px;
   padding: 20px;

}

.technologies p{

   padding: 8px; 
   text-align: justify;
}

.tech{
    
   text-align: center;
   margin: 5px 0px;
   color: darkgreen;

}

.work{

   margin-top: 80px;
   background-color: black;
   height: 400px;
   text-align: center;

}

.work h2{

   font-size: 20px;
   color: #f04;
   font-family:Georgia, Serif;
   text-shadow: 0px 3px 3px cyan;
   margin-top: 50px;
   
}

.work h3{

   margin-top: 50px;
   color: cyan;
   letter-spacing: 2px;
   
}

.connect{

   display: inline;

}

.kohli{

   width: 40px;
   height: 40px;
   margin-top: 60px;
   margin-left: 15px;

}

.work h4{

   margin-top: 30px;
   color: cyan;
   margin-left: 15px;
   text-shadow: 3px 2px #f04;
   animation: typing-text 2s infinite;
   overflow: hidden;
   white-space: nowrap;

}

.main{

   background-color: black;
   width: 100%;
   height: 40px; 

}

.submain{

   margin-left: 30px;
   float: left;
   list-style: none;
   font-family: "Georgia", serif;
   font-size: 20px;
   color: white; 
   font-weight: bold;
   text-decoration: none;
   padding: 5px;
   display: inline-block;
   
}

.submain:hover{

   color: cyan;
   border: 2px solid cyan;
   border-radius: 12px;

}

@media screen and (max-width: 700px){

   .icon{
   width: 90%;
   float: none;
  } 

   .virat{
   height: 250px;
   width: 80%;
   padding: 20px;
  }

}

@media screen and (max-width: 385px){
    
   #one{
   font-size: 30px;
   margin-top: 15px;
  }

   #two{
   font-size: 18px;
  }   
   
}

@media screen and (max-width: 248px){
     
   .work{
   height: 500px;
   }

   #heading{
   font-size: 18px;
   }
   
}

@media screen and (max-width: 342px){
  
   header{
   height: 65px;
  }

   #one{
   font-size: 18px;
   margin-top: 15px;
  }

   #two{
   font-size: 11px;
  }
  
  #logo{
   margin: 10px 5px;
  }

  .rightmenu{
   height: 200px;
  }

   .bgimage{
   margin-top: 200px; 
  }

   .text1{
   font-size: 20px;
   letter-spacing: 2px;
  }

   .text2{
   font-size: 11px;
  }

   .text3{
   font-size: 11px;
   margin: 15px;
  }

  .footer{
   height: 210px;
  }

  .bgimage h1{
   font-size: 16px;
  }

  .bgimage h4{
   font-size: 10px;
   padding-top: 88px;
  }

  .bgimage h6{
   font-size: 8px;
   animation: none;
  }

  #btnone{
   font-size: 9px;
   letter-spacing: 3px; 
  }

  .bgimage{
   height: 350px;
  }

  .work h4{
    animation: none;
    font-size: 11px;
  }

  .work h3{
    font-size: 12px;
  }
}

@media screen and (min-width: 175px) and (max-width: 220px){

  .footer{
   height: 227px;
  }

  .text2{
   font-size: 11px;
  }

  .text3{
   font-size: 10px;
  }

  .technologies p{
    font-size: 12px;
  }
  
}

@media screen and (min-width: 547px){

  .rightmenu{
   line-height: 75px;
  }
}

@media screen and (max-width: 174px){
  
  header .leftmenu{
   height: 80px;
  }

  .text1{
   font-size: 15px; 
  }

  .text2{
   font-size: 9px; 
  }

  .text3{
   font-size: 8px; 
  }

  #heading{
   font-size: 14px;
  }

  .work h2{
   font-size: 14px;
  }

  .work h3{
   font-size: 12px;
  }

  .work h4{
   font-size: 9px;
   animation: none;
  }

  .bgimage h6{
   animation: none;
  }

  .kohli{

  }

  #btnone{
   padding: 5px;
   font-size: 7px;
   letter-spacing: 3px;
  }

  .virat{
   height: 200px;
   width: 75%;
   padding: 10px;
  }

  #one{
   font-size: 10px;
   margin-top: 10px;
  }

   #two{
   font-size: 7px;
  }
  
  #logo{
   margin: 5px 2px;
  }

  .technologies p{
   font-size: 10px;
  }

  .rightmenu ul li{
   font-size: 18px;
  }

  .title{
   font-size: 10px;
  }

}

@media screen and (min-width: 1340px){

  header .leftmenu{
   margin: 0px;
   text-align: left;
   width: 27%;
   height: 80px;
  }

  #logo{
   display: inline-block;
   float: left;
   margin: 20px 20px 10px 60px;
  }

  .rightmenu{
   width: 73%;
   height: 80px;
   float: right;
   margin-left: 363px;
   background-color: rgba(0,0,0,0.6);
   margin-top: -100px;
  }

  .rightmenu ul{
   line-height: 80px;
   padding: 0px;
  }

  .rightmenu ul li{
   margin-left: 100px;
   font-size: 15px;
   margin-right: 20px;
   padding: 0px;
  }

  .bgimage{
   height: 750px;
   margin-top: -100px;
  }

  .bgimage h4{
   font-size: 20px;
   padding-top: 250px;
  }

  .bgimage h1{
   font-size: 50px;
  }

  .bgimage h6{
   font-size: 20px;
   margin-top: 5px;
  }

  @keyframes typing-text {

   0%{
      color: black;
   }
   30%{
      letter-spacing: 13px;
   }
   85%{
      letter-spacing: 8px;
   }
   }

  #btnone{
   font-size: 16px;
  }

  .text1{
   font-size: 40px;
   text-align: left;
   margin-left: 20px;
  }

  .text2{
   font-size: 35px;
  }

  .text3{
   font-size: 23px;
  }

  #heading{
   font-size: 40px;
   text-align: left;
   margin-left: 20px;
  }

  .title{
   font-size: 20px;
  }

  .icon{
   float: left;
   width: 31%;
   margin-left: 10px;
   margin: 25px 0px;
   padding: 10px;
  }

  .technologies p{
   font-size: 15px;
  }

  .virat{
   margin: 12px;
   height: 250px;
   width: 250px;
  }

  .tech{
   margin-top: 10px;
   margin-bottom: 20px; 
  }

  #newline{
   margin-top: 510px;
   margin-left: 5px;
  }

  .anotherline{
   margin-top: 300px;
   margin-left: 5px;
  }

  .work{
   margin-top: 1100px;
  }

  .work h2{
   font-size: 35px;
  }

}

@media screen and (min-width: 1000px) and (max-width: 1340px){

  header .leftmenu{
   margin: 0px;
   text-align: left;
   width: 28%;
   height: 80px;
  }

  #one{
   font-size: 24px;
  }

  #two{
   font-size: 14.5px;
  }

  #logo{
   display: inline-block;
   float: left;
   margin: 10px;
  }

  .rightmenu{
   width: fit-screen;
   height: 80px;
   float: right;
   margin-left: 270px;
   background-color: rgba(0,0,0,0.6);
   margin-top: -100px;
  }

  .rightmenu ul{
   line-height: 80px;
   padding: 0px;
   display: flex;
   margin: 0px 33px;
  }

  .rightmenu ul li{
   margin-left: 83px;
   font-size: 15px;
   margin-right: 20px;
   padding: 0px;
  }

  .bgimage{
   height: 650px;
   margin-top: -100px;
  }

  .bgimage h4{
   font-size: 20px;
   padding-top: 250px;
  }

  .bgimage h1{
   font-size: 50px;
  }

  .bgimage h6{
   font-size: 20px;
   margin-top: 5px;
  }

  @keyframes typing-text {

   0%{
      color: black;
   }
   30%{
      letter-spacing: 13px;
   }
   85%{
      letter-spacing: 8px;
   }
   }

  #btnone{
   font-size: 16px;
  }

  .text1{
   font-size: 30px;
   text-align: left;
   margin-left: 20px;
  }

  .text2{
   font-size: 26px;
  }

  .text3{
   font-size: 22px;
  }

  #heading{
   font-size: 34px;
   text-align: left;
   margin-left: 20px;
  }

  .title{
   font-size: 20px;
  }

  .icon{
   float: left;
   width: 24.5%;
   margin-left: 10px;
   margin: 25px 7px;
   padding: 10px;
  }

  .technologies{
    width: 90%;
  }

  .technologies p{
   font-size: 15px;
  }

  .virat{
   margin: 0px;
   height: 250px;
   width: 195px;
   padding: 5px;
  }

  .tech{
   margin-top: 10px;
   margin-bottom: 20px; 
  }

  #newline{
   margin-top: 510px;
   margin-left: 5px;
  }

  .anotherline{
   margin-top: 300px;
   margin-left: 5px;
  }

  .work{
   margin-top: 1050px;
  }

  .work h2{
   font-size: 35px;
  }

}

@media screen and (min-width: 1058px) and (max-width: 1059px){

  .icon{
   width: 26.5%;
  }
}


@media screen and (min-width: 1070px) and (max-width: 1109px){

  .icon{
   width: 28.5%;
  }
}

@media screen and (min-width: 1110px) and (max-width: 1122px){

  .icon{
   width: 25.5%;
  }
}

@media screen and (min-width: 1060px) and (max-width: 1070px){

  .icon{
   width: 26.5%;
  }
}

@media screen and (min-width: 523px) and (max-width: 750px){
  
  header{
   height: 117px;
  }

  header .leftmenu{
   width: 100%;
  }

  #one{
   font-size: 47px;
  }

  #two{
   font-size: 27.5px;
  }

  #logo{
   display: inline-block;
   float: left;
   padding: 8px;
  }

  .rightmenu{
   width: 100%;
   height: 100px;
   background-color: rgba(0,0,0,0.6);
  }

  .rightmenu ul{
   line-height: 90px;
   padding: 0px;
   margin-left: auto;
   margin-right: auto;
  }

  .rightmenu ul li{
   margin-left: 15px;
   font-size: 18px;
   margin-right: 7px;
   text-align: center;
  }

  .bgimage{
   height: fit-screen;
   margin-top: 0px;
  }

  .bgimage h4{
   font-size: 15px;
   padding-top: 150px;
  }

  .bgimage h1{
   font-size: 30px;
  }

  .bgimage h6{
   font-size: 15px;
   margin-top: 5px;
  }

  @keyframes typing-text {

   0%{
      color: black;
   }
   30%{
      letter-spacing: 9px;
   }
   85%{
      letter-spacing: 5px;
   }
   }

  #btnone{
   font-size: 14px;
  }

  .text1{
   font-size: 30px;
   text-align: left;
   margin-left: 20px;
  }

  .text2{
   font-size: 19px;
  }

  .text3{
   font-size: 15px;
  }

  #heading{
   font-size: 34px;
   text-align: left;
   margin-left: 20px;
  }

  .title{
   font-size: 20px;
  }

  .technologies{
   width: 50%;
  }

  .work{
   margin-top: 100px;
  }

  .work h2{
   font-size: 30px;
  }

}

@media screen and (min-width: 751px) and (max-width: 999px){

  header .leftmenu{
   margin: 0px;
   text-align: left;
   width: 250px;
   height: 80px;
  }

  #one{
   font-size: 19px;
  }

  #two{
   font-size: 11.5px;
  }

  #logo{
   display: inline-block;
   float: left;
   margin: 10px;
   padding-top: 7px;
  }

  .rightmenu{
   width: fit-screen;
   height: 80px;
   float: right;
   margin-left: 225px;
   background-color: rgba(0,0,0,0.6);
   margin-top: -100px;
  }

  .rightmenu ul{
   line-height: 80px;
   padding: 0px;
   display: flex;
   margin-left: auto;
   margin-right: auto;
  }

  .rightmenu ul li{
   margin-left: 40px;
   font-size: 15px;
   margin-right: 20px;
   padding: 0px;
  }

  .bgimage{
   height: 650px;
   margin-top: -100px;
  }

  .bgimage h4{
   font-size: 20px;
   padding-top: 250px;
  }

  .bgimage h1{
   font-size: 50px;
  }

  .bgimage h6{
   font-size: 20px;
   margin-top: 5px;
  }

  @keyframes typing-text {

   0%{
      color: black;
   }
   30%{
      letter-spacing: 13px;
   }
   85%{
      letter-spacing: 8px;
   }
   }

  #btnone{
   font-size: 16px;
  }

  .text1{
   font-size: 30px;
   text-align: left;
   margin-left: 20px;
  }

  .text2{
   font-size: 23px;
  }

  .text3{
   font-size: 17px;
  }

  #heading{
   font-size: 34px;
   text-align: left;
   margin-left: 20px;
  }

  .title{
   font-size: 20px;
  }

  .icon{
   float: left;
   width: 27.5%;
   margin-left: 10px;
   margin: 25px 7px;
   padding: 10px;
  }

  .technologies p{
   font-size: 15px;
  }

  .technologies{
   width: 95%;
  }

  .virat{
   margin: 0px;
   height: 220px;
   width: 195px;
   padding: 5px;
  }

  .tech{
   margin-top: 10px;
   margin-bottom: 20px; 
  }

  #newline{
   margin-top: 510px;
   margin-left: 5px;
  }

  .anotherline{
   margin-top: 300px;
   margin-left: 5px;
  }

  .work{
   margin-top: 1000px;
  }

  .work h2{
   font-size: 35px;
  }

}

@media screen and (min-width: 404px) and (max-width: 523px){

   #one{
   font-size: 37px;
  }

  #two{
   font-size: 21.5px;
  }

}

@media screen and (min-width: 200px) and (max-width: 342px){

  .rightmenu ul{
   padding: 0px;
   margin-left: auto;
   margin-right: auto;
  }

  .rightmenu ul li{
   margin-left: 20px;
   font-size: 27px;
   margin-right: 20px;
   text-align: center;
  }

}

@media screen and (min-width: 190px) and (max-width: 220px){

   #one{
   font-size: 15px;
  }

  #two{
   font-size: 9px;
  }

}

@media screen and (min-width: 150px) and (max-width: 190px){

   #one{
   font-size: 11px;
  }

  #two{
   font-size: 7px;
  }

}

@media screen and (min-width: 863px) and (max-width: 900px){

  .icon{
   width: 26.5%;
  }

}

@media screen and (min-width: 901px) and (max-width: 927px){

  .icon{
   width: 26.5%;
  }

}

@media screen and (min-width: 934px) and (max-width: 968px){

  .icon{
   width: 28.5%;
  }

}

@media screen and (min-width: 928px) and (max-width: 933px){

  .icon{
   width: 28.5%;
  }

}