style.css

/* navbar scroll */
.navbarScroll.navbarDark {
  background-color: rgb(0, 0, 0);

}

.nav-link, .dropdown-item {
  color: rgb(111, 111, 237) !important;
}

.nav-link:hover, .dropdown-item:hover {
  color: #e01313 !important;
}

/* hero background image */
.bgimage {
  height: 100vh;
  background-size: cover;
}

/* Background Stars Animation */
#stars {
  background: rgb(111, 111, 237);


  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.block {
  position: relative;
  height: 100%;
  background-image: radial-gradient(circle at 50% 90%,
      #385c78,
      #011735 79%,
      #010e1f);
  overflow: hidden;
  box-sizing: border-box;
}

.block:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("./heroImg.png");
  background-size: cover;
  animation: stars 10s linear infinite alternate;
}

.block:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("./heroImgg.png");
  background-size: cover;
  animation: stars 30s linear infinite alternate;
}

@keyframes stars {
  0% {
    -webkit-transform: rotate(-14deg);
    transform: rotate(-14deg);
  }

  100% {
    -webkit-transform: rotate(14deg);
    transform: rotate(14deg);
  }
}

/* Wave Animation */
.wave {
  animation-name: wave-animation;
  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;
  /* Change to speed up or slow down */
  animation-iteration-count: infinite;
  /* Never stop waving :) */
  transform-origin: 70% 70%;
  /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
  0% {
    transform: rotate(0.0deg)
  }

  10% {
    transform: rotate(14.0deg)
  }


  /* The following five values can be played with to make the waving more or less extreme */
  20% {
    transform: rotate(-8.0deg)
  }

  30% {
    transform: rotate(14.0deg)
  }

  40% {
    transform: rotate(-4.0deg)
  }

  50% {
    transform: rotate(10.0deg)
  }

  60% {
    transform: rotate(0.0deg)
  }

  /* Reset for the last half to pause */
  100% {
    transform: rotate(0.0deg)
  }
}



/* Scroll Down Animation */
.box {
  position: absolute;
  top: 117%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box span {
  display: block;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
  margin: -10px;
  animation: animate 2s infinite;
}

.box span:nth-child(2) {
  animation-delay: -0.2s;
}

.box span:nth-child(3) {
  animation-delay: -0.4s;
}

@keyframes animate {

  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-20px, -20px);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(45deg) translate(20px, 20px);
  }
}

/* Hero Shiny Text Animation */
.text-animation {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 5px;
  background: linear-gradient(90deg, #000, #f5f5f5, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 80%;
  position: relative;
  animation: shine 8s ease-in-out infinite;
}

.text-animation h1 {
  font-size: 50px;
  margin-bottom: 20px;
}

.text-animation p {
  font-size: 25px;
  font-weight: 600;
}

@keyframes shine {
  from {
    background-position-x: -500%;
  }

  to {
    background-position-x: 500%;
  }
}

#res {
  color: white;
}


/* Resume Background Stars Animation */
#resume {

  background-color: black;
  background-image: url("./stardust.png");
  animation: glows 30s linear infinite;
  padding-bottom: 2.5em;
  ;
}

@keyframes glows {
  0% {
    background-position: 0 0;
  }

  100% {
    /* the size of the background image */
    background-position: 798px -798px;
  }
}



/* Extra styles */
body {
  font-size: 3.5em
}

h1 {
  font-size: 0.5em
}

/* text css above hero image*/
.hero_title {
  font-size: 4.5rem;
}

.hero_desc {
  font-size: 2.5rem;
  text-align: center;

}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/* spacing on all sections */
#about, #resume, #skills, #contact {
  padding-top: 7rem;
  padding-bottom: 7rem;
}




/* about section Image CSS */
.imageAboutPage {
  width: 100%;
  padding-bottom: 4em;
}

/* Resume Section CSS */
.servicesText.card {
  height: 280px;
  cursor: pointer;
}

.servicesIcon {
  font-size: 50px;
  text-align: center;
  width: 100%;
}

.card-title {
  text-align: center;
}

.card:hover .servicesIcon {
  color: rgb(111, 111, 237);
}

.servicesText:hover {
  border: 1px solid rgb(111, 111, 237);
}

/* Resume Section Button Styling */
.btn-primary,
.btn-primary:active,
.btn-primary:visited {
  background-color: #6f6fed !important;
  border-color: #20201f !important;
}

.btn-primary:hover {
  background-color: #e01313 !important;
}



/* Portfolio Section Styling */

.card-img-top:hover {
  opacity: 0.5;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

.card-img-top:hover {
  border: 4px solid #d10b0b !important;
  padding: 10px;
  box-shadow: 7px 10px rgb(165, 92, 243);
}

#skills {
  padding-top: 7em;
  background-color: rgb(111, 111, 237);

}

.btn-success,
.btn-success:active,
.btn-success:visited {
  background-color: #6f6fed !important;
  border-color: #20201f !important;
}

.btn-success:hover {
  background-color: #e01313 !important;
}


/* Contact me section map styling */
#embedmap-canvas img {
  max-width: none !important;
  background: none !important;
  font-size: inherit;
  font-weight: inherit;
}


/* social media icons styling in footer */
.social-icons {
  font-size: 36px;
  cursor: pointer;
}

.fa-facebook:hover, .fa-instagram:hover, .fa-twitter:hover, .fa-linkedin:hover, .fa-twitch:hover {
  color: #aa9ae9;
}

.fa {
  color: rgb(111, 111, 237);
}

/* footer styling */

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

input[type=email] {
  border: 2px solid red;
  border-radius: 4px;
}

textarea[name=text] {
  border: 2px solid red;
  border-radius: 4px;
}

#footer {
  background-color: #000000;
  text-align: center;
}