@font-face {
        font-family: "iransans";
        src: url("../fonts/IRANSANS.TTF") format("truetype");
        font-weight: 400;
        font-style: normal;
      }
      /* falling codes */
      .falling-codes {
        position: fixed;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: -1;
      }

      .falling-snippet {
        position: absolute;
        top: -80px;
        animation: fall 3s linear infinite;
        opacity: 0.85;
      }

      .snippet-inner {
        display: inline-block;
        transform: rotate(90deg);
        font-family: monospace;
        font-size: 14px;
        color: #00ff88;
        text-shadow: 0 0 8px #00ff88;
      }

      @keyframes fall {
        0% {
          transform: translateY(-100px);
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        100% {
          transform: translateY(120vh);
          opacity: 0;
        }
      }
      body {
        margin: 0;
        height: 100vh;
        background: #0b0b0b;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: "iransans";
        color: white;
        overflow: hidden;
      }

      .pixel-glitch {
        animation: glitch 3s infinite;
      }

      .glitch-layer {
        display: inline-block;
        animation: glitch 3s infinite;
      }

      .glitch {
        font-size: 140px;
        font-weight: bold;
        position: relative;
        animation: glitch 3s infinite;
      }

      @keyframes glitch {
        0% {
          color: white;
          transform: scale(1);
          filter: none;
        }

        20% {
          color: #00ffff;
          text-shadow:
            3px 0 red,
            -3px 0 blue;
        }

        30% {
          transform: scale(1.1);
          background-image:
            linear-gradient(
              90deg,
              transparent 50%,
              rgba(255, 255, 255, 0.1) 50%
            ),
            linear-gradient(transparent 50%, rgba(255, 255, 255, 0.1) 50%);
          background-size: 40px 40px;
          -webkit-background-clip: text;
          color: transparent;
        }

        40% {
          color: #ff0055;
          text-shadow:
            -4px 0 cyan,
            4px 0 red;
        }

        50% {
          transform: scale(0.95) skew(5deg);
        }

        60% {
          color: white;
          text-shadow: none;
          background: none;
        }

        100% {
          transform: scale(1);
        }
      }

      .text {
        color: #dad3adc6;
        font-size: 40px;
      }

      a {
        border-radius: 20px;
        padding: 5px 30px;
        background-color: rgba(140, 226, 255, 0.112);
        gap: 10px;
        align-items: center;
        display: flex;
        direction: rtl;
        text-decoration: none;
        color: inherit;
        outline: none;
        border: none;
        color: aquamarine;
        margin-top: 20px;
      }

      svg{
        stroke: aquamarine;
        width: 20px;
        height: 20px;
      }

      .warning-box {
        position: relative;
        padding: 0px 100px;
        font-size: 20px;
        color: #ffffff;
        background: #111;
        border-radius: 10px;
        border-right: 10px solid #ffcc00;
        font-weight: bold;
        overflow: hidden;
        z-index: 10;
        margin-top: 10px;
      }

      .warning-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          45deg,
          #ffcc00 0px,
          #ffcc00 6px,
          #000 6px,
          #000 12px
        );
        opacity: 0.2;
        z-index: -1;
      }

      .warning-box::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 0, 0, 0.1);
        animation: hazardPulse 2s infinite;
        z-index: -1;
      }

      @keyframes hazardPulse {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0.35;
        }
        100% {
          opacity: 0;
        }
      }