@charset "UTF-8";
/* CSS Document */


.container {
  position: relative;
}

.overlaycontainer {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.imageoverlay {
    mix-blend-mode: color-dodge;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3; /* Ensure the overlay is above the background image but below the text */
    opacity: 0.5;
}

.imagebackground {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    transform: translate(-50%, -50%);
    z-index: 1; /* Background image is at the lowest layer */
}

.css-typing p{
	position: relative;
	z-index: 2;
	font-size: 23px;
  	border-right: .15em;
  	font-family: 'Helvetica Neue', sans-serif;
	font-weight: bold;
  	max-width: 90vw; /* Maximum width for the animation container */
  	overflow: hidden;
	white-space: nowrap;
}

.css-typing p:nth-child(1) {
  width: 14em;
	
  -webkit-animation: type 0.7s steps(200, end);
  animation: type 0.7s steps(200, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 16.1em;

  opacity: 0;
  -webkit-animation: type2 0.805s steps(200, end);
  animation: type2 0.805s steps(200, end);
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 22.4em;
	
  opacity: 0;
  -webkit-animation: type3 1.12s steps(200, end);
  animation: type3 1.12s steps(200, end);
  -webkit-animation-delay: 1.505s;
  animation-delay: 1.505s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(4) {
  width: 32.9em;
	
  opacity: 0;
  -webkit-animation: type4 1.645s steps(200, end);
  animation: type4 1.645s steps(200, end);
  -webkit-animation-delay: 2.625s;
  animation-delay: 2.625s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(5) {
  width: 25.9em;
	
  opacity: 0;
  -webkit-animation: type5 1.295s steps(200, end);
  animation: type5 1.295s steps(200, end);
  -webkit-animation-delay: 4.27s;
  animation-delay: 4.27s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(6) {
  width: 27.3em;
	
  opacity: 0;
  -webkit-animation: type6 1.365s steps(200, end);
  animation: type6 1.365s steps(200, end);
  -webkit-animation-delay: 5.565s;
  animation-delay: 5.565s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(7) {
  width: 25.9em;

  opacity: 0;
  -webkit-animation: type7 1.295s steps(200, end);
  animation: type7 1.295s steps(200, end);
  -webkit-animation-delay: 6.93s;
  animation-delay: 6.93s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(8) {
  width: 25.9em;
	
  opacity: 0;
  -webkit-animation: type8 1.295s steps(200, end);
  animation: type8 1.295s steps(200, end);
  -webkit-animation-delay: 8.225s;
  animation-delay: 8.225s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(9) {
  width: 32.9em;
	
  opacity: 0;
  -webkit-animation: type9 1.645s steps(200, end);
  animation: type9 1.645s steps(200, end);
  -webkit-animation-delay: 9.52s;
  animation-delay: 9.52s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(10) {
  width: 19.6em;
	
  opacity: 0;
  -webkit-animation: type10 0.98s steps(200, end);
  animation: type10 0.98s steps(200, end);
  -webkit-animation-delay: 11.165s;
  animation-delay: 11.165s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(11) {
  width: 24.5em;
	
  opacity: 0;
  -webkit-animation: type11 1.225s steps(200, end);
  animation: type11 1.225s steps(200, end);
  -webkit-animation-delay: 12.145s;
  animation-delay: 12.145s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(12) {
  width: 32.2em;

  opacity: 0;
  -webkit-animation: type12 1.61s steps(200, end);
  animation: type12 1.61s steps(200, end);
  -webkit-animation-delay: 13.37s;
  animation-delay: 13.37s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(13) {
  width: 22.4em;
	
  opacity: 0;
  -webkit-animation: type13 1.12s steps(200, end);
  animation: type13 1.12s steps(200, end);
  -webkit-animation-delay: 14.98s;
  animation-delay: 14.98s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(14) {
  width: 23.8em;
	
  opacity: 0;
  -webkit-animation: type14 1.19s steps(200, end);
  animation: type14 1.19s steps(200, end);
  -webkit-animation-delay: 16.1s;
  animation-delay: 16.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(15) {
  width: 33.6em;
	
  opacity: 0;
  -webkit-animation: type15 1.68s steps(200, end);
  animation: type15 1.68s steps(250, end);
  -webkit-animation-delay: 17.29s;
  animation-delay: 17.29s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em black;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
	 99.9% {
}
  100% {
    opacity: 1;
  }
}

@keyframes type4 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type4 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type5 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type5 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type6 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type6 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type7 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type7 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type8 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type8 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type9 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type9 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type10 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type10 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type11 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type11 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type12 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type12 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type13 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type13 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type14 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type14 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type15 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type15 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Media Queries for different screen sizes */
@media only screen and (max-width: 800px) {
	.css-typing p{
   position: relative;
	z-index: 2;
  	border-right: .15em;
  	font-family: 'Helvetica Neue', sans-serif;
	font-weight: bold;
  	font-size: 16px;
  	max-width: 100vw; /* Maximum width for the animation container */
  	overflow: hidden;
	white-space:nowrap;
	}
}