.hero {
    text-align: center;
    font-family: var(--font-main);
    font-size: 1rem;
    margin-top: 10%;
    margin-bottom: 1rem;
}

.hero h1 {
    font-size: 2.5rem;
    font-weight: var(--font-bold);
    margin-bottom: 0rem;
}

#typewriter {
  font-size: 1.5rem;  
}

.cursor {
  font-size: 1.5rem; 
}

.cursor {
  display: inline-block;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

@media (max-width: 900px) {
  .hero h1 {
    font-size: 1.5rem;
  }

 #typewriter {
  font-size: 1rem;  
}

.cursor {
  font-size: 1rem; 
}
}