<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/logosportclub.png?updatedAt=1733863823866" type="image/png">
    <title>Retro E-Sports</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <meta name="description" content="Fundado em 2023, somos um time de futebol focado no cenário competitivo. Conheça nossa escalação e acompanhe todas as atualizações, conquistas e novidades do time. Fique por dentro de tudo nas nossas redes sociais.">
    <meta name="keywords" content="futebol, time, retro e-sport, Retro E-Sports, FC25, Timefc25, campeonatofc25, retroesports, antagonista, antagonistaoficial">
    <meta name="author" content="Retro E-Sports (FC25)">
    <meta http-equiv="content-language" content="pt-BR">
    <!-- Open Graph -->
    <meta property="og:title" content="Retro E-Sports">
    <meta property="og:description" content="Fundado em 2023, somos um time de futebol focado no cenário competitivo. Conheça nossa escalação e acompanhe todas as atualizações, conquistas e novidades do time. Fique por dentro de tudo nas nossas redes sociais.">
    <meta property="og:image" content="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/logosportclub.png?updatedAt=1733863823866">
    <meta property="og:url" content="https://antagonistaoficial.site/retroesports.html">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="pt_BR">
    <meta name="google-site-verification" content="Pve9Es7bYxxtNTczU5xK0QYs40l3kf9b39QdzEm1ks8" />
    <script>
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        });
    </script>

    <script>
        document.addEventListener('keydown', function (e) {

            if (e.keyCode == 123) {
                e.preventDefault();
            }

            if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
                e.preventDefault();
            }

            if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
                e.preventDefault();
            }
            if (e.ctrlKey && e.shiftKey && e.keyCode == 75) {
                e.preventDefault();
            }
            if (e.ctrlKey && e.keyCode == 85) {
                e.preventDefault();
            }
        });
    </script>

    <script>
        document.addEventListener('keydown', function (e) {

            if (e.keyCode == 123) {
                e.preventDefault();
            }

            if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
                e.preventDefault();
            }

            if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
                e.preventDefault();
            }
        });
    </script>
    <style>
        /* Estilos Gerais */
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #000;
            /* Cor de fundo caso a imagem não carregue */
            color: #fff;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            background-image: url('https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/pexels-photo-61135.webp?updatedAt=1733863821462');
            /* Adiciona a imagem de fundo */
            background-size: cover;
            /* Faz a imagem cobrir toda a tela */
            background-position: center;
            /* Centraliza a imagem */
            background-repeat: no-repeat;
            /* Evita a repetição da imagem */
        }

        header,
        footer {
            background-color: #090249de;
            text-align: center;
            padding: 20px;
        }

        main {
            flex: 1;
            padding: 20px;
            text-align: center;
        }

        h1,
        h2 {
            color: #fff;
            margin: 0;
        }

        /* Título do Cabeçalho */
        .header-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-wrap: nowrap;
            /* Impede que os itens se quebrem na versão desktop */
        }

        /* Logo do Cabeçalho */
        .header-logo {
            width: 50px;
            height: 50px;
        }

        /* Responsividade para o Cabeçalho no Mobile */
        @media (max-width: 768px) {
            .header-title {
                flex-direction: column;
                /* Alinha o título e logo verticalmente */
                gap: 1px;
                /* Menor espaço entre logo e título */
            }

            .header-logo {
                width: 60px;
                /* Diminui o tamanho do logo no mobile */
                height: 60px;
                /* Diminui o tamanho do logo no mobile */
            }
        }

        /* Seção de Informações */
        .info,
        .team {
            margin: 30px auto;
            max-width: 900px;
            padding: 30px;
            background-color: #04033873;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(255, 209, 3, 0.425);
            text-align: left;
            font-size: 16px;
            line-height: 1.6;
        }

        /* Títulos */
        .info h2 {
            font-size: 28px;
            margin-bottom: 15px;
            color: #f2f2f2;
            text-align: center;
        }

        /* Parágrafos e Listas */
        .info p {
            color: #ddd;
            margin-bottom: 15px;
            font-size: 18px;
        }

        /* Lista de requisitos */
        .info ul {
            list-style-type: none;
            padding-left: 0;
            margin-bottom: 20px;
        }

        .info ul li {
            background-color: #3333339c;
            margin: 10px 0;
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 18px;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: background-color 0.3s;
        }

        .info ul li:hover {
            background-color: #413c02c5;
        }

        /* Ícone para lista */
        .info ul li::before {
            content: "✔";
            color: #ffcc00;
            font-size: 22px;
        }

        /* Links */
        .info a {
            color: #ffcc00;
            text-decoration: none;
            font-weight: bold;
        }

        .info a:hover {
            text-decoration: underline;
        }

        /* Botão de Escalação */
        .button-container {
            text-align: center;
            margin: 20px 0;
        }

        .button {
            background-color: #242423b0;
            color: #fff;
            padding: 12px 24px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .button:hover {
            background-color: #413c02c5;
        }

        /* Imagem e Lista de Reservas */
        #escalacao,
        #reservas {
            display: none;
            text-align: center;
            margin-top: 20px;
        }

        #escalacao img {
            width: 100%;
            max-width: 600px;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        /* Ajuste de Layout da Lista de Reservas */
        #reservas ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            list-style: none;
            padding: 0;
            margin: 15px 0;
        }

        #reservas ul li {
            background-color: #333;
            margin: 8px;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 14px;
            transition: transform 0.2s;
            max-width: 150px;
            /* Limita o tamanho de cada item */
            text-align: center;
            /* Alinha o texto no centro */
        }

        #reservas ul li:hover {
            transform: scale(1.05);
            background-color: #0000007e;
        }

        /* Estilos da Seção de Elenco */
        .elenco {
            margin: 30px auto;
            max-width: 920px;
            padding: 20px;
            background-color: #04033873;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(255, 209, 3, 0.425);
            text-align: center;
        }

        .elenco h2 {
            font-size: 28px;
            color: #f2f2f2;
            margin-bottom: 20px;
        }

        /* Estilos da Seção de Elenco */
        .elenco {
            margin: 30px auto;
            max-width: 920px;
            padding: 20px;
            background-color: #04033873;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(255, 209, 3, 0.425);
            text-align: center;
        }

        .elenco h2 {
            font-size: 28px;
            color: #f2f2f2;
            margin-bottom: 20px;
        }

        /* Container de rolagem horizontal */
        .elenco-container {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding: 40px;
            scroll-behavior: smooth;
        }

        .elenco-container::-webkit-scrollbar {
            height: 8px;
        }

        .elenco-container::-webkit-scrollbar-thumb {
            background-color: #f8e10c9d;
            border-radius: 4px;
        }

        .jogador {
            flex: 0 0 auto;
            width: 200px;
            /* Largura fixa do retângulo */
            height: 280px;
            /* Altura fixa do retângulo */
            text-align: center;
            color: #fff;
        }

        .jogador img {
            width: 100%;
            /* Preenche a largura do contêiner */
            height: 100%;
            /* Preenche a altura do contêiner */
            border-radius: 8px;
            /* Bordas levemente arredondadas */
            border: 2px solid #ffcc00;
            object-fit: cover;
            /* Ajusta a imagem dentro do retângulo */
            transition: transform 0.3s;
        }

        .jogador:hover img {
            transform: scale(1.05);
        }

        .jogador p {
            margin-top: 8px;
            font-size: 20px;
        }

        /* Rodapé */
        footer {
            font-size: 14px;
            position: relative;
            padding: 15px 0;
            border-top: 1px solid #444;
        }

        .social-media {
            margin-bottom: 10px;
        }

        .group-info {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #aaa;
        }

        .group-info a {
            color: #aaa;
            text-decoration: none;
            margin-left: 5px;
        }

        /* Estilo do rodapé */
        footer {
            font-size: 14px;
            position: relative;
            padding: 15px 0;
            border-top: 1px solid #444;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100px;
            /* Garantir que o rodapé tenha altura mínima */
        }

        /* Estilo do GIF no Rodapé */
        .footer-gif {
            width: 25px;
            margin-right: 5px;
            animation: rotation 10s infinite linear;
        }

        /* Links Sociais */
        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        /* Responsividade para o Rodapé no Mobile */
        @media (max-width: 768px) {
            footer {
                padding: 20px;
            }

            .footer-gif {
                width: 30px;
                /* Aumenta o tamanho do GIF para o mobile */
            }
        }


        /* Links Sociais */
        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        /* Título da seção de Links Sociais */
        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .social-links a {
            color: #fff;
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: #0000006e;
            transition: background-color 0.3s;
        }

        .social-links a:hover {
            background-color: #413c02c5;
        }

        /* Ícones dos Links Sociais */
        .social-links i {
            font-size: 18px;
        }

        /* Animação de Rotação */
        @keyframes rotation {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* Responsividade - Mobile */
        @media (max-width: 768px) {

            .info,
            .team {
                max-width: 100%;
                padding: 15px;
            }

            #reservas ul li {
                max-width: 100px;
                /* Limita o tamanho dos itens no mobile */
            }

            .button-container {
                margin: 20px auto;
            }

            .social-links {
                flex-direction: column;
                gap: 10px;
            }
        }

        /* Player de Música */
        .music-player-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 0 10px;
        }

        /* Player de Música */
        .music-player {
            width: 90%;
            /* Aumentar a largura do player na versão PC */
            max-width: 900px;
            /* Ajustar o tamanho máximo */
            background: linear-gradient(145deg, #0d0d3f73, #010133);
            box-shadow: 0 10px 20px rgba(231, 197, 4, 0.5);
            border-radius: 20px;
            padding: 30px;
            /* Aumentar o padding */
            text-align: center;
            color: #fff;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }

        /* Imagem do Player de Música */
        .music-player img {
            width: 100%;
            max-width: 250px;
            /* Aumentar a imagem */
            border-radius: 15px;
            margin-bottom: 20px;
            /* Aumentar a margem */
            animation: pulse 4s infinite;
        }

        /* Animação de pulso para imagem */
        @keyframes pulse {

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

            50% {
                transform: scale(1.05);
            }
        }

        .music-player h2 {
            font-size: 2rem;
            /* Aumentar o tamanho do título */
            color: #ffd9009c;
            margin: 15px 0;
        }

        .music-player p {
            font-size: 1.1rem;
            /* Aumentar o tamanho da descrição */
            color: #ccccff;
            margin-bottom: 20px;
            /* Aumentar a margem */
        }

        .controls {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 20px 0;
            /* Aumentar a margem */
        }

        .controls button {
            background: none;
            /* Remover o fundo padrão */
            border: none;
            /* Remover a borda padrão */
            padding: 5px;
            /* Ajuste de espaçamento */
            cursor: pointer;
            border-radius: 50%;
            /* Para manter o botão redondo */
            transition: transform 0.2s ease, background-color 0.3s ease;
        }

        .controls button img {
            width: 40px;
            /* Ajuste o tamanho do ícone */
            height: 40px;
            display: block;
            /* Garantir que a imagem se comporte como bloco */
            margin: 0 auto;
            /* Centralizar a imagem */
        }

        .controls button:hover {
            transform: scale(1.1);
            /* Efeito de zoom ao passar o mouse */
        }

        .controls button:active {
            transform: scale(0.95);
            /* Efeito de clique */
        }

        .progress-container {
            width: 100%;
            background: #001244;
            height: 8px;
            /* Aumentar a altura */
            border-radius: 5px;
            margin: 15px 0;
            /* Aumentar a margem */
            position: relative;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, #ffd9009c, #ffdd44);
            border-radius: 5px;
            transition: width 0.3s ease;
        }

        .time {
            display: flex;
            justify-content: space-between;
            font-size: 1rem;
            /* Aumentar o tamanho da fonte */
            color: #ccccff;
        }

        .wave {
            position: absolute;
            bottom: -25px;
            /* Ajuste para o efeito de onda */
            left: 0;
            width: 100%;
            height: 50px;
            background: url('https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/logosportclub.png?updatedAt=1733863823866') repeat-x;
            animation: wave-animation 5s linear infinite;
            opacity: 0.5;
        }

        @keyframes wave-animation {
            from {
                background-position: 0;
            }

            to {
                background-position: 200px;
            }
        }

        /* Controle de volume */
        .volume-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            /* Aumentar a margem */
        }

        .volume-icon img {
            width: 40px;
            /* Ajuste o tamanho da imagem */
            height: 40px;
            display: block;
            margin: 0 auto;
            cursor: pointer;
            transition: transform 0.2s ease, opacity 0.3s ease;
        }

        .volume-icon img:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }


        .volume-bar {
            width: 100%;
            max-width: 240px;
            /* Aumentar o tamanho da barra de volume */
            height: 12px;
            /* Aumentar a altura */
            background: #1a1a2e;
            border-radius: 10px;
            position: relative;
            cursor: pointer;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .volume-bar input {
            width: 100%;
            background: transparent;
            appearance: none;
            height: 100%;
            border-radius: 10px;
            transition: background 0.3s ease;
        }

        .volume-bar input::-webkit-slider-runnable-track {
            background: #ffd9009c;
            border-radius: 10px;
        }

        .volume-bar input::-webkit-slider-thumb {
            background: #ffdd44;
            border: 2px solid #1a1a2e;
            border-radius: 50%;
            width: 18px;
            /* Aumentar o botão de volume */
            height: 18px;
            cursor: pointer;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        .volume-bar input::-webkit-slider-thumb:hover {
            transform: scale(1.3);
            background-color: #ffd9009c;
        }

        .volume-bar input:focus {
            outline: none;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .music-player {
                padding: 15px;
            }

            .controls button {
                width: 45px;
                /* Botões menores */
                height: 45px;
                font-size: 1.1rem;
            }

            .music-player h2 {
                font-size: 1.4rem;
            }

            .music-player p {
                font-size: 0.85rem;
            }
        }
    </style>
    <script>
        function toggleEscalacao() {
            var escalaImage = document.getElementById("escalacao");
            var reservasList = document.getElementById("reservas");
            var isHidden = escalaImage.style.display === "none";

            escalaImage.style.display = isHidden ? "block" : "none";
            reservasList.style.display = isHidden ? "block" : "none";
        }
    </script>
</head>

<body>

    <header>
        <div class="header-title">
            <img class="header-logo" src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/logosportclub.png?updatedAt=1733863823866" alt="Logo Retro E-Sports">
            <h1>Retro E-Sports (FC25)</h1>
        </div>
    </header>
    <main>
        <!-- Adicione isso no final do body -->
        <div class="music-player">
            <div class="wave"></div>
            <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/logosportclub.png?updatedAt=1733863823866" alt="Capa do Álbum">
            <h2>RETRO E-SPORTS</h2>
            <p>GRUPO ANTAGONISTA</p>
            <audio id="audio" src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/retro-e-sports.mp3?updatedAt=1733863835121" preload="auto"></audio>

            <div class="controls">
                <button id="prev" title="Anterior">
                    <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/anteriorfutebol.png?updatedAt=1733863823205" alt="Anterior">
                </button>
                <button id="play-pause" title="Play/Pause">
                    <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/playfutebol.png?updatedAt=1733863823027" alt="Play/Pause">
                </button>
                <button id="next" title="Próxima">
                    <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/proximofutebol.png?updatedAt=1733863821218" alt="Próxima">
                </button>
            </div>
            <div class="progress-container">
                <div class="progress-bar" id="progress-bar"></div>
            </div>
            <div class="time">
                <span id="current-time">0:00</span>
                <span id="total-duration">0:00</span>
            </div>
            <div class="volume-container">
                <span class="volume-icon">
                    <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/volumefutebol.png?updatedAt=1733863821221" alt="Volume" id="volume-icon">
                </span>
                <div class="volume-bar">
                    <input type="range" id="volume" min="0" max="1" step="0.01" value="1">
                </div>
            </div>
        </div>
        <script>
            const audio = document.getElementById("audio");
            const playPauseBtn = document.getElementById("play-pause");
            const prevBtn = document.getElementById("prev");
            const nextBtn = document.getElementById("next");
            const progressBar = document.getElementById("progress-bar");
            const progressContainer = document.querySelector(".progress-container");
            const currentTimeEl = document.getElementById("current-time");
            const totalDurationEl = document.getElementById("total-duration");
            const volumeControl = document.getElementById("volume");

            // Lista de músicas
            const playlist = [
                { src: "https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/retro-e-sports.mp3?updatedAt=1733863835121", title: "Retro E-Sports", artist: "GRUPO ANTAGONISTA" },
                { src: "https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/%C3%89-DE-UM-PROTAGONISTA-QUE-O-TIME-DO-POVO-PRECISA.mp3?updatedAt=1733863833634", title: "PROTAGONISTA DO TIME DO POVO", artist: "MAYK" },
            ];

            let currentTrackIndex = 0;

            // Atualiza informações do player e carrega música
            function loadTrack(index) {
                const track = playlist[index];
                audio.src = track.src;
                document.querySelector("h2").textContent = track.title;
                document.querySelector("p").textContent = track.artist;
                audio.load();
            }

            // Reproduz a música atual
            function playTrack() {
                audio.play();
                playPauseBtn.innerHTML = '<img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/pausefutebol.png?updatedAt=1733863821606" alt="Pause">';
            }

            // Pausa a música atual
            function pauseTrack() {
                audio.pause();
                playPauseBtn.innerHTML = '<img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/playfutebol.png?updatedAt=1733863823027" alt="Play">';
            }

            // Alterna entre play e pause
            playPauseBtn.addEventListener("click", () => {
                if (audio.paused) {
                    playTrack();
                } else {
                    pauseTrack();
                }
            });

            // Avança para a próxima música
            nextBtn.addEventListener("click", () => {
                currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
                loadTrack(currentTrackIndex);
                playTrack();
            });

            // Volta para a música anterior
            prevBtn.addEventListener("click", () => {
                currentTrackIndex =
                    (currentTrackIndex - 1 + playlist.length) % playlist.length;
                loadTrack(currentTrackIndex);
                playTrack();
            });

            // Atualiza progresso e duração
            audio.addEventListener("timeupdate", () => {
                const progressPercent = (audio.currentTime / audio.duration) * 100;
                progressBar.style.width = `${progressPercent}%`;

                const currentMinutes = Math.floor(audio.currentTime / 60);
                const currentSeconds = Math.floor(audio.currentTime % 60);
                const totalMinutes = Math.floor(audio.duration / 60);
                const totalSeconds = Math.floor(audio.duration % 60);

                currentTimeEl.textContent = `${currentMinutes}:${currentSeconds.toString().padStart(2, "0")}`;
                totalDurationEl.textContent = isNaN(totalMinutes) ? "0:00" : `${totalMinutes}:${totalSeconds.toString().padStart(2, "0")}`;
            });

            // Permite clicar na barra de progresso para alterar o tempo
            progressContainer.addEventListener("click", (e) => {
                const width = progressContainer.clientWidth;
                const clickX = e.offsetX;
                const duration = audio.duration;
                audio.currentTime = (clickX / width) * duration;
            });

            // Controla o volume
            volumeControl.addEventListener("input", () => {
                audio.volume = volumeControl.value;
            });

            // Avança automaticamente para a próxima música ao terminar a atual
            audio.addEventListener("ended", () => {
                nextBtn.click();
            });

            // Inicializa o player com a primeira música da playlist
            loadTrack(currentTrackIndex);

        </script>
        <!--fimmmm-->
        <section class="info">
            <h2>Informações</h2>
            <p>Fundado em 2023, somos um time de futebol focado no cenário competitivo. Conheça nossa escalação e
                acompanhe todas as atualizações, conquistas e novidades do time. Fique por dentro de tudo nas nossas
                redes sociais.</p>
        </section>
        <section class="team">
            <h2>Junte-se às nossas Comunidades</h2>
            <div class="social-links">
                <a href="https://www.instagram.com/retro_e_sports/" target="_blank"><i
                        class="fab fa-instagram"></i>Instagram</a>
                <a href="https://discord.gg/7xMd6uJBeM" target="_blank"><i class="fab fa-discord"></i>Servidor do
                    Discord</a>
                <a href="https://chat.whatsapp.com/Kr90XNmdqhOKZdni9i4RUh" target="_blank"><i
                        class="fab fa-whatsapp"></i>Comunidade no WhatsApp</a>
            </div>
        </section>

        <div class="button-container">
            <button class="button" onclick="toggleEscalacao()">Ver Escalação do Time</button>
        </div>

        <section id="escalacao" class="info">
            <h2>Escalação</h2>
            <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/escala%C3%A7%C3%A3o.png?updatedAt=1733863822190" alt="Escalação do Time">
        </section>

        <section id="reservas" class="info">
            <h2>Reservas</h2>
            <ul>
                <li>BOT</li>
                <li>BOT</li>
                <li>BOT</li>
                <li>BOT</li>
                <li>BOT</li>
                <li>BOT</li>
                <li>BOT</li>
            </ul>
        </section>
        <section class="elenco">
            <h2>Elenco</h2>
            <div class="elenco-container">
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/time/Captura%20de%20Tela%20(1164).png" alt="Jogador 1">
                    <p>Mayk</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/time/lielton.jpg?updatedAt=1731520380127" alt="Jogador 2">
                    <p>Lielton</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/time/IMG-20241116-WA0094.jpg" alt="Jogador 3">
                    <p>Carlos</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/time/d2b63716-c147-48b6-beb0-b4a1f69e2790.png?updatedAt=1731790654639" alt="Jogador 7">
                    <p>Jngamer</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/time/20241116_104148(1).jpg" alt="Jogador 4">
                    <p>Oculto.fx</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/time/IMG_3155.jpg" alt="Jogador 5">
                    <p>Gerson</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/time/IMG_0808(1).jpg?updatedAt=1731780534653" alt="Jogador 6">
                    <p>KaioSoares99</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/imagemjogador2.png?updatedAt=1733863822123" alt="Jogador 8">
                    <p>Bot</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/imagemjogador2.png?updatedAt=1733863822123" alt="Jogador 9">
                    <p>Bot</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/imagemjogador2.png?updatedAt=1733863822123" alt="Jogador 10">
                    <p>Bot</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/imagemjogador2.png?updatedAt=1733863822123" alt="Jogador 11">
                    <p>Bot</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/imagemjogador2.png?updatedAt=1733863822123" alt="Jogador 12">
                    <p>Bot</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/imagemjogador2.png?updatedAt=1733863822123" alt="Jogador 13">
                    <p>Bot</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/imagemjogador2.png?updatedAt=1733863822123" alt="Jogador 14">
                    <p>Bot</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/imagemjogador2.png?updatedAt=1733863822123" alt="Jogador 15">
                    <p>Bot</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/imagemjogador2.png?updatedAt=1733863822123" alt="Jogador 16">
                    <p>Bot</p>
                </div>
                <div class="jogador"><img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/imagemjogador2.png?updatedAt=1733863822123" alt="Jogador 17">
                    <p>Bot</p>
                </div>
            </div>
        </section>
        <section class="info">
            <h2>Como Entrar no Time</h2>
            <p>Para fazer parte do Retro E-Sports, você precisa:</p>
            <ul>
                <li>Ter mais de 18 anos</li>
                <li>Ser um jogador comprometido e responsável</li>
                <li>Ter experiência em competições</li>
                <li>Ser capaz de trabalhar bem em equipe</li>
            </ul>
            <p>Entre em contato conosco para mais informações sobre o processo de inscrição!</p>
        </section>
    </main>
    <footer>
        <div class="social-media">
            <p>Nos acompanhe no Instagram e faça parte das nossas comunidades!</p>
            <p>Todos os direitos reservados © Retro E-Sports - 2024.</p>
        </div>
        <div class="group-info">
            <img class="footer-gif"
                src="https://ik.imagekit.io/2cs1xx8pd/gif-grande-unscreen.gif?updatedAt=1725309865889"
                alt="Antagonista">
            <span>Grupo Antagonista - <a href="https://antagonistaoficial.site"
                    target="_blank">antagonistaoficial.site</a></span>
        </div>
    </footer>
</body>

</html>