b {
    position: fixed;
    color: white;
    padding: 1rem;
    font-family: monospace;
    background: transparent;
}

* {
    overflow: hidden;
    background: transparent;
}
body {
    margin: 0;
    overflow: hidden;
    background: transparent;
    color: white;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    animation: shimmer 1s infinite alternate;
    z-index: 1;
}
.profile-container {
    text-align: center;
    z-index: 2;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    background: transparent;
}
.profile-pic {
    width: 180px;  /* Increased from 150px */
    height: 180px; /* Must match width for perfect circle */
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
    margin-bottom: 1.5rem;
    object-fit: cover; /* This ensures the image covers the area without distortion */
    background: transparent;
}
.name {
    font-size: 1.8rem;
    margin: 0.5rem 0;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.title {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    font-size: 1.1rem;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    padding: auto;
    overflow: hidden;
}
.social-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
@property --rotation {
syntax: "<angle>";
initial-value: 0turn;
inherits: false;
}

.social-button {
padding: 1rem 2rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.4);
color: white;
text-decoration: none;
transition: all 0.3s ease;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
animation: float 6s ease-in-out infinite;
position: relative;
overflow: hidden;
background: transparent;
}

/* Only show gradient border and glow on hover */
.social-button:hover::before {
position: absolute;
inset: 0;
content: "";
z-index: -2;
background-image: conic-gradient(
    from var(--rotation),
    #007498,
    #00d493,
    #d91982,
    #f5a95b,
    #007498
);
animation: hue-rotation 7s infinite linear;
}

.social-button:hover::after {
position: absolute;
width: 98%;
height: 98%;
top: 1%;
left: 1%;
border-radius: 15px;
content: "";
z-index: -1;
background: black;
filter: blur(4px);
}

.social-button:hover {
border-color: transparent;
transform: translateY(-1px);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

@keyframes hue-rotation {
from {
    --rotation: 0turn;
}
to {
    --rotation: 1turn;
}
}
.social-button:nth-child(3) {
    animation-delay: 2s;
}
.social-button:nth-child(4) {
    animation-delay: 3s;
}

/* Rainbow Text Animation Styles */
.rainbow-text {
    /* Base text styling */
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 6rem;
    position: relative;
    
    /* Animated rainbow gradient background */
    background-image: linear-gradient(
      90deg,
      #ff0000 0%,
      #ff7f00 14.28%,
      #ffff00 28.56%,
      #00ff00 42.84%,
      #0000ff 57.12%,
      #4b0082 71.4%,
      #8f00ff 85.68%,
      #ff0000 100%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    
    /* Text effects */
    paint-order: stroke fill;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    
    /* Multiple layered shadows for depth */
    text-shadow: 
      3px 3px 0px rgba(7, 188, 204, 0.8),
      5px 5px 0px rgba(230, 1, 192, 0.6),
      7px 7px 0px rgba(233, 1, 154, 0.5),
      9px 9px 0px rgba(244, 4, 104, 0.4),
      11px 11px 10px rgba(72, 40, 150, 0.3);
      
    /* Animations */
    animation: 
      rainbow-move 7s linear infinite,
      rainbow-bounce 1s ease infinite;
    
    /* Smooth transitions */
    transition: all 0.5s ease;
  }
  
  /* Rainbow gradient animation */
  @keyframes rainbow-move {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 200% 50%;
    }
  }
  
  /* Bouncing animation */
  @keyframes rainbow-bounce {
    30% { 
      transform: scale(1.05); 
    }
    40%, 60% { 
      transform: rotate(-2deg) scale(1.05); 
    }
    50% { 
      transform: rotate(2deg) scale(1.05); 
    }
    70% { 
      transform: rotate(0deg) scale(1.05); 
    }
    100% { 
      transform: scale(1.0); 
    }
  }
  
  /* Hover effects */
  .rainbow-text:hover {
    animation-play-state: paused;
    text-shadow: 
      2px 2px 5px rgba(7, 188, 204, 0.3),
      -2px -2px 5px rgba(230, 1, 192, 0.3);
    transform: scale(1.05);
  }
  
  /* Responsive font sizes */
  @media (max-width: 768px) {
    .rainbow-text {
      font-size: 4rem;
    }
  }
  
  @media (max-width: 480px) {
    .rainbow-text {
      font-size: 3rem;
    }
  }
  
  /* Optional modifier classes */
  .rainbow-text--fast {
    animation-duration: 4s, 1s;
  }
  
  .rainbow-text--slow {
    animation-duration: 10s, 1s;
  }
  
  .rainbow-text--no-bounce {
    animation: rainbow-move 7s linear infinite;
  }
  
  .rainbow-text--intense {
    text-shadow: 
      3px 3px 0px rgba(7, 188, 204, 1),
      6px 6px 0px rgba(230, 1, 192, 0.8),
      9px 9px 0px rgba(233, 1, 154, 0.7),
      12px 12px 0px rgba(244, 4, 104, 0.6),
      15px 15px 10px rgba(72, 40, 150, 0.5);
  }