body{
  color: #ffffff;
  background-color: #090b33;
  background-image: #1c1533;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='352' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23173544' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23292c55'%3E%3Ccircle cx='769' cy='229' r='7'/%3E%3Ccircle cx='539' cy='269' r='7'/%3E%3Ccircle cx='603' cy='493' r='7'/%3E%3Ccircle cx='731' cy='737' r='7'/%3E%3Ccircle cx='520' cy='660' r='7'/%3E%3Ccircle cx='309' cy='538' r='7'/%3E%3Ccircle cx='295' cy='764' r='7'/%3E%3Ccircle cx='40' cy='599' r='7'/%3E%3Ccircle cx='102' cy='382' r='7'/%3E%3Ccircle cx='127' cy='80' r='7'/%3E%3Ccircle cx='370' cy='105' r='7'/%3E%3Ccircle cx='578' cy='42' r='7'/%3E%3Ccircle cx='237' cy='261' r='7'/%3E%3Ccircle cx='390' cy='382' r='7'/%3E%3C/g%3E%3C/svg%3E");
}
nav{
  z-index: 999999;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

a:hover,
a{
  color: #fff;
}

.container > h1,
.container > h2 {
  padding: 60px 0 40px;
  text-align: center;
  letter-spacing: 7px;
}
.nav-item{
  padding: 10px;
}
.nav-link{
  color: #f1f1f1;
  font-size: 24px;
  font-weight: bold;
  border-bottom: 5px dashed transparent;
  padding-bottom: 5px;
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
  -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.nav-link:hover{
  color: #f1f1f1;
  padding-bottom: 0px;
  border-bottom-color: #2bb0d9;
}
.navbar-toggler{
  border: 1px solid white;
}
.sticky-top{
  -webkit-transition: all 0.8s ease-in;
  -o-transition: all 0.8s ease-in;
  transition: all 0.8s ease-in;
  background: #000033;
  border-bottom: 3px solid rgba(255, 255, 255, 0.8);
}

.hero-image{
  border: 10px solid #090B33;
  border-radius: 50%;
  height: 250px;
  width: 250px;
  object-fit: cover;
  -webkit-box-shadow: 0 1px 20px #aaaaaa;
          box-shadow: 0 1px 20px #aaaaaa;
  -webkit-animation: fadein 5s;
          animation: fadein 5s;
  margin: 20px;
}
.prof-pic:hover,
.prof-pic:focus{
  -webkit-animation-name: shake;
          animation-name: shake;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
@-webkit-keyframes fadein{
  from{ opacity: 0;}
  to{ opacity: 1;}
}
@keyframes fadein{
  from{ opacity: 0;}
  to{ opacity: 1;}
}
@-webkit-keyframes shake{
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes shake{
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shortdesc{
  font-weight: 600;
  font-style: italic;
}
.myName{
 text-align: center;
 background: #2bb0d9;
 margin: 50px;
 border: 1px solid #2bb0d9;
 border-radius: 3px;
 font-weight: 700;
 text-shadow: 2px 3px rgba(255,255,255,0.2);
 -webkit-transition: all 0.5s cubic-bezier(0.4, 0, 1, 1);
 -o-transition: all 0.5s cubic-bezier(0.4, 0, 1, 1);
 transition: all 0.5s cubic-bezier(0.4, 0, 1, 1);
}
.fa{
 padding: 10px;
 margin: 5px;
 font-size: 30px;
 width: 50px;
 text-align: center;
 text-decoration: none;
 border-radius: 50%;
}
.fa-facebook:hover,
.fa-instagram:hover,
.fa-github:hover,
.fa-linkedin:hover
{
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}
.fa-facebook {
 background: #3B5998;
 color: white;
}
.fa-instagram {
 background: #125688;
 color: white;
}
.fa-github{
  background: #343a40;
  color: white;
}
.fa-linkedin{
  background: #062456;
  color: white;
}
.fa-pencil,
.fa-user,
.fa-envelope{
  color: #2bb0d9;
}
.fa-map-marker,
.fa-envelope-open,
.fa-phone{
  position: relative;
  top: 2px;
  right: 1.5rem;
}
.about-me h2,
.skill-set h2{
  margin: 0;
  padding-bottom: 20px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 5px;
}
.about-me > p{
  text-align: justify;
  font-weight: light;
  font-size: 18px;
  color: #fff;
}
.aboutpic{
  display: inline-block;
  float: left;
  height: 200px;
  width: 200px;
  border: 2px solid #090B33;
  border-radius: 10px;
  margin-right: 1rem;
  object-fit: cover;
}

.skill-set{
  display: inline-block;
  width:inherit;
  -ms-grid-row: 2;
  grid-area: 2b;
  float: right;
  padding: 10px 20px;
  -webkit-box-shadow: 0 2px 30px rgba(255,255,255,0.5);
          box-shadow: 0 2px 30px rgba(255,255,255,0.5);
  border: 2px solid #2bb0d9;
  border-radius: 12px;
}

.skillBox{
  width: 100%;
  margin: 20px 0;
}
.skillBox p{
  color: #fff;
  text-transform:uppercase;
  margin: 0 0 10px;
  padding: 0;
  font-weight:800;
  letter-spacing: 1px;
}
.skillBox p:nth-child(2){
  float: right;
  position: relative;
  top: -25px;
}
.skill{
  background: #262626;
  padding: 4px;
  border: 1px solid #2bb0d9;
  border-radius: 5px;
}
.skill_level{
  background: #2bb0d9;
  width: 100%;
  height: 5px;
}
hr.style-one {
    border: 0;
    height: 2px;
    background: #fff;
}
.nounderline {
  text-decoration: none !important
}
.footer{
  background: #000033;
  height: 50px;
  margin: 0;
  padding: 0;
}
.btn:hover {
  opacity: 0.8;
}
.bg-sky {
  background: #2bb0d9;
}
#featured-works .featured-work-item{
  padding: 10px;
}
#featured-works .featured-work-item > img{
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  max-height: 500px;
  object-position: top;
  box-shadow:rgba(255, 255, 255, 0.8)
}
@media (max-width: 600px) {
  .myName {
    font-size: 34px;
  }
  .aboutpic {
    width: 150px;
    height: 150px;
  }
}
@media (min-width: 1200px){
  .myName:hover{
   -webkit-transform:translateY(-20px) scale(1.8) rotate(-10deg);
       -ms-transform:translateY(-20px) scale(1.8) rotate(-10deg);
           transform:translateY(-20px) scale(1.8) rotate(-10deg);
  }
  header,
  section,
  main{
    padding: 40px;
  }
}
@media (max-width: 1200px) {
  .myName:hover{
  -webkit-transform:translateY(-20px) rotate(-10deg);
      -ms-transform:translateY(-20px) rotate(-10deg);
          transform:translateY(-20px) rotate(-10deg);
  }
}