@font-face {
	src: url('https://fonts.gstatic.com/s/jockeyone/v21/HTxpL2g2KjCFj4x8WI6AnIHxHKGn8xY.woff2');
	font-family: 'my-font';
}

html, body {
	width: 100%;
	height: 100%;
	font-family: 'sans-serif';
	margin: 0 auto;
}

/* Typing effect container */
.typing-effect {
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  white-space: pre-wrap; /* Preserves line breaks */
  overflow: hidden; /* Hides overflowing text */
  display: inline-block; /* Prevents the block from breaking */
  border-right: 2px solid black; /* Cursor effect */
  animation: typing 5s steps(100) 1s 1 normal both, blink 0.5s step-end infinite;
}

/* Typing animation */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%; /* Ensures full text is typed */
  }
}

/* Blinking cursor animation */
@keyframes blink {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: black;
  }
}

.input1::placeholder {
	color: #dddddd;
}

.text1 {
  max-lines: 1;
  white-space: nowrap;
  singleline: true;
  animation: text1-scroll 10s linear infinite;
}

@keyframes text1-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}