/*
    designing of index.html
*/
*{
    margin: 0;
    padding:0;
    font-family: 'Times New Roman', Times, serif;
    
}
html{
  scroll-behavior: smooth;
}


#right
{
    float: right;
}
/*layout design*/
.column
{
    float: left;
    
    height: content;
}
.left
{
  width:15%;
  
  
}
.between
{
  width: 70%;
  
}
.right
{
  width:15%;
  
}
.row2
{
  background:url("image/image1.png");
  width: initial;
  background-repeat: no-repeat;
  height: 700px;
  margin-top: 0px;
  padding-top: 0px;
}
.column_l
{float: left;
  width: 40%;
  height:100px;
}
.column_r
{float: left;
  width: 60%;
  height:100px;
}
.text1{

  width: 100%;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, cursive;
  color:black;
  font-size:45px;
  letter-spacing: 5px;
  text-shadow: -1px -1px 0px rgb(224, 228, 228),
    3px 3px 0px rgb(224, 228, 228),
    6px 6px 0px rgb(224, 228, 228);
}
main > p 
{
    font-size: x-large;
}
p{
    font-size: x-large;
}
p > ul li
{
    font-size: x-large;
}
footer{
    text-align: center;
    font-size: x-large;
}
article >h1{
  font-size: 70px;
}
.container
{
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}
.container > div{

    background-color: black;
    font-size: 18px;
    padding:20px;
    margin: 20px;
    width:300px;
    position:relative;
    text-transform: uppercase;
    transition:0.5s;
    border-radius: 20px;
    box-shadow: 0 0 20px blue;    
}
@media screen and(max-width:500px){
    .container > div
    {
        font-size: 10px;
        width:200px;
        
    }
    .container{
        align-content: center;
    }
  }
#container-item
{
 color: white;
    text-decoration: none;
}
/* Project Section*/
 ul > li
 {
     font-size: x-large;
 }
.unol
{
    list-style-type:circle;
}
input
{
    margin: 10px;
    padding:10px;
}
@media screen and(max-width:500px) {
   input{
    size: 40;
    
   }
}
ol li{
    list-style-type: none;
    margin: 10px;
    padding: 10px;
    font-size: large;
}
.link
{
    margin: 10px;
    padding: 10px;
    font-size: x-large;
    text-align: center;

}
.pic{

background-image:url("image/vidu1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 150px 200px;
border-radius: 30px;
margin: 10px;
padding: 10px;


}
.pic_about{

  background-color: rgb(132, 19, 170);
  background-position: center;
  background-repeat: no-repeat;
  width: initial;
  height: 300px;
   padding-top: 10px;
  }
  .pic_project{

    background-color: rgb(224, 13, 94);
    background-position: center;
    background-repeat: no-repeat;
    width: initial;
    height: 300px;
    padding-top: 10px;
    }
    .pic_contact{

      background-color: rgb(133, 41, 209);
      background-position: center;
      background-repeat: no-repeat;
      width: initial;
      height: 300px;
     
      }
    
  
.typing
{background-color: yellow;
font-size: xx-large;

}
.vl {
    border-left: 3px solid black;
    height: 70px;
    position: absolute;
    align-content: center;
    margin-left: 14px;
    top: 20;
}
span.test2 {
    writing-mode: vertical-rl; 
    padding-left: 10px;
  }
.sociallink:hover
{
    width: 45px;
    height: 45px;
    background-color: yellow;
}  
/* Single page website*/

#type{
    font-family:'Times New Roman', Times, serif;
    max-width: 40ch;
    text-align: center;
    transform: scale(0.94);
    animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
    animation-iteration-count: infinite;
  }
  @keyframes scale {
    100% {
      transform: scale(1);
    }
  }
  
  /*span {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
  }
  */
  span:nth-child(1) {
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(2) {
    animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(3) {
    animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(4) {
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(5) {
    animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(6) {
    animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(7) {
    animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(8) {
    animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(9) {
    animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(10) {
    animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(11) {
    animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(12) {
    animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(13) {
    animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(14) {
    animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(15) {
    animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(16) {
    animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  span:nth-child(17) {
    animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
/* Social Link side bar*/
body {margin:0;height:2000px;}

.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  border:black;
  border-radius: 20px;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color:white;
  font-size: 30px;
   background-color:  rgba(0, 0, 0, .7);
   text-decoration:none;
}


 
  .facebook hover { 
  background: #3B5998;
  color: white;
}
.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.github {
  background: #bb0000;
  color: white;
}

.facebook {
 
  color: white;
}

.twitter {
 
  color: white;
}

.google {
 
  color: white;
}

.linkedin {
  
  color: white;
}

.github {
 
  color: white;
}
.instagram {
 
  color: white;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}


.content {
  margin-left: 75px;
  font-size: 30px;
}

.animate__animated.animate__fadeIn {
      animation-iteration-count: infinite;
    }
@keyframes grow{
      0%{
          left: 0%;
   }
   50%{
          left:40%
      }
      100%{
          left: 0%;
      }
  }
.grown{
      position: relative;
      animation-name: grow;
      animation-duration: 5s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
.animate__animated.animate__jackInTheBox 
{
    animation-iteration-count: infinite;
}
/* Responsive media Query*/

/* For Mobile phone*/
@media(max-width:700px)
{

.left{
  width:5%;
}
.right{
  width:5%;
}
.icon-bar {
  position: fixed;
  top: 50%; 
  border-radius: 5px;
}

.icon-bar a {
  display: block;
  padding: 10px;
  font-size: 15px; 
}
.between{
  width:90%;
}
.column_l
{float: left;
  width: 100%;
  height:200px;
  top: 10%;
}
.column_r
{float: right;
  width: 100%;
  height:100px;
}
.row2
{
 
  background-repeat: no-repeat;
  background-size: content,1900px;
}
.pic{
  background-size: 110px 140px;
  background-position: center;
  margin-left: 5px;
  padding-left:5px;
  }
  
main > p 
{
    font-size:40px;
}
p{
    font-size: 40px;
}
p > ul li
{
    font-size: 40px;
}
footer{
    text-align: center;
    font-size: 40px;
}
.animate__animated.animate__fadeIn {
  font-size: 30px;
}

article > h1,h2
{
  font-size: 30px;
}
.animate__animated.animate__flash{
  font-size:50px;
}

/* About Section*/
.animate__animated.animate__jackInTheBox 
{
    font-size: 30px;
}
#homesize
{
  font-size: xx-large;
}
.type{
  font-size: 30px;
}
main > h1,h2
{
  font-size: large;
}
main > p 
{
  font-size: medium;
}
ul
{
  font-size: small;
}
p > ul li
{
    font-size: 10px;
}
p{
  font-size: medium;
}
/*
Project
*/
header > h1,h2{
  font-size: medium;
}
main> ul li
{
  font-size: medium;
}
/*Contact*/
main > input
{
  position:center;
  size: 40%;
}
footer{
  font-size:medium;
}
#formsize
{
  size:35px;
}
}
/* For Tablets*/
@media(max-width: 900px)
{
  .left{
    width:10%;
  }
 
.between{
  width:80%;
}
.right{
  width:10%;
}
article> h1
{
  font-size: 60px;
}
@keyframes grow{
  0%{
      left: 0%;
}
50%{
      left:12%;
  }
  100%{
      left: 0%;
  }
}
.row2
{
  background-repeat: no-repeat;
  background-size: content,900px;
}

}