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

/*NAVBAR*/
nav { background-color: #068481; font-family: 'Rajdhani', sans-serif; font-size: 18px; color: white!important;}
nav a:hover{ color: #edca7e!important;}
.navbar-brand h1 { font-size: 30px!important; margin: 0; font-family: 'Bangers', cursive; text-shadow: 1px 1px 2px black;}
.navbar-toggler { font-size: 10px!important;}
i { font-size: 20px;}

/*BANNER SECTION*/
main { background-color: #c0c0c0; }
#bannerImage { width: 100%; height: auto;  z-index: 0; margin-top: 10px; }
#bannerImage2 { width: 100%; height: auto; z-index: 0; display: none;}
#overlay { position: absolute; z-index: 1; color: #425880; top: 17vw; left: 0; right: 0; margin: 0 auto; text-shadow: 1px 1px 2px gray;  
  font-family: 'Rajdhani', sans-serif;}
#overlay2 { position: absolute; z-index: 2; top: 25vw; left: 0; right: 0; margin: 0 auto; font-size: 2.5vw; font-family: 'Rajdhani', sans-serif;}
.css-typing p {
  border-right: .13em solid orange;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
}
.css-typing p:nth-child(1) {
  font-size: 4.75vw;
  width: 8.5em;
  -webkit-animation: type 3.5s steps(40, end), blink-caret .75s step-end infinite;
  animation: type 3.5s steps(40, end), blink-caret .75s step-end infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
  width: 8.5em;
  opacity: 0;
  -webkit-animation: type2 3.5s steps(40, end), blink-caret .75s step-end infinite;
  animation: type2 3.5s steps(40, end), blink-caret .75s step-end infinite; 
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
@keyframes type {
  0% { width: 0;}
  99.9% { border-right: .11em solid orange;}
  100% { border: none;}
}
@-webkit-keyframes type {
  0% { width: 0;}
  99.9% { border-right: .11em solid orange;}
  100% { border: none;}
}
@keyframes type2 {
  0% { width: 0;}
  1% { opacity: 1;}
  99.9% { border-right: .15em solid orange;}
  100% { opacity: 1;}
}
@-webkit-keyframes type2 {
  0% { width: 0;}
  1% { opacity: 1;}
  99.9% { border-right: .15em solid orange;}
  100% { opacity: 1;}
}
@keyframes blink {
  50% { border-color: transparent;}
}
@-webkit-keyframes blink {
  50% { border-color: transparent;}
}

/*ABOUT SECTION*/
#about { width: 100%; background-color: white; z-index: 0; clip-path: polygon(30% 0%, 84% 0, 100% 15%, 100% 100%, 70% 100%, 15% 100%, 0 84%, 0 0); }
#intro { display: flex; justify-content: center; align-items: center; }
#aboutImage { width: 25%; height: auto; border-radius: 5px; box-shadow: 3px 3px 10px gray; margin: 2vw 3vw 2vw 0vw; }
#aboutImage2 { display: none; }
#a1 { font-size: 50px; font-family: 'Rajdhani', sans-serif; font-weight: 600; color: #068481; text-shadow: 1px 1px 2px gray; display: block; }
#a2 { font-size: 30px; font-family: 'Rajdhani', sans-serif; line-height: 2.5; list-style-type: none; text-align: left; }
.listStyle { display: none; }
#a2 i { font-size: 2vw; }
#a3 { display: none; }

/*LABELS*/
#label1{ width: 100%; font-family: 'Rajdhani', sans-serif; font-weight: 600; color: #425880; text-shadow: 1px 1px 2px gray; 
    text-align: center; font-size: 50px; padding-top: 2vh; padding-bottom: 1vh; }
.label2 { font-size: 35px; font-family: 'Rajdhani', sans-serif;}
.label3 {font-family: 'Rajdhani', sans-serif; font-size: 22px!important;}
#label4{ width: 100%; font-family: 'Rajdhani', sans-serif; font-weight: 600;color: #068481; text-shadow: 1px 1px 2px gray; 
     text-align: center; font-size: 50px; padding-top: 2vh; padding-bottom: 1vh; }

/*PROJECT SECTION*/
.projectDivLink { text-decoration: none; color: black; }
.projectDivLink:hover { text-decoration: none; color: black; }
.inner { overflow: hidden;}
.inner img { transition: all 1.5s ease;}
.inner:hover img{ transform: scale(1.5);}
#projects { width: 100%; height: auto; background: #f5f5f5!important; box-shadow: .5px .5px 15px -5px gray inset; z-index: 0; 
    margin: 0 auto; padding-top: 0vh; padding-bottom: 2.5vh; }
#project1 { width: auto; height: 100%;}
#project2 { width: auto; height: 100%;}
#project3 { width: auto; height: 100%;}
#project4 { width: auto; height: 100%;}
#project1 img{ border-radius: 3px;}
#project2 img{ border-radius: 3px;}
#project3 img{ border-radius: 3px;}
#project4 img { border-radius: 3px;}
.btn { margin-top: 10px; }
.swiper-button-prev { padding: 25px; border-radius: 0 60px 60px 0; left: 0px!important; background-image: url('../images/leftarrow.png')!important; background: rgba(6, 132, 129, .6);
 background-repeat: no-repeat; background-position: center; box-shadow: 2px 9px 26px rgba(58, 87, 135, 0.7); }
.swiper-button-next { padding: 25px; border-radius: 60px 0 0 60px; right: 0px!important; background: rgba(6, 132, 129, .6); background-image: url('../images/rightarrow.png')!important;
 background-repeat: no-repeat; background-position: center; box-shadow: 2px 9px 26px rgba(58, 87, 135, 0.7); }
.swiper-button-prev::after { display: none; }
.swiper-button-next::after { display: none; }
.swiper-button-prev:hover { padding-left: 35px; transition: all 200ms linear; background: rgba(192, 192, 192, 0.8); background-repeat: no-repeat; background-position: center;}
.swiper-button-next:hover { padding-right: 35px; transition: all 200ms linear; background: rgba(192, 192, 192, 0.8); background-repeat: no-repeat; background-position: center;}
.swiper-pagination-bullets { bottom: 0!important; }
.swiper-container { margin-left: 15px!important; margin-right: 15px!important; padding: 0px 0px 30px 0px!important; height: 100%; width: 100%; }

/*SKILLS SECTION*/
.icons{ text-align: center; font-family: 'Rajdhani', sans-serif; font-size: 25px; }
#skills { width: 100%; height: auto; background: white; padding-top: 0vw; padding-bottom: 3vw; display: grid; clip-path: polygon(11% 0, 84% 0, 100% 0, 100% 84%, 88% 100%, 15% 100%, 0 100%, 0 15%);}
#skillImgs { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 50% 50%; align-items: center; }
#htmlImg2{ display: none;}
#cssImg2{ display: none;}
#bootstrapImg2{ display: none;}
#sassImg2{ display: none;}
#jsImg2{ display: none;}
#nodeImg2{ display: none;}
#npmImg2{ display: none;}
#reactImg2{ display: none;}
#mongoImg2{ display: none;}
#gitImg2{ display: none;}

/*CONTACT SECTION - FOOTER*/
footer { display: flex; justify-content: space-between; }
#contactInfo { display: flex; justify-content: space-between; font-family: 'Rajdhani', sans-serif; color: white; background: #425880; text-align: center;
  width: 100%; font-size: 18px; line-height: .9; padding: 20px 30px 3px 30px; }
#contactInfo a { color: white!important;}
#contactInfo a:hover{ color: #edca7e!important; text-decoration: none;}

@media screen and (max-width: 1500px) {
  #a2 { font-size: 25px; }
  .label3 { font-size: 20px!important; }
  .icons { font-size: 22px; }
}

@media screen and (max-width: 1350px) {
  .label3 { font-size: 18px!important; }
}

@media screen and (max-width: 1275px) {
  .label2 { font-size: 30px; }
  .label3 { font-size: 17px!important; }
}

@media screen and (max-width: 1200px) {
  #bannerImage { margin-top: 20px; }
  #a1 { font-size: 40px; }
  #a2 { font-size: 20px; }
  #label1 { font-size: 40px; }
  .label2 { font-size: 22px; }
  .label3 { font-size: 16px!important; }
  #label4 { font-size: 40px; }
  .icons { font-size: 18px; }
}

@media screen and (max-width: 1020px) {
  nav { font-size: 16px; }
  .navbar-brand { font-size: 25px!important; }
  i { font-size: 18px; }
  #overlay { top: 18vw; }
  #overlay2 { top: 26vw; }
  #a1 { font-size: 35px; }
  #a2 { font-size: 17px; }
  #a2 i { font-size: 2.5vw; }
  #label1 { font-size: 35px; }
  .label2 { font-size: 25px; }
  #label4 { font-size: 35px; }
  #htmlImg { display: none;}
  #cssImg { display: none;}
  #bootstrapImg { display: none;}
  #sassImg { display: none;}
  #jsImg { display: none;}
  #nodeImg { display: none;}
  #npmImg { display: none;}
  #reactImg { display: none;}
  #mongoImg { display: none;}
  #gitImg { display: none;}
  #htmlImg2{ display: inline-block; }
  #cssImg2{ display: inline-block; }
  #bootstrapImg2{ display: inline-block; }
  #sassImg2{ display: inline-block; }
  #jsImg2{ display: inline-block; }
  #nodeImg2{ display: inline-block; }
  #npmImg2{ display: inline-block; }
  #reactImg2{ display: inline-block; }
  #mongoImg2{ display: inline-block; }
  #gitImg2{ display: inline-block; }
}

@media screen and (max-width: 768px) {
  #bannerImage { width: 100%; height: auto;  z-index: 0; display: none;}
  #bannerImage2 { width: 100%; height: auto; z-index: 0; display: inline-block; margin-top: 35px; }
  #overlay { top: 28vw; font-size: 7.5vw; }
  #overlay2 { top: 40vw; font-size: 4vw; }
  #aboutImage { display: none; }
  #aboutImage2 { display: block; border-radius: 5px; box-shadow: 0px 3px 10px gray; width: 98%; height: auto;  margin: 4vw auto 2vw auto;  }
  #intro { flex-direction: column; padding: 10px 20px 25px 20px; }
  #a2 { font-size: 20px; }
  .label3 { font-size: 20px!important; }
  #aboutMe ul { text-align: center; margin: 0; padding: 0; list-style: none; }
  .icons { font-size: 20px; }
  #contactInfo { font-size: 18px; }
}

@media screen and (max-width: 600px) {
  #bannerImage2 { margin-top: 45px; }
  #overlay { top: 30vw; }
  #overlay2 { top: 42vw; }
  #intro { padding: 10px 0px 25px 0px;}
  #about { clip-path: none; }
  #a2 { font-size: 16px; }
  .label3 { font-size: 16px!important; }
  #a2 i { font-size: 18px; }
  .icons { font-size: 16px; }
  #skills { clip-path: none; }
  #contactInfo { flex-direction: column; }
}

@media screen and (max-width: 500px) {
  #overlay { top: 32vw; font-size: 8vw; }
  #overlay2 { top: 44vw; font-size: 4.5vw; }
  #a1 { font-size: 30px; }
  .listStyle { display: inline; }
  .about-list { line-height: 1.75;}
  #aboutImage2 { width: 87%; }
  #label1 { font-size: 30px; }
  .label2 { font-size: 20px; }
  #label4 { font-size: 30px; }
  #contactInfo { font-size: 16px; }
}

@media screen and (max-width: 400px) {
  #overlay { top: 32vw; font-size: 8.5vw; }
  #overlay2 { top: 44vw; font-size: 5vw; }
  #a1 { font-size: 25px; }
  #label1 { font-size: 25px; }
  .label2 { font-size: 18px; }
  #label4 { font-size: 25px; }
}

@media screen and (max-width: 320px) {
  #overlay { top: 34vw; }
  #overlay2 { top: 46vw; }
  #a1 { font-size: 22px; }
  #a2 { font-size: 13px; }
  .label2 { font-size: 17px; }
  .label3 { font-size: 13px!important; }
  .icons { font-size: 13px; }
  #skillImgs { grid-template-columns: 50% 50%; grid-template-rows: 20% 20% 20% 20% 20%; }
  #contactInfo { font-size: 14px; }
}