::-webkit-scrollbar {
      display: none;
    }
    html,
    body {
      scrollbar-width: none;
    }
    body {
      background: url("https://i.imgur.com/z4guq1U.jpeg") no-repeat center center fixed;
      background-size: cover;
      color: white;
      text-align: center;
      font-family: Arial;
      padding: 20px;
      margin: 0;
    }
    @media (max-width: 600px) {
      body {
      background: url("https://i.imgur.com/tdiVvNP.jpeg") no-repeat center center;
      background-size: cover;
      background-attachment: scroll;
      min-height: 100vh;
      }
    }
    textarea {
      width: 80%;
      height: 100px;
      margin-bottom: 10px;
      font-size: 16px;
      padding: 10px;
      border-radius: 8px;
      background: #333;
      border: 2px solid #00fbff;
      color: #00fff7;
    }
      .container {
        max-width: 500px;
        margin: auto;
      }
    input, button {
      margin: 5px;
      padding: 10px;
      font-size: 16px;
    }
    canvas {
      margin-top: 20px;
      border: 1px solid #555;
      width: 100%;
      height: auto;
      max-width: 100%;
    }
      button {
        background: #333;
        color: #00fbff;
        border: 2px solid #00fbff;
        font-weight: bold;
        margin-top: 10px;
        padding: 10px;
        border-radius: 8px;
        cursor: pointer;
      }
      button:hover {
        background: #00FBFF;
        color: black;
        border-color: #00FBFF;
      }
      input[type="color"] {
        width: 60px;
        height: 40px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        background: none;
      }
      input[type="color"]::-webkit-color-swatch,
      input[type="color"]::-moz-color-swatch {
        border-radius: 8px;
        border: 2px solid #333;
      }
      .checkboxBox {
        display: center;
        align-items: center;
        gap: 10px;
        margin: 10px 0;
        cursor: pointer;
      }
      .checkboxBox span {
        color: #00fbff;
      }
      .checkboxBox input {
        width: auto;
      }
      .checkboxBox input:checked ~ span {
        color: #c800ff;
        text-shadow: 0 0 5px #c800ff;
      }
      .checkboxBox label {
        cursor: pointer;
        color: #00fbff;
        font-size: 14px;
      }
      select {
        width: 100%;
        padding: 10px;
        margin: 10px;
        width: 100%;
        max-width: 300px;
        color: #00fbff;
        border: 2px solid #00d5ff;
        background: #333;
        border-radius: 8px;
      }
      .inputBox {
        position: relative;
        width: 100%;
        max-width: 300px;
        margin: 18px auto;
      }
      .inputBox input {
        width: 100%;
        padding: 12px;
        background: #333;
        border: 2px solid #00d5ff;
        color: #00d5ff;
        border-radius: 8px;
        outline: none;
      }
      .inputBox span {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #00d5ff;
        pointer-events: none;
        transition: 0.3s;
      }
      label {
        display: flexbox;
        margin-top: 20px;
        font-size: 16px;
        color: #00fbff; 
      }
      h1 {
        color: #00fbff;
      }
      p{
        color: #00fbff;
      }
      .inputBox input:focus ~ span,
      .inputBox input:valid ~ span {
        top: -8px;
        font-size: 12px;
        padding: 0 5px;
        color: #00d5ff;
      }
      .about-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #333;
        color: #00fbff;
        border: 2px solid #00fbff;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.3s;
        z-index: 1000;
      }
      .about-btn:hover {
        background: #00fbff;
        color: black;
      }
      .about-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000000cc;
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: 0.3s;
      }
      .about-panel.active {
        opacity: 1;
        pointer-events: all;
      }
      .about-content {
        background: #1f1f1f;
        padding: 25px;
        border-radius: 15px;
        text-align: center;
        width: 90%;
        max-width: 300px;
        border: 2px solid #00fbff;
      }
      .about-content h2 {
        color: #d000ff;
      }
          .links{
        display:grid;
        grid-template-columns:repeat(4, 60px);
        justify-content:center;
        gap:15px;
        margin:20px 0;
        padding-bottom:40px;
    }
    .links a{
        text-decoration:none;
        color:#00fbff;
        background:#333;
        width:auto;
        height:auto;
        margin:auto;
        align-items:center;
        justify-content:center;
        display:flex;
        font-size:18px;
        transition:0.3s;
        position:relative;
    }
    .links a::after{
        content:attr(title);
        position:absolute;
        bottom:75px;
        left:50%;
        transform:translateX(-50%) translateY(5px);
        background:#111;
        color:#00fbff;
        padding:6px 10px;
        border-radius:8px;
        font-size:12px;
        white-space:nowrap;
        opacity:0;
        transition:0.3s;
        pointer-events:none;
        border:1px solid #00fbff;
    }
    .links a:hover::after{
        opacity:1;
         transform:translateX(-50%) translateY(0);
    }
    .links a:hover {
        background:#00fbff;
        color:#111;
        transform:scale(1.08);
    }
      .control-tamano {
        display: inline-flex;
        align-items: center;
        background: #2a2a2a;
        border-radius: 10px;
        overflow: hidden;
      }

      .control-tamano input {
        width: 60px;
        text-align: center;
        border: none;
        background: transparent;
        color: white;
        font-size: 16px;
        outline: none;
      }

      .control-tamano button {
        background: #444;
        border: none;
        color: white;
        padding: 10px;
        cursor: pointer;
        font-size: 18px;
      }

      .control-tamano button:hover {
        background: #666;
      }