@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background-color: #000;
    font-family: 'Orbitron', sans-serif;
    color: #8a2be2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .floating-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }

  .floating-element {
    position: absolute;
    opacity: 0.25;
    filter: blur(1.5px);
    background: linear-gradient(45deg, #7f00ff, #00bfff);
    border: 2px solid rgba(127, 0, 255, 0.4);
    box-shadow:
      0 0 15px #7f00ff,
      0 0 30px #00bfff;
  }

  .floating-element {
    width: 100px;
    height: 100px;
    clip-path: none;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 
      0 0 10px #00bfff,
      0 0 20px #7f00ff;
  }

  @media (max-width: 768px) {
    .floating-element {
      width: 80px;
      height: 80px;
      font-size: 2.5rem;
    }
  }

    @media (max-width: 480px) {
      .floating-element {
        width: 45px;
        height: 45px;
        font-size: 1.5rem;
        opacity: 0.35;
        filter: blur(1px);
      }
    }

    @media (max-width: 360px) {
      .floating-element {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
        opacity: 0.35;
        filter: blur(1px);
      }
    }

  .hex1::after { content: "</>" }
  .hex2::after { content: "{}" }
  .hex3::after { content: "()" }
  .hex4::after { content: "#" }
  .hex5::after { content: "//" }
  .hex6::after { content: "</" }
  .hex7::after { content: "@" }
  .hex8::after { content: "=>" }
  
  .circle1::after { content: "*" } 
  .circle2::after { content: "$" } 
  .circle3::after { content: "[]" }
  .circle4::after { content: "<>" }
  .circle5::after { content: "::" }
  .circle6::after { content: "&&" }
  .circle7::after { content: "++" }
  .circle8::after { content: ";" } 

  .hex1 {
    top: 20%;
    left: 15%;
    animation: float1 20s linear infinite;
  }

  .hex2 {
    bottom: 15%;
    right: 20%;
    animation: float2 25s linear infinite;
  }

  .circle1 {
    top: 60%;
    left: 25%;
    animation: float3 22s linear infinite;
  }

  .circle2 {
    top: 30%;
    right: 25%;
    animation: float4 28s linear infinite;
  }

  .hex3 {
    top: 45%;
    left: 55%;
    animation: float5 23s linear infinite;
  }

  .hex4 {
    top: 75%;
    left: 35%;
    animation: float6 26s linear infinite;
  }

  .hex5 {
    top: 15%;
    right: 40%;
    animation: float7 24s linear infinite;
  }

  .circle3 {
    bottom: 25%;
    right: 45%;
    animation: float8 27s linear infinite;
  }

  .circle4 {
    top: 40%;
    left: 10%;
    animation: float9 29s linear infinite;
  }

  .circle5 {
    bottom: 15%;
    left: 50%;
    animation: float10 25s linear infinite;
  }

  .hex6 {
    top: 5%;
    left: 75%;
    animation: float11 27s linear infinite;
  }

  .hex7 {
    bottom: 8%;
    right: 5%;
    animation: float12 24s linear infinite;
  }

  .hex8 {
    top: 85%;
    left: 3%;
    animation: float13 26s linear infinite;
  }

  .circle6 {
    top: 92%;
    right: 15%;
    animation: float14 29s linear infinite;
  }

  .circle7 {
    top: 3%;
    left: 3%;
    animation: float15 23s linear infinite;
  }

  .circle8 {
    top: 45%;
    right: 3%;
    animation: float16 28s linear infinite;
  }

    @media (max-width: 768px) {
      .hex1 { left: 15%; top: 8%; }
      .hex2 { right: 12%; bottom: 15%; }
      .circle1 { left: 22%; top: 75%; }
      .circle2 { right: 18%; top: 22%; }
      .hex3 { left: 75%; top: 45%; }
      .hex4 { left: 8%; top: 88%; }
      .hex5 { right: 25%; top: 5%; }
      .circle3 { right: 68%; bottom: 12%; }
      .circle4 { left: 5%; top: 35%; }
      .circle5 { left: 82%; bottom: 28%; }
      .hex6 { left: 92%; top: 15%; }
      .hex7 { right: 3%; bottom: 3%; }
      .hex8 { left: 45%; top: 92%; }
      .circle6 { right: 42%; top: 82%; }
      .circle7 { left: 2%; top: 2%; }
      .circle8 { right: 88%; top: 58%; }
    }

    @media (max-width: 480px) {
      .hex1 { left: 12%; top: 5%; }
      .hex2 { right: 8%; bottom: 12%; }
      .circle1 { left: 18%; top: 82%; }
      .circle2 { right: 15%; top: 18%; }
      .hex3 { left: 82%; top: 42%; }
      .hex4 { left: 5%; top: 92%; }
      .hex5 { right: 22%; top: 3%; }
      .circle3 { right: 72%; bottom: 8%; }
      .circle4 { left: 3%; top: 32%; }
      .circle5 { left: 88%; bottom: 25%; }
      .hex6 { left: 95%; top: 12%; }
      .hex7 { right: 2%; bottom: 2%; }
      .hex8 { left: 42%; top: 95%; }
      .circle6 { right: 45%; top: 85%; }
      .circle7 { left: 1%; top: 1%; }
      .circle8 { right: 92%; top: 62%; }
    }

  @keyframes float1 {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(100px, 100px) rotate(180deg);
    }
    100% {
      transform: translate(0, 0) rotate(360deg);
    }
  }

  @keyframes float1-tablet {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(60px, 60px) rotate(180deg);
    }
    100% {
      transform: translate(0, 0) rotate(360deg);
    }
  }

  @keyframes float1-mobile {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(40px, 40px) rotate(180deg);
    }
    100% {
      transform: translate(0, 0) rotate(360deg);
    }
  }

  @keyframes float2 {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(-100px, -50px) rotate(-180deg);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg);
    }
  }

  @keyframes float2-tablet {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(-60px, -30px) rotate(-180deg);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg);
    }
  }

  @keyframes float2-mobile {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(-40px, -20px) rotate(-180deg);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg);
    }
  }

  @media (max-width: 768px) {
    .hex1 { animation: float1-tablet 20s linear infinite; }
    .hex2 { animation: float2-tablet 25s linear infinite; }
  }

  @media (max-width: 480px) {
    .hex1 { animation: float1-mobile 20s linear infinite; }
    .hex2 { animation: float2-mobile 25s linear infinite; }
  }

  @keyframes float3 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(50px, -50px) rotate(180deg) scale(1.2);
    }
    100% {
      transform: translate(0, 0) rotate(360deg) scale(1);
    }
  }

  @keyframes float4 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(-50px, 100px) rotate(-180deg) scale(0.8);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg) scale(1);
    }
  }

  @keyframes float5 {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(-70px, 70px) rotate(180deg);
    }
    100% {
      transform: translate(0, 0) rotate(360deg);
    }
  }

  @keyframes float6 {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(80px, -60px) rotate(-180deg);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg);
    }
  }

  @keyframes float7 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(60px, 80px) rotate(180deg) scale(1.1);
    }
    100% {
      transform: translate(0, 0) rotate(360deg) scale(1);
    }
  }

  @keyframes float8 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(-40px, -90px) rotate(-180deg) scale(0.9);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg) scale(1);
    }
  }

  @keyframes float9 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(90px, 40px) rotate(180deg) scale(1.2);
    }
    100% {
      transform: translate(0, 0) rotate(360deg) scale(1);
    }
  }

  @keyframes float10 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(-60px, -40px) rotate(-180deg) scale(0.85);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg) scale(1);
    }
  }

  @keyframes float11 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(-100px, 80px) rotate(180deg) scale(1.15);
    }
    100% {
      transform: translate(0, 0) rotate(360deg) scale(1);
    }
  }

  @keyframes float12 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(-70px, -90px) rotate(-180deg) scale(0.9);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg) scale(1);
    }
  }

  @keyframes float13 {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(120px, -40px) rotate(180deg);
    }
    100% {
      transform: translate(0, 0) rotate(360deg);
    }
  }

  @keyframes float14 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(-80px, -60px) rotate(-180deg) scale(1.2);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg) scale(1);
    }
  }

  @keyframes float15 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(90px, 100px) rotate(180deg) scale(0.8);
    }
    100% {
      transform: translate(0, 0) rotate(360deg) scale(1);
    }
  }

  @keyframes float16 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
      transform: translate(-110px, -30px) rotate(-180deg) scale(1.1);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg) scale(1);
    }
  }

  
  @media (max-width: 768px) {
    .floating-element {
      width: 80px;
      height: 80px;
      font-size: 2.5rem;
    }

    
    .hex1, .hex2, .hex3, .hex4, .hex5, .hex6, .hex7, .hex8,
    .circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .circle7, .circle8 {
      animation-duration: 15s !important;
    }

    
    [class*="float"] {
      transform: scale(0.8);
    }
  }

  @media (max-width: 480px) {
    .floating-element {
      width: 60px;
      height: 60px;
      font-size: 2rem;
    }

    
    .hex1, .hex2, .hex3, .hex4 { display: none; }
    
    .circle1 { top: 10%; left: 10%; }
    .circle2 { top: 10%; right: 10%; }
    .circle3 { bottom: 10%; left: 10%; }
    .circle4 { bottom: 10%; right: 10%; }
    
    
    .hex5, .hex6, .hex7, .hex8,
    .circle5, .circle6, .circle7, .circle8 {
      display: none;
    }
  }

  @media (max-width: 360px) {
    .floating-element {
      width: 50px;
      height: 50px;
      font-size: 1.5rem;
      opacity: 0.2;
    }

    
    .circle1 { top: 5%; left: 5%; }
    .circle2 { top: 5%; right: 5%; }
    .circle3 { bottom: 5%; left: 5%; }
    .circle4 { bottom: 5%; right: 5%; }
  }

  .profile-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    box-shadow:
      0 0 1px #00bfff,
      0 0 10px #7f00ff,
      0 0 25px #7f00ff,
      0 0 40px #00bfff;
    border: 1px solid #7f00ff;
    transition: all 0.3s ease;
  }

  .profile-image:hover {
    box-shadow:
      0 0 15px #7f00ff,
      0 0 30px #00bfff,
      0 0 45px #7f00ff,
      0 0 60px #00bfff;
    transform: scale(1.05);
  }


  h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #7f00ff;
    text-shadow:
      0 0 2px #7f00ff,
      0 0 5px #7f00ff,
      0 0 5px #7f00ff,
      0 0 10px #8a2be2;
  }

  .buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 320px;
  }

  button {
    background: linear-gradient(45deg, #7f00ff, #00bfff);
    border: none;
    border-radius: 12px;
    padding: 15px 25px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    box-shadow:
      0 0 2px #7f00ff,
      0 0 5px #00bfff,
      0 0 10px #7f00ff,
      0 0 20px #00bfff;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  button:hover {
    box-shadow:
      0 0 10px #7f00ff,
      0 0 20px #00bfff,
      0 0 30px #7f00ff,
      0 0 60px #00bfff;
    transform: scale(1.05);
  }

  button svg {
    width: 24px;
    height: 24px;
    fill: white;
    filter: drop-shadow(0 0 2px #00bfff);
  }

  footer {
    margin-top: 40px;
    font-size: 0.9rem;
    color: #555;
  }

  @keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      text-shadow:
        0 0 5px #7f00ff,
        0 0 10px #7f00ff,
        0 0 20px #7f00ff,
        0 0 40px #8a2be2;
      opacity: 1;
    }
    20%, 22%, 24%, 55% {
      text-shadow: none;
      opacity: 0.8;
    }
  }

  h1 {
    animation: flicker 3s infinite;
  }


  .profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
  }


  .buttons {
    margin: 0 auto;
  }

  @media (max-width: 992px) {
    .profile-image {
      width: 200px;
      height: 200px;
    }

    h1 {
      font-size: 2.5rem;
    }

    button {
      font-size: 1rem;
      padding: 12px 20px;
    }
  }

  @media (max-width: 768px) {
    .profile-image {
      width: 150px;
      height: 150px;
    }

    h1 {
      font-size: 2rem;
    }

    button {
      font-size: 0.9rem;
      padding: 10px 18px;
    }
  }