/* ////////////////// */
/* wavey text in main page */
/* ///////////////// */
.text-effect-container {
	position: relative;
  width: 400px;
  height: 60px;

  font-family: 'Rubik', sans-serif;
}

.text-effect-container h2 {
	color: #fff;
	font-size: 36px;
  font-weight: bold;

	position: absolute;
  transform: translate(32%, -20%);
}

.text-effect-container h2:nth-child(1) {
	color: transparent;
	-webkit-text-stroke: 1px #03a9f4;
}

.text-effect-container h2:nth-child(2) {
	color: #03a9f4;
	animation: animate 3.5s ease-in-out infinite;
}

@keyframes animate {
	0%,
	100% {
		clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
	}
}


/* //////////////////////// */
/* home btn and about btn */
/* /////////////////////// */
.btn-resume,
.btn-contact,
.btn-submit{
  position: relative;
  font-family: inherit;
  font-size: 18px;
  text-align: center;

  width: 180px;
  height: 55px;

  margin: 50px 0;

  /* effect */
  box-shadow: 6px 6px var(--selected--main--color);
  transition: all 0.2s;
}

.btn-contact{
	margin: 0 32%;
	margin-top: 10px;

	width: 100px;
}

.btn-resume:hover,
.btn-contact:hover,
.btn-submit:hover{
  box-shadow: none;
  transform: translate(8px, 8px);
}



/* /////////////////////////////////// */
/* auto typing in the about section */
/* /////////////////////////////////// */
@keyframes cursor {
  to, from {
    border-color: transparent;
  }
  50% {
    border-color: rgb(255, 255, 255);
  }
}

@keyframes typing {
  from {
    width: 100%;
		
  }
  50% {
    width: 0;
  }
}

@keyframes slide {
  24.3333333333% {
    font-size: 2rem;
  }
  to {
    font-size: 0;
  }
}

.typing-slider {
  text-align: right;
  white-space: nowrap;

	position: absolute;
	top: 45px;
	right: 0;

	font-size: 30px;
	color: rgb(153, 153, 153);
}

.typing-slider p {
  position: relative;
  display: inline;

  font-size: 0;

  /* with 4 sentenses time was 16s */
	animation: slide 12s step-start infinite;
}
	
.typing-slider p::after {
	content: "";
  position: absolute;
  top: 0;
  left: -8px;
  bottom: 0;

  border-right: 4px solid rgb(124, 124, 124);
  background-color: var(--main--body--color--shade);

  animation: typing 4s  infinite, cursor 1s infinite;
}

.typing-slider p:nth-child(1) {
  animation-delay: 0s;
}
.typing-slider p:nth-child(1)::after {
  animation-delay: 0s;
  animation-timing-function: steps(11), step-end;
}

.typing-slider p:nth-child(2) {
  animation-delay: 4s;
}
.typing-slider p:nth-child(2)::after {
  animation-delay: 4s;
  animation-timing-function: steps(13), step-end;
}

.typing-slider p:nth-child(3) {
  animation-delay: 8s;
}
.typing-slider p:nth-child(3)::after {
  animation-delay: 8s;
  animation-timing-function: steps(12), step-end;
}

/* .typing-slider p:nth-child(4) {
  animation-delay: 12s;
} */
/* .typing-slider p:nth-child(4)::after {
  animation-delay: 12s;
  animation-timing-function: steps(15), step-end;
} */


/* //////////////////////////////// */
/* glowing text in contact section */
/* /////////////////////////////// */
.glowing-text span{
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color: #fff6a9;
  text-align: center;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {

  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}


/* ////////////////// */
/* text gradient */
/* ////////////////// */
.home-section--main-container h1,
.contact-information-box h3,
.typing-slider p{
  background: -webkit-linear-gradient(45deg, var(--selected--main--color), var(--selected--main--color--shade));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}