* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
/* Mobile base styles (default) */
body { font-size: 1rem;background-color:#225066;
    color:black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-user-select:none;
    -ms-user-select:none;
     moz-user-select:none;
     user-select:none;
    box-shadow: 2px 2px 12px #6bc1db;
    background:linear-gradient(yellow,purple);
    height:100%;
    width:100%
 }

/* Tablet and larger */
@media (min-width: 768px) {
  body { font-size: 1.125rem;background-color:#225066;
    color:black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      height:100%;
      width:100%
 }
}
nav {
    height:80px;
    background-color:#ebd09b;
    box-shadow: 2px 2px 12px #6bc1db;
    align-items: center;
    top: 0;
    width: 100%;
    z-index: 100;
    position: sticky;
    border-radius:16px
}
     .logo-area { display: flex; align-items: center; gap: 5px; font-size: 1.2rem; font-weight: 800;color:transparent;background:linear-gradient(50deg,purple,blue,yellow);margin-top:-40px;margin-left:50px;-webkit-background-clip:text;}
        .verified-badge { width: 18px; height: 18px; fill: #1DA1F2}

h{
    font-size:1.7rem;
    background: linear-gradient(90deg,voilet,#ff00ff);
    background-clip: text;
    color:transparent
}

.about-container {
    width: 70%;
    height: auto;
    background-color: bisque;
    border-radius: 20px;
    box-shadow: 2px 2px 12px #6bc1db;
    display: flex;
    margin: -7% auto 20px auto;
    margin-top: 100px;
    position: relative;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px;
}
 .flex-container {
  display: flex;
  justify-content: right; /* Aligns horizontally: 'flex-start', 'center', 'flex-end' */
  align-items:right;/* Aligns vertically *//* Required if you want vertical alignment */
}
.typewriter-container {
      display: inline-block;
    }

    .typewriter-text {
      font-size: 2rem;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      border-right: 3px solid #38bdf8; /* The cursor */
      width: 0;
      /* Adjust 'steps(40)' based on letter count and duration to taste */
      animation: 
        typing 6s steps(40, end) forwards,
        blink 0.75s infinite;
        animation-duration: -6s;
        background: linear-gradient(90deg,blue,cyan);
        -webkit-background-clip: text;
        color:transparent
    }

    /* Typing keyframes: reveals text from left to right */
    @keyframes typing {
      from { width: 0; }
      to { width: 100%; }
    }

    /* Blinking cursor keyframes */
    @keyframes blink {
      from, to { border-color: transparent; }
      50% { border-color: #38bdf8; }
    }
.activities{
    width: 70%;
    height: auto;
    background-color: rgb(0,0,0);
    border-radius: 20px;
    box-shadow: 2px 2px 12px #6bc1db;
    display: block;
    margin: -7% auto 20px auto;
    margin-top: 100px;
    position: relative;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px;
    color:rgb(186, 150, 103);
    font-family:monospace;
    font-size:1.3rem;
    text-align:center;
    animation:moveRight 3s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
}
.bouncing-box {
    width: 70%;
    height: auto;
    background-color:#073642;
    border-radius: 20px;
    box-shadow: 3px 3px 13px #6bc1db;
    display: block;
    margin: -7% auto 20px auto;
    margin-top: 100px;
    padding: 20px;
    color:rgb(186, 150, 103);
    font-size:1.3rem;
    text-align:center;
    border:10px solid  #58c7c1;
    border-block-end:12px solid #ffcb7d ;
    border-block-start:12px solid bisque;
    animation: bounce 2s ease infinite;
}
@keyframes moveRight{
    0%{
        transform: translateX(-50px);
    }
    50%{
        transform: translateX(50px);
    }
    100%{
        transform: translateX(-50px);
    }
}
footer{
    font-size:1.3rem;
    color: rgb(186, 150, 103);
    font-family:monospace;
    text-align:center;
    animation:bounce2 2s infinite
}
@keyframes bounce2{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-20px);
    }
}
#hio{
    color:#6bc1db;
    font-size:20px;
    font-weight:bold;
    text-shadow:2px 2px 12px #6bc1db;
    animation:moveRight2 3s ease-in-out infinite
}
@keyframes moveRight2{
    0%,100%{
        transform: translateX(43%);
    }
    50%{
        transform: translateX(-43%);
    }
}
.type-text{
     font-size: 2rem;
    color:gold;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      border-right: 3px solid #38bdf8; /* The cursor */
      width: 0;
      /* Adjust 'steps(40)' based on letter count and duration to taste */
      animation: 
        typing 5s steps(40, end) forwards,
        blink 0.75s infinite;
        animation-delay: 6s;
        text-shadow:2px 2px 12px gold;
}
@keyframes typing2 {
      from { width: 0; }
      to { width: 100%; }
    }

    /* Blinking cursor keyframes */
    @keyframes blink2 {
      from, to { border-color: transparent; }
      50% { border-color: #38bdf8; }
    }