/* Importando a fonte Press Start 2P do Google Fonts  */
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        /* Estilos CSS para o título */
        h1 {
            text-align: center; /* Centralizando o título */
            font-family: 'Press Start 2P', cursive; /* Usando a fonte Press Start 2P */
            position: relative; /* Permitindo sobreposição */
            z-index: 1; /* Certificando-se de que o texto esteja à frente da imagem de fundo */
        }

        /* Estilos CSS para a div pai das figuras */
        .jogos-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Distribui as figuras em 3 colunas com tamanhos iguais */
            gap: 20px; /* Espaçamento entre as figuras */
            padding: 20px; /* Adiciona um espaço interno */
            margin: 0 auto; /* Centraliza o container */
            max-width: 1000px; /* Define a largura máxima do container */
            box-sizing: border-box; /* Garante que o padding não aumente a largura do container */
        }

        /* Estilos CSS para a imagem de fundo */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('img/background.jpg'); /* URL da imagem de fundo */
            background-size: cover;
            background-position: center;
            filter: blur(5px); /* Efeito desbotado */
            z-index: -1; /* Garantindo que a imagem de fundo esteja atrás de todo o conteúdo */
        }

        /* Estilos CSS para as figuras */
        .jogo {
            position: relative; /* Necessário para o efeito de transição */
            cursor: pointer;
            height: 200px; /* Altura fixa para as figuras */
            overflow: hidden; /* Para manter a sombra dentro do contêiner */
            border-radius: 10px; /* Borda arredondada */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
            text-align: center; /* Centralizando a imagem */
            z-index: 1; /* Certificando-se de que as figuras estejam à frente da imagem de fundo */
        }
        .jogo img {
            width: 100%; /* As imagens ocuparão toda a largura do contêiner */
            height: 100%; /* Preenchendo toda a altura do contêiner */
            object-fit: cover; /* Mantendo proporções e cortando se necessário */
            transition: transform 0.3s ease; /* Adicionando efeito de transição */
        }
        .jogo:hover img {
            transform: scale(1.1); /* Aumentando o tamanho da imagem quando o cursor estiver sobre ela */
        }
        .jogo p {
            position: absolute; /* Posicionamento absoluto para sobrepor a imagem */
            bottom: 10px; /* Distância do texto em relação ao fundo do contêiner */
            left: 0; /* Alinhando o texto à esquerda */
            width: 100%; /* Garantindo que o texto ocupe toda a largura do contêiner */
            padding: 0 10px; /* Adicionando um pequeno preenchimento ao redor do texto */
            background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
            color: white; /* Cor branca */
            font-family: 'Press Start 2P', cursive; /* Fonte gamer */
            font-weight: bold; /* Negrito */
            margin: 0; /* Removendo margens padrão */
            box-sizing: border-box; /* Mantendo o preenchimento dentro da largura total */
            opacity: 0; /* Inicialmente o texto estará invisível */
            transition: opacity 0.3s ease; /* Adicionando efeito de transição */
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* Efeito sombreado */
        }
        .jogo:hover p {
            opacity: 1; /* Tornando o texto visível quando o cursor estiver sobre a figura */
        }

        /* Estilos CSS para o botão de reprodução de áudio */
        .audio-btn {
            position: fixed;
            bottom: 20px; /* Ajuste para posicionar o botão no canto inferior esquerdo */
            left: 20px;
            z-index: 9999;
            border: none;
            background: none;
            padding: 0;
            cursor: pointer;
        }
        .audio-btn img {
            width: 60px;
            height: auto;
            filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
        }

        /* Estilos CSS para a imagem do Mario */
        .mario-img {
            position: fixed;
            bottom: 10px; /* Ajuste para posicionar a imagem na parte inferior da tela */
            right: 10px; /* Alinhamento à direita */
            z-index: 2; /* Certificando-se de que a imagem do Mario esteja sobreposta ao conteúdo */
            width: 120px; /* Largura da imagem do Mario */
            height: auto; /* Altura ajustável */
            padding: 0; /* Removendo o espaçamento interno */
        }

        /* Estilos CSS para a caixa de informação do IP */
        .ip-info {
            position: fixed;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            z-index: 9999;
            background-color: #888; /* Cor de fundo cinza */
            padding: 10px; /* Espaçamento interno */
            border: 1px solid #000; /* Borda sólida preta */
            color: white; /* Cor do texto */
            font-size: 14px; /* Tamanho da fonte */
            font-family: Arial, sans-serif; /* Fonte */
            border-radius: 10px; /* Borda arredondada */
            text-align: center; /* Centralizando o texto */
        }

        /* Ocultar a barra de rolagem */
        body {
            overflow: hidden;
        }
        /* Permitir rolagem apenas com o scroll do mouse */
        html {
            overflow-y: scroll;
            scroll-behavior: smooth;
        }

        /* Estilos para tornar a página responsiva */
        @media only screen and (max-width: 768px) {
            /* Ajuste o tamanho das figuras para dispositivos móveis */
            .jogo {
                width: calc(50% - 20px); /* As figuras ocuparão metade da largura da tela com espaçamento entre elas */
                height: auto; /* Altura ajustável */
            }
            .jogo img {
                width: 100%; /* As imagens ocuparão toda a largura do contêiner pai */
                height: auto; /* Altura ajustável */
            }
            /* Ajuste o estilo do contador para dispositivos móveis */
            .ip-info {
                font-size: 12px; /* Reduz o tamanho da fonte */
                padding: 5px; /* Espaçamento interno menor */
            }
        }