/*About section typewriter and cursor animation*/
.about-section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  .about-image img {
    max-width: 180px;
    height: auto;
    border-radius: 8px;
  }


  /* Responsive for smaller screens */
  @media screen and (max-width: 768px) {
    .about-section{
      padding: 5em; 
      margin: 20vh;
    }
    .about-section,
    .section-header
    {
      max-width: 100%;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: center;


    }
  
    .about-text {
      max-width: 90%;
      padding: 0 1rem;
    }
  
    .about-image img {
      width: 40%;
      height: auto;
    }
  }
  
  .typewriter-wrapper {
    display: inline-block;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    white-space: nowrap;
    border-right: 0.15em solid #f47e17;
    font-size: 1.8rem;
  }
  
  .typewriter-text {
    overflow: hidden;
    animation: typing 3s steps(11) 1s 1 normal both;
  }
  
  .cursor {
    animation: blink 5s steps(1) infinite;
    color: #d42700;
    transition: ease-in-out;
  }
  
  .typewriter-text {
    display: inline-block;
    animation: typing 3s steps(11) 1s infinite,
               blink-caret 5s step-end infinite;
    overflow: hidden;
    transition: ease-in-out;
  }
  
  @keyframes typing { /* Animation keyframes for about section cursor and typewriter */
  
    0% {
      width: 0;
    }
    40% {
      width: 12ch;
    }
    60% {
      width: 15ch;
    }
    100% {
      width: 0;
    }
  }
  
  @keyframes blink {   /* Keyframes for cursor blink */
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
  }
  
  @keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #00ffcc; }
  }