@font-face {
      font-family: "bluescreen";
      src: url("https://axayacatl.neocities.org/fonts/bluescreen/Blue%20Screen.woff") format("woff"),
           url("https://axayacatl.neocities.org/fonts/bluescreen/Blue%20Screen.ttf") format("truetype");
    }

    @font-face {
      font-family: "Rainy Hearts";
      src: url("https://axayacatl.neocities.org/fonts/rainyhearts/rainyhearts.eot");
      src: url("https://axayacatl.neocities.org/fonts/rainyhearts/rainyhearts.eot?#iefix") format("embedded-opentype"),
           url("https://axayacatl.neocities.org/fonts/rainyhearts/rainyhearts.woff") format("woff"),
           url("https://axayacatl.neocities.org/fonts/rainyhearts/rainyhearts.ttf") format("truetype"),
           url("https://axayacatl.neocities.org/fonts/rainyhearts/rainyhearts.otf") format("opentype");
      font-style: normal;
    }

    @keyframes flicker {
      0% { opacity: 0.27861; }
      5% { opacity: 0.34769; }
      10% { opacity: 0.23604; }
      15% { opacity: 0.90626; }
      20% { opacity: 0.18128; }
      25% { opacity: 0.83891; }
      30% { opacity: 0.65583; }
      35% { opacity: 0.67807; }
      40% { opacity: 0.26559; }
      45% { opacity: 0.84693; }
      50% { opacity: 0.96019; }
      55% { opacity: 0.08594; }
      60% { opacity: 0.20313; }
      65% { opacity: 0.71988; }
      70% { opacity: 0.53455; }
      75% { opacity: 0.37288; }
      80% { opacity: 0.71428; }
      85% { opacity: 0.70419; }
      90% { opacity: 0.7003; }
      95% { opacity: 0.36108; }
      100% { opacity: 0.24387; }
    }

    @keyframes textShadow {
      0%, 100% {
        text-shadow: 0.5px 0 1px rgba(0,30,255,0.5), -0.5px 0 1px rgba(255,0,80,0.3), 0 0 3px;
      }
      50% {
        text-shadow: 2.5px 0 1px rgba(0,30,255,0.5), -2.5px 0 1px rgba(255,0,80,0.3), 0 0 3px;
      }
    }

    @keyframes grain {
      0% { transform: translate(0, 0); }
      10% { transform: translate(-1px, -1px); }
      20% { transform: translate(1px, 1px); }
      30% { transform: translate(-1px, 1px); }
      40% { transform: translate(1px, -1px); }
      50% { transform: translate(-1px, 0); }
      60% { transform: translate(1px, 0); }
      70% { transform: translate(0, 1px); }
      80% { transform: translate(0, -1px); }
      90% { transform: translate(1px, 1px); }
      100% { transform: translate(0, 0); }
    }

    body {
      background-image: url('https://axayacatl.neocities.org/images/bgs/numm-min.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      min-height: 100vh;
      overflow-x: hidden;
      cursor: url("https://axayacatl.neocities.org/images/kitty_cursor.png"), auto;
    }

    .twins {
      position: fixed;
      left: 0%;
      bottom: 17%;
    }

    .twins img {
      width: 42vh;
    }

    @keyframes floatDown {
      0% { transform: translateY(0px); }
      50% { transform: translateY(15px); }
      100% { transform: translateY(0px); }
    }

    .floaty {
      position: fixed;
      left: 60%;
      bottom: 30%;
      animation: floatDown 3s ease-in-out infinite;
    }

    .crt {
      animation: textShadow 1.6s infinite;
      position: relative;
      z-index: 2;
    }

    .crt::after {
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(18, 16, 16, 0.1);
      opacity: 0;
      z-index: 2;
      pointer-events: none;
      animation: flicker 0.15s infinite;
    }

    .crt::before {
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                  linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
      background-size: 100% 2px, 3px 100%;
      z-index: 2;
      pointer-events: none;
    }

    .form-container {
      position: relative;
      right: 30%;
      background: #0a0a0a;
      border-radius: 0;
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      width: 80%;
      max-width: 30vw;
      overflow: hidden;
      z-index: 3;
    }

    .form-container::before {
      content: "";
      position: absolute;
      top: -10%;
      left: -10%;
      width: 120%;
      height: 120%;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42mP8z/C/HwAFgwJ/lppZ1AAAAABJRU5ErkJggg==');
      background-repeat: repeat;
      opacity: 0.12;
      z-index: 0;
      pointer-events: none;
      animation: grain 1s steps(8) infinite;
    }

    .form-container h2 {
      font-family: "bluescreen", Arial, sans-serif;
      font-size: 40px;
      color: red;
      text-align: center;
      margin-bottom: 1vw;
    }

    .form-container p {
      color: white;
      font-family: "Rainy Hearts", Arial, sans-serif;
      text-align: center;
      font-size: 22px;
    }

    .form-container input,
    .form-container textarea {
      width: calc(100% - 20px);
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 0;
    }

    .form-container button {
      width: 100%;
      padding: 10px;
      border: none;
      border-radius: 0;
      background-color: grey;
      color: black;
      font-size: 13px;
      cursor: pointer;
      font-family: "Love Glitch", Arial, sans-serif;
    }

    .form-container button:hover {
      background-color: red;
    }

    .form-container img {
      display: block;
      margin: 20px auto 0;
      max-width: 100%;
      height: auto;
    }

    .return-text {
      position: fixed;
      bottom: 5%;
      left: 4%;
      background-color: black;
      color: red;
      padding: 5px;
      font-family: "Bark", sans-serif;
      font-size: 23px;
      cursor: pointer;
      text-decoration: none;
      z-index: 999;
    }

    .return-text:hover {
      text-decoration: none;
    }

    .lucifer {
      position: fixed;
      bottom: 189px;
      right: 450px;
      width: 400px;
      height: 400px;
      background-image: url("https://axayacatl.neocities.org/images/graphics/stickers/sigils/lucifer%20(nyah).png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 0;
      pointer-events: none;
    }

    .message-box {
      margin-top: 15px;
      padding: 12px;
      text-align: center;
      border-radius: 0;
      font-family: "Rainy Hearts", Arial, sans-serif;
      font-size: 18px;
      min-height: 20px;
      display: none;
      animation: messageSlideIn 0.3s ease-out;
    }

    .message-box.success {
      display: block;
      background-color: rgba(0, 255, 0, 0.1);
      border: 1px solid #00ff00;
      color: #00ff00;
      text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    }

    .message-box.error {
      display: block;
      background-color: rgba(255, 0, 0, 0.1);
      border: 1px solid #ff0000;
      color: #ff0000;
      text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }

    @keyframes messageSlideIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
     
      @media (max-width: 1024px) {
        .form-container {
          right: 15%;
          max-width: 50vw;
        }
      }

      @media (max-width: 768px) {
        body {
          justify-content: flex-start;
          align-items: flex-start;
          padding-top: 20px;
          background-attachment: scroll;
          height: auto;
        }

        .form-container {
          position: relative;
          right: 0;
          left: 50%;
          transform: translateX(-50%);
          max-width: 85vw;
          margin: 20px auto;
          width: 85vw;
        }

        .form-container input,
        .form-container textarea {
          width: calc(100% - 20px);
        }

        .floaty {
          position: fixed;
          left: 10%;
          bottom: 20%;
        }

        .floaty img {
          width: 25vh;
        }

        .return-text {
          bottom: 15px;
          left: 10px;
          font-size: 16px;
        }

        .message-box {
          font-size: 14px;
        }
      }

      @media (max-width: 480px) {
        .form-container {
          max-width: 90vw;
          width: 90vw;
          padding: 15px;
        }

        .form-container p {
          font-size: 16px;
        }

        .form-container input,
        .form-container textarea,
        .form-container button {
          font-size: 14px;
          padding: 8px;
        }

        .floaty {
          left: 5%;
          width: 20vh;
        }

        .floaty img {
          width: 20vh;
        }

        .return-text {
          font-size: 14px;
        }

        .message-box {
          font-size: 12px;
          padding: 10px;
        }
      }