::-webkit-scrollbar{
      width:8px;
    }
    
    ::-webkit-scrollbar-track{
      background:#0f172a;
    }
    
    ::-webkit-scrollbar-thumb{
      background:#30084c;
      border-radius:10px;
    }
    
    ::-webkit-scrollbar-thumb:hover{
      background:#30084c;
    }
    
    html,
    body{
      scrollbar-width:thin;
      scrollbar-color:#30084c #0f172a;
    }
    
    body{
      -ms-overflow-style:auto;
    }
    body {
      font-family: Arial, sans-serif;
      background: #0f172a;
      color: white;
      margin: 0;
      padding: 15px;
    }
    @media (max-width: 600px) {
        body {
          padding: 10px;
        }
      }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 15px;
    }
    .card {
      background: #30084c;
      border-radius: 12px;
      border: 2px solid #c800ff;
      overflow: hidden;
      text-align: center;
      transition: transform 0.2s;
    }
    .card:hover {
      transform: scale(1.05);
    }
    img {
      width: 100%;
      height: auto;
      display: block;
    }
    .title {
      padding: 10px;
      font-size: 14px;
      color:#ff7700;
      display: block;
      text-decoration: none;
    }
    select {
      width: 100%;
      padding: 12px;
      background: #333;
      border: 2px solid #c800ff;
      color: #129395f1;
      border-radius: 8px;
    }
    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;
    }
    .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: #333;
    }
    .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 h3 {
      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);
    }
    h1 {
      text-align: center;
      margin-bottom: 20px;
      color:#9200fa
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
      color:#00fa1d
    }
    p{
        color: #7c0397;
    }
    .titulo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .logo {
      width: 28px;
      height: 28px;
      transition: all 0.25s ease;
      cursor: pointer;
    }
    .logo:hover {
      transform: scale(1.2);
      filter: brightness(1.3);
    }
    .titulo-link {
      font-size: 24px;
      font-weight: bold;
      text-decoration: none;
      transition: all 0.25s ease;
      cursor: pointer;
    }
    .buscador-container{
      width:100%;
      margin-bottom:20px;
    }
    #buscador{
      width:100%;
      box-sizing:border-box;
      padding:12px 16px;
      border-radius:12px;
      border:2px solid #c800ff;
      background:#30084c;
      color:#ff7700;
      font-size:16px;
      outline:none;
    }
    #buscador::placeholder{
      color:#ff770099;
    }
    #buscador:focus{
      box-shadow:0 0 10px #c800ff;
    }
    .card{
    position:relative;
    }
    .identificador{
      position:absolute;
      top:8px;
      left:8px;
      padding:4px 8px;
      border-radius:8px;
      font-size:11px;
      font-weight:bold;
      color:white;
      z-index:2;
    }
    .identificador.twitch{
      background:#9146FF;
    }
    .identificador.kick{
      background:#53FC18;
      color:black;
    }