body {
            font-family: Arial, sans-serif;
            background-color: #1d2033;
            margin: 0;
            padding: 0;
        }
        .main-title {
            font-size: 2rem; /* Tamanho maior para destaque */
            font-weight: bold; /* Negrito para ênfase */
            color: #4CAF50; /* Cor verde para chamar atenção */
            text-align: center; /* Centraliza o título */
            margin-bottom: 20px; /* Espaço abaixo do título */
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .header {
            display: flex;
            align-items: center;
            justify-content: 10px;
            margin-bottom: 20px;
        }
        .header img {
            margin-right: 15px;
            padding: 20px;
            background: white;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            animation: rotate 5s linear infinite; /* Adiciona a animação */
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
        }
            to {
                transform: rotate(360deg);
            }
        }

        h1 {
            color: #4CAF50;
            margin: 0;
        }
        form {
            margin-bottom: 20px;
        }
        input {
            width: calc(70% - 20px);
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        select {
            width: calc(14% - 20px);
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .buttons-container {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .back-button, .donate-button {
            font-size: 16px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .back-button:hover, .donate-button:hover {
            background-color: #45a049;
        }
        .results {
            margin-top: 20px;
        }
        .result-item {
            background-color: #f9f9f9;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .result-item p {
            margin: 5px 0;
        }
        .user {
            display: inline-block; /* Faz a div se alinhar lado a lado */
            margin-right: 20px; /* Espaço entre as divs */
            text-align: center; /* Alinha o conteúdo centralizado */
            width: 150px; /* Largura fixa para cada div de usuário */
            padding: 10px; /* Adiciona um pouco de espaço interno */
            border: 1px solid #ccc; /* Adiciona uma borda ao redor da div */
            border-radius: 8px; /* Arredonda os cantos */
            background-color: #f9f9f9; /* Cor de fundo */
        }

.user {
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-family: Arial, sans-serif;
}

.user .avatar {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-bottom: 5px;
}

.user .ea-play {
  width: 100px;
  height: auto;
}







.badges img { height: 70px; vertical-align: middle; margin-right: 6px; }


        #response {
            display: flex;
            flex-wrap: wrap; /* Permite que as divs quebrem para a linha seguinte quando necessário */
        }
        .custom-title {
            position: absolute;
            top: 100px;
            color: #333;
            font-size: 18px;
            text-align: center;
            margin-bottom: 20px;
        }
        #player-details {
            margin: 20px;
            padding: 0px;
            background-color: #111827;
            border-radius: 8px;
        }
            /* Usando Flexbox para exibir as seções lado a lado */
        .weapons-section, .info-section {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-between;
        }

        /* Estilo para as armas */
        .weapon {
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 10px;
            width: 30%;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .weapon img {
            margin-bottom: 10px;
        }

        /* Estilo para as informações gerais */
        .info-section {
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        /* Cabeçalhos */
        h3, h4 {
            color: #e2e8f0;
        }

        /* Parágrafos */
        p {
            font-size: 14px;
            color: #fde68a;
        }

        /* Estilo para o erro */
        .error {
            color: red;
            font-weight: bold;
        }
        .webbfan { 
            color: #84cc16; 
            cursor: pointer;
            text-decoration: underline;
        }
        .ban-appeal-btn { 
            color: #9333ea; 
            cursor: pointer;
            text-decoration: underline;
        }
        .kana {
            max-width: 150px; /* Diminui o tamanho da imagem */
            display: none;
            opacity: 0;
            transition: opacity 0.5s;
            margin-right: 50px; /* Move a imagem para a direita */
        }

        .kana.visivel {
            display: block;
            opacity: 1;
        }









        /* Media Queries */
        @media (max-width: 768px) {
        .main-title {
            font-size: 1rem; /* Tamanho maior para destaque */
            font-weight: bold; /* Negrito para ênfase */
            color: #4CAF50; /* Cor verde para chamar atenção */
            text-align: center; /* Centraliza o título */
            margin-bottom: 20px; /* Espaço abaixo do título */
        }

            .custom-title {
                position: absolute;
                top: 147px;
                right: 10;
                color: #333;
                font-size: 14px;
                text-align: center;
                margin-bottom: 20px;
            }
            .container {
                max-width: 100%;
                padding: auto;
            }
            .header {
                flex-direction: column;
                text-align: center;
            }
            .header img {
            margin-right: 0px;
            padding: 20px;
            background: white;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            }
            .back-button, .donate-button {
                font-size: 16px;
                padding: 7px 10px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            h1 {
                font-size: 24px;
            }
/* Estilo para input */
input {
    font-size: 14px;  /* Tamanho da fonte do input */
    padding: 8px;     /* Preenchimento do input */
    margin: 5px 0;    /* Espaçamento entre os inputs */
    border: 1px solid #ccc;  /* Borda do input */
    border-radius: 4px;  /* Borda arredondada */
    width: 100%;  /* Ajuste da largura para ocupar toda a área disponível */
}

/* Estilo para select */
select {
    font-size: 14px;  /* Tamanho da fonte do select */
    padding: 8px;     /* Preenchimento do select */
    margin: 5px 0;    /* Espaçamento entre os selects */
    border: 1px solid #ccc;  /* Borda do select */
    border-radius: 4px;  /* Borda arredondada */
    width: 100%;  /* Ajuste da largura para ocupar toda a área disponível */
}

/* Estilo para button */
button {
    font-size: 14px;  /* Tamanho da fonte do botão */
    padding: 8px 15px;  /* Preenchimento do botão */
    background-color: #4CAF50;  /* Cor de fundo do botão */
    color: white;     /* Cor da fonte do botão */
    border: none;     /* Remover borda */
    border-radius: 4px;  /* Borda arredondada */
    cursor: pointer;  /* Cursor de ponteiro ao passar o mouse */
}

        }

        @media (min-width: 769px) {
            .container {
                max-width: 1500px;
            }
            h1 {
                font-size: 32px;
            }
            input, select, button {
                font-size: 18px;
            }
        }