@keyframes cursor {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: black;
  }
}
@keyframes typing {
  from {
    width: 100%;
  }
  90%, to {
    width: 0;
  }
}
@keyframes slide {
  50% {
   font-size: calc(0.7rem + 1vw);
    letter-spacing: 3px;
	  container-name: typer;
 }
  to {
    font-size: 0;
    letter-spacing: 0;
  }
}
.typing-slider {
  font-family: Consolas, monospace;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

@container typer (min-width: 700px) {
  .module h1 {
    font-size: 2em;
  }
}

.typing-slider h1 {
  position: relative;
  display: inline;
  font-size: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  animation: slide 6s step-start infinite;
	
	

	
}

@media (min-width: 320px) and (max-width: 992px) {
.navbar-brand
{
 max-width:70% !important; }
}
}

@media (min-width: 992px) {
.navbar-brand
{
 max-width:30% !important; }
}
}

.typing-slider h1::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 3px solid black;
  background-color: #FFCC00;
  animation: typing 3s infinite, cursor 1s infinite;
}

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

.typing-slider h1:nth-child(2) {
  animation-delay: 3s;
}
.typing-slider h1:nth-child(2)::after {
  animation-delay: 3s;
  animation-timing-function: steps(23), step-end;
}

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




.navbar-brand
{
    


}