@import url('https://fonts.googleapis.com/css2?family=Alata&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* -#-     Moving Background       -#- */

.wrapper {
    animation: scroll 100s linear infinite;
    /* background: url("https://images.unsplash.com/photo-1635368276498-10387ddeac8a?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"),
      #111111; 
       */

    color: #eee;
    height: 90vh;
    min-width: 360px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;


    background-size: cover; /* Cover the entire container */
    background-position: center; /* Center the background image */
  }
  
  @keyframes scroll {
    100% {
      background-position: 900px 400%;
    }
  }
  
  /* Fallback if the operatring system prefers reduced motion*/
  @media (prefers-reduced-motion) {
    .wrapper {
      animation: scroll 800s linear infinite;
    }
  }


/* -#-          [END]             -#- */



/* -#-  ⌨️     Typewriter Effect     ⌨️  -#- */


.wrapper1 {
  /* Center the content horizontally and vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Maintain full viewport height */
}

.wrapper1 h1{
  user-select: none;

}
    /* Typewriter animation with multiple titles */
    @keyframes typing {
      /* Phase 1: Start empty */
      0% { content: ""; }
      
      /* Phase 2: Type "Full-stack developer" */
      2% { content: "F"; }
      3% { content: "Fu"; }
      4% { content: "Ful"; }
      5% { content: "Full"; }
      6% { content: "Full-"; }
      7% { content: "Full-s"; }
      8% { content: "Full-st"; }
      9% { content: "Full-sta"; }
      10% { content: "Full-stac"; }
      11% { content: "Full-stack"; }
      12% { content: "Full-stack\00000A d"; }
      13% { content: "Full-stack\00000A de"; }
      14% { content: "Full-stack\00000A dev"; }
      15% { content: "Full-stack\00000A deve"; }
      16% { content: "Full-stack\00000A devel"; }
      17% { content: "Full-stack\00000A develo"; }
      18% { content: "Full-stack\00000A develop"; }
      19% { content: "Full-stack\00000A develope"; }
      20% { content: "Full-stack\00000A developer"; }
      21% { content: "Full-stack\00000A developer"; }
      
      /* Phase 3: Pause with full text */
      21%, 25% { content: "Full-stack\00000A developer"; }
      
      /* Phase 4: Erase "Full-stack developer" */
      26% { content: "Full-stack\00000A develope"; }
      27% { content: "Full-stack\00000A develop"; }
      28% { content: "Full-stack\00000A develo"; }
      29% { content: "Full-stack\00000A devel"; }
      30% { content: "Full-stack\00000A deve"; }
      31% { content: "Full-stack\00000A dev"; }
      32% { content: "Full-stack\00000A de"; }
      33% { content: "Full-stack\00000A d"; }
      34% { content: "Full-stack"; }
      35% { content: "Full-stack"; }
      36% { content: "Full-stac"; }
      37% { content: "Full-sta"; }
      38% { content: "Full-st"; }
      39% { content: "Full-s"; }
      40% { content: "Full-"; }
      41% { content: "Full"; }
      42% { content: "Ful"; }
      43% { content: "Fu"; }
      44% { content: "F"; }
      45% { content: ""; }
      
      /* Phase 5: Type "Networking Enthusiast" */
      46% { content: "N"; }
      47% { content: "Ne"; }
      48% { content: "Net"; }
      49% { content: "Netw"; }
      50% { content: "Netwo"; }
      51% { content: "Networ"; }
      52% { content: "Network"; }
      53% { content: "Networki"; }
      54% { content: "Networkin"; }
      55% { content: "Networking"; }
      56% { content: "Networking\00000A E"; }
      57% { content: "Networking\00000A En"; }
      58% { content: "Networking\00000A Ent"; }
      59% { content: "Networking\00000A Enth"; }
      60% { content: "Networking\00000A Enthu"; }
      61% { content: "Networking\00000A Enthus"; }
      62% { content: "Networking\00000A Enthusi"; }
      63% { content: "Networking\00000A Enthusia"; }
      64% { content: "Networking\00000A Enthusias"; }
      65% { content: "Networking\00000A Enthusiast"; }
      
      /* Phase 6: Pause with "Networking Enthusiast" */
      65%, 69% { content: "Networking\00000A Enthusiast"; }
      
      /* Phase 7: Erase "Networking Enthusiast" */
      70% { content: "Networking\00000A Enthusias"; }
      71% { content: "Networking\00000A Enthusia"; }
      72% { content: "Networking\00000A Enthusi"; }
      73% { content: "Networking\00000A Enthus"; }
      74% { content: "Networking\00000A Enthu"; }
      75% { content: "Networking\00000A Enth"; }
      76% { content: "Networking\00000A Ent"; }
      77% { content: "Networking\00000A En"; }
      78% { content: "Networking\00000A E"; }
      79% { content: "Networking"; }
      80% { content: "Networkin"; }
      81% { content: "Networki"; }
      82% { content: "Network"; }
      83% { content: "Networ"; }
      84% { content: "Netwo"; }
      85% { content: "Netw"; }
      86% { content: "Net"; }
      87% { content: "Ne"; }
      88% { content: "N"; }
      89% { content: ""; }
      
      /* Phase 8: Final pause before loop */
      89%, 100% { content: ""; }
    }
    
    @keyframes blink {
      0%, 49% { opacity: 1; }
      50%, 99% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    .typewriter {
      --caret: currentcolor;
      font-family: "Courier Prime", monospace;
      font-weight: 400;
      font-style: normal;
      white-space: pre-line;
    }
    
    .typewriter::before {
      content: "";
      animation: typing 10s infinite;
    }
    
    .typewriter::after {
      content: "";
      border-right: 2px solid var(--caret);
      animation: blink 1s ease-in-out infinite;
    }
    
    .typewriter.thick::after {
      border-right: 1ch solid var(--caret);
    }
    
    .typewriter.nocaret::after {
      border-right: 0;
    }
    
    
    /* Reduced motion accessibility */
    @media (prefers-reduced-motion) {
      .typewriter::after {
        animation: none;
        opacity: 1;
      }
      
      .typewriter::before {
        content: "Full-stack\00000A developer";
        animation: none;
      }
    }

/* Responsive Design - Mobile and Tablet */

/* Tablet styles (768px - 1024px) */
@media screen and (max-width: 1024px) {
  .hero {
    padding: 3rem 1.5rem;
    min-height: 80vh;
  }
  
  .hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    margin-bottom: 1rem;
  }
  
  .hero-content .typewriter {
    font-size: clamp(1.2rem, 3.5vw, 1.8rem);
    margin-bottom: 1.5rem;
  }
}

/* Mobile styles (max-width: 768px) */
@media screen and (max-width: 768px) {
  .hero {
    padding: 2rem 1rem;
    min-height: 70vh;
    text-align: center;
  }
  
  .hero-content {
    max-width: 100%;
    padding: 0;
  }
  
  .hero-content h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }
  
  .hero-content .typewriter {
    font-size: clamp(1rem, 4vw, 1.4rem);
    margin-bottom: 1rem;
    line-height: 1.4;
  }
  
  .hero-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }
}

/* Small mobile styles (max-width: 480px) */
@media screen and (max-width: 480px) {
  .hero {
    padding: 1.5rem 0.8rem;
    min-height: 60vh;
  }
  
  .hero-content h1 {
    font-size: clamp(1.8rem, 10vw, 2.2rem);
    margin-bottom: 0.3rem;
  }
  
  .hero-content .typewriter {
    font-size: clamp(0.9rem, 5vw, 1.1rem);
    margin-bottom: 0.8rem;
  }
  
  .hero-content p {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }
  
  .typewriter::after {
    border-right: 1px solid var(--caret);
  }
}


/* -#-          [END]             -#- */