/* Garante que a altura ocupe a tela toda */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Wrapper ocupa toda a altura */
body > div {
    height: 100%;
}

/* Ajusta a tabela para ocupar toda a altura disponível */
.table-style {
    width: 100%;
    margin: 0 0 1em;
}

/* Fonte responsiva e legível em todos os dispositivos */
td {
    font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
    font-size: clamp(1.2rem, 4vw, 2.5rem); /* Responsivo entre 1.2rem e 2.5rem */
    color: black;
    text-align: center;
    vertical-align: middle;
    padding: 0.5em 0; /* Ajuda no toque em dispositivos móveis */
}

/* Links */
a:link, a:visited, a:hover, a:active {
    color: #ffffff;
    text-decoration: none;
}

/* Espaçamento entre links no desktop */
@media (min-width: 601px) {
    td a {
        margin: 0 1.2em;
    }
}

/* Opcional: melhora o espaçamento entre links em telas pequenas */
@media (max-width: 600px) {
    td {
        font-size: clamp(1.1rem, 7vw, 1.8rem); /* Fonte um pouco maior em celulares pequenos */
    }
    a {
        margin: 0 0.4em;
    }
}