video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}


html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 150%;
  line-height: 1.4;
  
}


.header {
  position: relative;
  height: 10vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

h1 {
  font-family: 'Syncopate', sans-serif;
  font-weight: 100;
  color:#ffffff;
  text-transform: uppercase;
  letter-spacing: 3vw;
  line-height: 5;
  font-size: 3vw;
  text-align: center;
  text-shadow: 2px 2px 2px rgba(66, 66, 66, 0.5);
  
}


h2 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #ffffff;
text-shadow: 2px 2px 2px rgba(66, 66, 66, 0.5);
font-size: 80px;
display: flex;
height: -10vh;

}

.name {
  position: relative;
  height: 10vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}



.para {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
}

.para {
  display: flex;
  position: relative;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 10px;
  height: auto;
 width: 500px;
 text-align: center;
 align-items: center;
margin-left: auto;
margin-right: auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/* text-shadow: 6px 6px 6px  rgba(0, 0, 0, 0.5) ; */
border-radius: 300px;
}

.note{
	font-family: "Arial Black", "Arial Bold", sans-serif;
	color: yellow;
	font-size: 1.2em;
}

.notepara{
	font-size: .6em;
	font-weight: bold;
}


.info {
  display: flex;
  flex-direction: column;
  align-items: center;

}



.click {
display: flex;
flex-direction: row;
align-items: center;

}




  .gh:link, .gh:visited {
    padding: 5px 5px 5px 5px;
    text-align: center; 
    
  }
  
  .gh:hover, .gh:active {
    background-color: orangered;
    height: 100px;
  width: 100px;
  border:none;
  border-radius: 100px;
  transition: 100px;
  transition:0.5s;
  transform:translateX(-20px)rotate(30deg);
  transition:0.5s;
  }

  .li:link, .li:visited {
    padding: 5px 5px 5px 5px;
    text-align: center; 
  
  }
  
  .li:hover, .li:active {
    background-color: #f06553;
    height: 100px;
  width: 100px;
  border:none;
  border-radius: 100px;
  transition: 100px;
  transition:0.5s;
  transform:translateX(-20px)rotate(30deg);

  }

 .img {
   display: flex;
     position: relative;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    opacity: 0.8;
 }

 img {
   border-radius: 50%;

  
 }


 .img {

  animation-name: grow;
  animation-duration: 1s;
  
}
 

 @keyframes grow {
   from {
    transform: scale(0);
   } to {
     transform: scale(1.5);
   }
 }


 
 p {
    color: whitesmoke;
}

.dl:hover:after  {
  content: "HIRE ME";
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}



.dl {
  border: none;
  background-color: #005BC3;
  color: whitesmoke;
  text-decoration: none;
  display: block;
  font-size: 14px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  height: 25px;
  width: 100px;
  border-radius: 20px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight:500;
  text-align: center;
  height: 30px;
  width: 500px;
  padding-top: 8px;

}



.dl:active {
 transform: translateY(10px);

}


.PJ {
  border: none;
  background-color: #005BC3;
  color: whitesmoke;
  text-decoration: none;
  display: block;
  font-size: 14px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  height: 25px;
  width: 100px;
  border-radius: 20px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 500;
  text-align: center;
  height: 30px;
  width: 500px;
  padding-top: 8px;
  -webkit-transition: all 3s ease;
}

.PJ:active {
  transform: translateY(10px);
 
}

/* .PJ :hover {
  background-image:  black;
} */

/* .pro:hover {
  background-color: orangered;
} */



.pro .PJ:hover {
  background-image: linear-gradient( black, rgb(0, 0, 0));
  color:white;
  font-family: 'Oswald', sans-serif;
}




.Contact{
  margin-bottom: 200px;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical; 
}


input[type=submit] {
  background-color: #005BC3;
  border: none;
  border-radius: 20px 20px;
  cursor: pointer;
  color: whitesmoke;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 500;
  height: 38px;
}


input[type=submit]:active {
  transform: translateY(10px);
}

input[type=submit]:hover{
  padding-top: 27px;
  padding-bottom: 40px;
  transition: 1s;
}

.submit {
  text-align: center;
  height: 30px;
  width: 500px;
}

.jsl {
  border-radius: 10px;
}

.jsl {
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: 10s;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}