body {
  padding: 0;
  font-family: "Raleway", sans-serif;
  overflow-x: hidden;
  background: rgba(0, 0, 0, 1);
}

.container-fluid {
  padding: 0;
}

.mainsection{
  background: rgb(33, 37, 41);
  background: linear-gradient(
    124deg,
    rgba(33, 37, 41, 1) 24%,
    rgba(0, 0, 0, 1) 63%
  );
  height: 100vh;
}


.main-text-body {
  width: 80%;
}

.name {
  font-family: "Roboto slab", serif;
  font-weight: 400;
  font-size: 50px;
  padding-bottom: 10px;
  color: rgb(99, 95, 84);
}

.card-text {
  color: rgba(255, 255, 255, 0.5);
  font-family: "open sans", sans-serif;
}

.quote {
  background-color: rgb(33, 37, 41) ;
  color:rgba(255, 172, 48, 0.9);
  font-family: "open sans", sans-serif;
}

.quote-size {
  font-size: 35px;
  line-height: 1.5;
  font-weight: lighter;
}

.aboutme-section {
  background: rgba(0, 0, 0, 1);
}
.aboutme-title {
  color: rgb(99, 95, 84);
}

.aboutme-heading {
  color: rgb(99, 95, 84);
}

.aboutme-para {
  color: rgba(255, 255, 255, 0.5);
}

card-body {
  border-radius: 4px;
}



.service-section {
  background-color: rgba(255, 172, 48, 0.9);
}
.service-name {
  color: rgb(99, 95, 84);
}

.service-icon {
  font-size: 4em;
}


.project-section {
  background-color: rgba(0, 0, 0, 1);
  color: rgb(99, 95, 84);
}

.demo-button{
  margin-right: 5px;

}
.contact-section {
  background: rgba(0, 0, 0, 1);
}

.contact-heading {
  color: rgb(99, 95, 84);
}

.contact-para {
  font-size: 20px;
  color: rgba(99, 95, 84, 0.6);
}
.contact-icons {
  font-size: 25px;
    color: rgba(0, 0, 0, 1);
}

.contact-icons:hover {
  transition: 0.3s;
    color: rgba(99, 95, 84, 0.6);

}

.cta-btn {
  font-family: "open sans", sans-serif;
  border-radius: 25px;
  font-size: 15px;
  transition: 0.3s;
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 172, 48, 0.9);
  border: solid;
  border-color: rgba(255, 172, 48, 0.9);
}

.cta-btn:hover {
  background-color: rgba(255, 172, 48, 0.7);

}

.resume-btn {
  transition: 0.3s;
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 172, 48, 0.9);
  border-radius: 15px;
  border-color: rgba(255, 172, 48, 0.9);
}

.resume-btn:hover {
  background-color: rgba(255, 172, 48, 0.7);

}


.footer {
  background-color: #ffac30e6;
}

.connect{
  color: rgba(0, 0, 0, 1);
}
.copyright {
  background-color: rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 600px) {

.name{
  font-size: 30px;
}



  .title-text::after {
    content: "Computer Science Engineer";
  }

  .quote-size {
    font-size: 30px;
    line-height: 1.5;
  }

  .service-icon {
    font-size: 2em;
  }

  .service-name {
    font-size: 0.5em;
  }

  .aboutme-heading {
    font-size: 35px;
  }

  .aboutme-para {
    font-size: 15px;
  }

  .contact-icons {
    font-size: 15px;
  }
}



@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffac30e6,
      0 0 40px #ffac30e63, 0 0 50px #ffac30e6, 0 0 60px #ffac30e6,
      0 0 70px #ffac30e6;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ffac30e6, 0 0 40px #ffac30e6,
      0 0 50px #ffac30e6, 0 0 60px #ffac30e6, 0 0 70px #ffac30e6,
      0 0 80px #ffac30e6;
  }
}
#spin:after {
  content: "Front End Developer";
  animation: spin 5s ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes spin {
  0% {
    content: "Front End Developer";
    color: #ffac30;
  }
  50% {
    content: "Computer Science Engineer";
  }


  100% {
    content: "Creative Designer";
  }
}