<style type="text/css">

* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
principal, quadTopo, menuTopo, logo, quadCorpo, nav, quadMobil, quadBorda, section, footer {
display: block;
}

body, html{
line-height: 38px;
background-color: #4682b4;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Codigo responsivo */
* 
img, picture, video, embed {
 max-width:100% !important;
 height:auto !important;
}

/* header */
header {
 height: auto;
 margin: 0px;
}

/* Envolve tudo */
.principal{
  max-width: 900px;
  min-width: auto;
  background: #086a87;
  margin: 0 auto;
  padding: 5px;
  border-radius: 6px;
  clear: both;
}

/* Jogo da velha */
/* Estilos do Jogo da Velha */
.alm-container { 
  text-align: center; color: #555; 
  background: #0066CC; 
  padding: 10px; 
  margin: 0px auto; 
  border-radius: 10px; 
  width: fit-content; 
  box-shadow: 10px rgba(0,0,0,0.3); 
}

.jogo {
    text-align: center;
    background-color: #ffd700;
    padding: 20px;
}
.tabuleiro {
    display: grid;
    grid-template-columns: repeat(3, 90px);
    grid-gap: 5px;
    margin-top: 20px;
}
.celula {
    width: 90px;
    height: 90px;
    background-color: #fff;
    border: 2px solid #333;
    font-size: 32px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.celula:hover {
    background-color: #eee;
}
.celula.vencedor {
    width: 75%;
    height: 75%;
    background-color: #aaffaa;
}
button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
#status {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
}
    
ul.lista-espacada li { 
  margin-bottom: 5px; /* Espaço semântico e consistente */ 
}

</style>

