main.css

body {
    overflow: hidden; /* Evita a barra de rolagem */
    font-family: 'Arial', sans-serif;
    color: #333;
    background-color: #f0f0f0;
}

.button {
    z-index: 10; /* Defina um valor maior do que o z-index do jogador */
    padding: 10px 20px;
    border: none;
    background-color: #007bff;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    margin: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.button:hover {
    background-color: #0056b3;
}

/*#blue-skin {
    background-image: url('https://uploaddeimagens.com.br/images/004/670/624/full/frame-1.png?1700659188');
    background-size: cover;
    background-position: center;
}

#pink-skin {
    background-image: url('https://uploaddeimagens.com.br/imagens/FRmGeBA');
    background-size: cover;
    background-position: center;
}*/


#menu, #skins, #game {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}


#player {
    position: absolute;
    width: 0.08px; /* Ajuste a largura para a largura desejada */
    height: 0.08px; /* Ajuste a altura para a altura desejada */
    z-index: 5; /* Coloque o jogador na frente do parallax */
    background-repeat: no-repeat; /* Evita a repetição do sprite */
    background-size: contain; /* Ajusta o tamanho do sprite para se ajustar ao jogador, mantendo a proporção da imagem */
    width: 50px;
    height: 50px;
    
}


#boss {
    position: absolute;
    width: 0.08px; /* Ajuste a largura para a largura desejada */
    height: 0.08px; /* Ajuste a altura para a altura desejada */
    z-index: 5; /* Coloque o jogador na frente do parallax */
    background-repeat: no-repeat; /* Evita a repetição do sprite */
    background-size: contain; /* Ajusta o tamanho do sprite para se ajustar ao jogador, mantendo a proporção da imagem */
    width: 50px;
    height: 50px;
    
}

.background {
    position: absolute;
    width: 200%; /* Aumente a largura para 200% para clonar a imagem */
    height: 110vh; /* Ajuste a altura para um pouco mais que a altura da janela de visualização para evitar espaços vazios verticais */
    background-size: 50% auto; /* Ajuste o tamanho do fundo para 50% para compensar a largura aumentada */
    background-repeat: repeat-x; /* Repita a imagem horizontalmente */
    background-position: 0 100%; /* Fixe a imagem na base da tela e ajuste a posição no eixo Y */
    visibility: hidden; /* Esconda as imagens de fundo inicialmente */
}

.parallax {
    animation: parallax 5s linear infinite;
    visibility: visible; /* Exiba as imagens de fundo quando a animação começar */
}

#background1 {
    background-image: url('https://www.crieseusjogos.com.br/wp-content/uploads/2019/12/background-parallax_0-650x366.png');
    animation-duration: 20s; /* Ajuste a duração da animação para cada camada de fundo */
}

#background2 {
    background-image: url('https://www.crieseusjogos.com.br/wp-content/uploads/2019/12/background-parallax_1-650x112.png');
    animation: parallax 3s linear infinite;
    z-index: 3; /* Coloque esta imagem na frente das outras */
}

#background3 {
    background-image: url('https://www.crieseusjogos.com.br/wp-content/uploads/2019/12/background-parallax_3-650x117.png');
    animation-duration: 4sg;
    bottom: 10%;
    z-index: 2; /* Coloque esta imagem na frente das outras */
}

#background4 {
    background-image: url('https://www.crieseusjogos.com.br/wp-content/uploads/2019/12/background-parallax_4-650x119.png');
    animation: parallax 7s linear infinite;
    bottom: 20%; /* Ajuste este valor para mover o background4 para cima */
    z-index: 1; /* Coloque esta imagem atrás de #background3 */
}

#background5 {
    background-image: url('https://www.crieseusjogos.com.br/wp-content/uploads/2019/12/background-parallax_2-650x221.png');
    animation: parallax 10s linear infinite;
    bottom: 20%; /* Ajuste este valor para mover o background5 para cima */
    
}


@keyframes parallax {
    0% { background-position: 0 100%; }
    100% { background-position: -100% 100%; }
}

/* Estilos para celulares em modo retrato */
@media only screen and (max-width: 760px) and (orientation: portrait) {
    /* Seu código aqui */
}

/* Estilos para celulares em modo paisagem */
@media only screen and (max-width: 760px) and (orientation: landscape) {
    /* Seu código aqui */
}

/* Estilos para dispositivos não móveis */
@media only screen and (min-width: 761px) {
    /* Seu código aqui */
}