/* Estilos Gerais */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Fundo de Tela */
body {
    background-image: linear-gradient(135deg, rgb(35, 35, 80), rgb(50, 50, 205));
    text-align: center;
    color: rgb(255, 255, 255);
}

/* Container principal que agrupa todos os elementos */
.Tela_Principal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px; /* Espaçamento entre os elementos */
}
h2{
    margin-bottom: -10px;
    font-size: 1.5em;
    font-weight: bold;
}

/* Estilo da fonte do Tema */
h1{
    margin-top: 0%;
    font-size: 1.3em;
    font-weight: bold;
}

/* Círculo roxo em volta do logo */
.Circulo_Logo {
    width: 240px;
    height: 240px;
    background-color: rgb(30, 30, 90);
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    /* Sombra roxa para dar o efeito de brilho */
    background-color: rgb(30, 30, 90);
    border: 1px solid rgb(100, 0, 255);
    box-shadow: 0 0  20px rgb(80, 0, 210);
    color: rgb(255, 255, 255);
}

/* Ajusta o tamanho da imagem do logo */
.Logo_Svg {
    width: 700px;
    height: 1080px;
}

/* Estilo para TODOS os botões */
button {
    background-color: rgb(30, 30, 90);
    border: 1px solid rgb(100, 0, 255);
    box-shadow: 0 0 10px rgb(80, 0, 210);
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: background-color 0.3s ease; /* Efeito suave na transição */
    
}
button:hover  {
    background-color: rgb(10, 10, 60);
  
}

/* Botão JOGAR */
.Botão_Jogar {
    width: 150px; 
    height: 50px; 
    font-weight: bold;
    font-size: 1.2em;
   
}